PWAs auf iOS 15: Verbesserungen? [iOS 15.4 aktualisiert]

Apple behauptet, dass iOS 15 mit seiner umfangreichen Liste neuer Funktionen eine bessere Möglichkeit bietet, in Verbindung zu bleiben, sich zu konzentrieren und zu erkunden. Gibt es jedoch etwas, das das Leben eines PWA-Entwicklers einfacher machen kann? Wir werden die größten Änderungen, die Enttäuschungen, zusammen mit einigen interessanten Neuigkeiten in diesem Artikel untersuchen.

Alle Verbesserungen für PWA

[iOS 15.4] Navigationsvorabladung für Service Worker

Mit iOS 15.4 werden einige neue Verbesserungen für Service Worker eingeführt, darunter das Vorladen der Navigation und mehr Unterstützung für von Service Workern generierte Dateien.

In einigen Fällen kann das Hochfahren des Servicemitarbeiters die Antwortzeit des Netzwerks verlängern. Das Navigations-Preload fordert die Netzwerkanfragen während der Startzeit des Dienstmitarbeiters an, was die PWA-Leistung unterstützen sollte.

[iOS 15.4] Verbessertes Web-App-Manifest: Symbole und mehr

Gute Nachrichten! Nach lebenslangem Warten können PWA-Entwickler endlich die Web-App auf iOS 15.4 mit einem richtigen Icon implementieren. Wenn in der Web-App-Datei kein Apple-Touch-Symbol definiert ist, wird standardmäßig das Web-App-Manifestsymbol festgelegt.

Allerdings ist die Unterstützung noch nicht perfekt. Es gibt immer noch einige kleinere Fehler, die die Erfahrung für Benutzer und Entwickler beeinträchtigen, wie zum Beispiel:

• Form und Format von Symbolen sind nur auf quadratisches PNG beschränkt.
• Symbole werden automatisch in der Größe angepasst, wenn sie nicht den vordefinierten Größen von iOS entsprechen (iPads – 152 x 152 & 167 x 167, iPhones – 120×120 & 180 x180)
• Symbole werden nicht angezeigt, wenn Sie das Freigabeblatt öffnen, aber sie werden schließlich angezeigt, wenn Sie „Zum Startbildschirm hinzufügen“ wählen.
• Transparente Symbole haben entweder einen schwarzen oder einen weißen Hintergrund.

Darüber hinaus wird das Web-App-Manifest in früheren Versionen nur abgerufen, wenn Benutzer „ Zum Homescreen hinzufügen “ wählen. Für iOS 15.4 wird die Datei jetzt geparst und geladen, wenn die Seite bereits geladen wird. Infolgedessen können Sie die Designfarbe direkt beim Laden der Seite anwenden, was die PWAs vertrauenswürdiger macht.

[iOS15.4] Web-Push-Benachrichtigungen

Als wir letztes Jahr einen Artikel für PWA iOS 15 geschrieben haben, teilen wir einige Beweise dafür, wie Web-Push-Benachrichtigungen kommen könnten, und raten Sie mal, was passiert, es passiert endlich.

Genau wie bei den Web-App-Manifestsymbolen gibt es noch einige Unannehmlichkeiten im Zusammenhang mit dem Web-Push. Beispielsweise ist es standardmäßig deaktiviert, sodass die Leute zuerst davon wissen müssen, um es verwenden zu können. Außerdem finden es einige PWA-Entwickler unmöglich, die Web-Push-API zu verwenden, um Benachrichtigungsberechtigungen anzufordern, obwohl es Optionen dafür gibt.

Es lohnt sich jedoch, Neuigkeiten zu feiern. Was ist besser? Web Kit hat die Unterstützung für Web Push in Safari 16 auf macOS Ventura angekündigt. Laut ihrer Neckerei könnte Web Push 2023 für iOS und iPadOS verfügbar sein.

Themenfarbe unterstützt

Während der Support-Status für das Web-App-Manifest immer noch „Partially Support“ lautet, hat Safari 15 jetzt offiziell Theme-Color in HTML-Meta-Tags und Web-Manifest aktiviert. So können Sie jetzt Änderungen an Farben in der Statusleiste und im Overscroll-Bereich vornehmen , die auch für die Tab-Leiste und die Overscroll-Hintergrundfarben im Safari 15 Compact Tab-Layout auf Ipad OS 15, Big Sur und MacOS Monterey angewendet werden können.

Darüber hinaus können Sie mit dem Medienattribut auch einen Dunkel-/Hell-Modus für Ihre Progressive Web App auf Safari 15 aktivieren.

 <meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

Verbesserte WebGL (Web Graphic Library) und Web-Share-API

iOS 15 erlebt ein Upgrade von WebGL 1 auf WebGL2. WebGL 2 hat sich als bedeutende Verbesserung erwiesen, die viel schneller ist, viel mehr Textur als WebGL bietet und viele andere Vorteile bietet.

Außerdem enthält Safari 15 Unterstützung für Web Share Level 2, was Entwicklern den Weg ebnet, Dateien effektiv vom Browser zu Apps mit dem nativen Freigabedialog auszutauschen. Derzeit unterstützt es Bild-, Video-, Audio-, Textdateien und mehr.

Diese Änderung ermöglicht es Benutzern beispielsweise, Bilder von PWA-Seiten direkt mit ihren Twitter-Apps zu teilen, ohne dass zusätzliche Schritte zum Speichern von Fotos in der Bibliothek und zum erneuten Hochladen erforderlich sind.

Bessere Mediensitzungs-API

Die Media Session API bietet mehr Daten und Wiedergabesteuerungen und bringt somit das Medienerlebnis auf ein höheres Niveau. Ab iOS 15 können Benutzer über die Control Central , den Sperrbildschirm sowie die Menüleiste von MacOS Monterey auf die NOW PLAY-Karte zugreifen und einige einfache Wiedergabeoptionen steuern. Darüber hinaus bringt die neue Media Session das SharePlay-Erlebnis mit sich, mit dem Sie Filme ansehen und Musik mit Ihren Freunden über Facetime hören können. Dies kann eine gute Nachricht für webbasierte Podcast-Apps sein.

WebM-Audiounterstützung für Safari, WebM/VP9-Unterstützung für iPad

WebM ist eine lizenzgebührenfreie Open-Source-Webvideo-Streaming-Technologie. Nach der ersten Einführung des WebM-Images in iOS 14 unterstützt Apple jetzt WebM-Container des Opus-Audiocodecs in Safari 15. Darüber hinaus können Benutzer jetzt WebM/VP9-Videos auf IpadOS15 streamen.

Dieses Update verspricht in naher Zukunft volle Unterstützung für WebM und wir können davon ausgehen, dass WebM-Video bald auf mobilem Safari verfügbar sein wird. Infolgedessen haben PWA-Besitzer mehr Möglichkeiten, ihre Videomedien anzuzeigen, um ein besseres Benutzererlebnis zu bieten.

Unterstützung für das ES6-Modul in Service Worker

ES6 ist das erste integrierte JavaScript-Modul und bietet eine solide Struktur, mit der einfach zu arbeiten, zu warten, zu skalieren und Verhalten zu kapseln ist. Mit dem neuen ES6-Modul für Service Worker können Entwickler jetzt die Leistung verbessern und den Offline-Zugriff für iOS PWA auf organisiertere Weise ermöglichen. Infolgedessen ist es einfach, schnell zu skalieren und die PWA-Funktionalitäten zu erweitern, um die Marktanforderungen bei Bedarf zu erfüllen.

Einfacheres Multitasking für das iPad

Das iOS 15 hat einige Verbesserungen für ein intuitiveres Multitasking-Erlebnis auf dem iPad vorgenommen, während das, was zuvor funktioniert hat, beibehalten wird. Zum Beispiel gibt es eine neue Registerkarte mit drei kleinen Punkten, die das Multitasking-Menü oben auf dem Display darstellt, das die App im Vollbildmodus, geteilten Bildschirm oder als Slide-Over erscheinen lässt. Außerdem wird in SplitScreen ein schwebendes zentriertes Fenster eingeführt, in dem Sie ein Fenster oben in Ihren Splitscreen-Apps öffnen und es dann an Slider Over, Split View oder Full Screen senden können.

Darüber hinaus sind eine neue Tastenkombination und eine neue Multitasking-Benutzeroberfläche, die alle Apps (einschließlich der in Slide Over) anzeigt, eine kurze Erwähnung wert.

Bisher scheint es, dass das neue Upgrade auf Ipad Multitasking für Web und PWA positives Feedback erhalten hat, um viel benutzerfreundlicher zu sein als das von iOS 14.

Neuer App Clip – Ein weiteres auffälliges Update

Wir haben den App-Clip in unserem PWA iOS 14 Wrapping Up als etwas erwähnt, das für Android-ähnliche installierbare PWAs zu erwarten ist. Also wie ist es jetzt?

App Clip kann jetzt in Websites integriert werden, wodurch sie in Safari angezeigt werden. Die Karte ermöglicht es den Benutzern, ihre anfänglichen Aufgaben wie das Bestellen von Lebensmitteln oder das Mieten eines Fahrrads zu erledigen, und fordert sie dann auf, native Apps im App Store zu installieren. Die neue Änderung schneidet einige zusätzliche Schritte von iOS 14 ab, um die App-Clips auf der Webseite und in Apps von Drittanbietern zu entdecken.

Von PWA-Installationsbannern ist leider noch nichts zu sehen. Wird Apple App-Clips PWA-freundlich machen? Oder versuchen sie, eine eigene PWA-Version zu erstellen? Oder passen App-Clips und PWAs einfach überhaupt nicht zusammen? Die Antwort liegt noch in der Zukunft.

Es werden keine größeren Einschränkungen angesprochen

Die neuen iOS 15-Releases bringen sicherlich einige Enttäuschungen für die PWA-Entwicklungen mit sich, da das, wonach wir suchen, offensichtlich immer noch vom Tisch ist. Es ist immer noch ziemlich harte Arbeit, PWA auf iOS 15 ohne die Verfügbarkeit dieser Funktionen zu implementieren:

• Hintergrundsynchronisierung
• Web-Push
• Vor der Installation Aufforderung und Installationsbanner
• Hintergrundaudio für PWAs

Darüber hinaus gibt es auch keine Korrektur einiger schlechter Punkte, die wir im iOS 14-Artikel erwähnt haben.

• Kein PWA-Symbol in der App-Bibliothek
• Nicht viele Änderungen an der Unterstützung von Web-App-Manifesten (außer Designfarben)
• Die Statusleiste ist immer noch black und nur black-translucent .
• Große Funktionseinschränkung bei anderen Webbrowsern

Wegbringen

Dort haben Sie alles, was iOS15 für PWA hat. Während die meisten Änderungen an Version 15 geringfügig sind, eröffnet iOS 15.4 mit Web Push und mehr Web App Manifest-Unterstützung eine bessere Zukunft für PWA auf iOS. Mit der im September 2022 veröffentlichten Betaversion von iOS 16 hoffen wir auf weitere bedeutende Änderungen.