Funktionen

Progressive Web-Apps können mehr als nur das Rendern von Inhalten auf dem Bildschirm oder das Herstellen einer Verbindung zu Webdiensten. PWAs können Dateien aus dem Dateisystem verarbeiten, mit der Zwischenablage des Systems interagieren, auf Hardware zugreifen, die mit dem Gerät verbunden ist, und vieles mehr. Jede Web API ist für Ihre PWA verfügbar. Wenn Ihre App installiert ist, stehen Ihnen außerdem einige zusätzliche APIs zur Verfügung.

Unter What Web Can Do Today erfahren Sie, was auf den einzelnen Plattformen möglich ist. Für einzelne APIs oder Funktionen kannst du Can I Use oder die Browserkompatibilitätstabellen auf der MDN verwenden.

Immer prüfen, ob Funktionen unterstützt werden

Der erste Buchstabe in PWA steht für progressiv und basiert auf den Konzepten Progressive Enhancement und Funktionserkennung. Sie sollten nicht erwarten, dass Ihre App auf allen Geräten gleich funktioniert. Dank der Vielfalt an Kontexten und Fähigkeiten auf Milliarden von Geräten in verschiedenen Ländern sind PWAs aufgrund ihrer Fortschrittlichkeit eine hervorragende Plattform.

Das bedeutet, dass Sie Ihre App in Ebenen entwickeln müssen, die möglicherweise nicht auf allen Geräten verfügbar sind, und die Verfügbarkeit vor der Nutzung prüfen.

Prüfen Sie mit JavaScript, ob eine API vorhanden ist, bevor Sie sie verwenden, oder fragen Sie eine API, ob ein Dienst auf dem jeweiligen Gerät verfügbar ist.

Leistungsstarkes Web

Das Web ist heutzutage enorm leistungsfähig. Beispiel:

  • Sie können eine hyperlokale Videoanruf-App mit WebRTC, Standortbestimmung und Push-Nachrichten erstellen.
  • Sie können eine App installierbar machen.
  • Mit WebAssembly können Sie Videoeffekte hinzufügen.
  • Mit WebGL und WebXR lassen sich sogar virtuelle Realitäten realisieren.

Leistungsstarke PWA

Lassen Sie uns die APIs für PWA-Funktionen in vier Gruppen unterteilen:

  • Grün: APIs, die, sofern technisch möglich, in jedem Browser und auf jeder Plattform verfügbar sind. Die meisten von ihnen werden schon seit vielen Jahren versandt, sie gelten als ausgereift und können problemlos verwendet werden. Eine Beispiel-API aus dieser Gruppe ist die Geolocation API.
  • Hellgrün: APIs sind nur in bestimmten Browsern verfügbar. Aufgrund der mangelnden Unterstützung auf einigen Plattformen haben sie sich in der unterstützten Untergruppe von Browsern weiterentwickelt, sodass Sie die Funktion auf ihnen problemlos nutzen können. Eine Beispiel-API aus dieser Gruppe ist WebUSB.
  • Gelb: experimentelle APIs. Diese APIs sind noch nicht ausgereift. Sie sind nur in bestimmten Browsern und im Rahmen von Tests oder Tests verfügbar. Wir haben diese Funktionen bereits im Kapitel „Experimentell“ behandelt.
  • Rot: Die Gruppe der APIs, die nicht in einer PWA verwendet werden können, und deren Pläne ihre Einführungen noch langfristig umfassen. Eine Beispiel-API aus dieser Gruppe ist Geofencing.

Umweltfreundliche Funktionen

Nachfolgend finden Sie eine Liste der wichtigsten Funktionen, die Sie in Ihrer PWA verwenden können.

Grundlagen

  • Dateien mithilfe der Cache API lokal im Cache speichern, wie im Kapitel „Caching“ beschrieben
  • Ausführung von Aufgaben in Threads mit Web Workern, wie im Kapitel Komplexitätsmanagement beschrieben
  • Netzwerkanfragen mit verschiedenen Strategien in einem Service Worker verwalten, wie im Kapitel Service Worker beschrieben
  • 2D Canvas zum Rendern von 2D-Grafiken auf dem Bildschirm mit der Canvas API.
  • 2D- und 3D-Hochleistungs-Canvas oder WebGL zum Rendern von 3D-Grafiken.
  • WebAssembly oder WASM, um Low-Level-kompilierten Code auszuführen, um die Leistung zu steigern.
  • Echtzeitkommunikation mit der WebRTC API.
  • Web Performance APIs zur Messung und Verbesserung der Nutzerfreundlichkeit Weitere Informationen finden Sie im Leitfaden zur Performance API.
  • Speichern Sie Daten lokal mit IndexedDB und Speicherverwaltung, um das Kontingent abzufragen und nichtflüchtigen Speicher anzufordern, wie im Kapitel Offlinedaten beschrieben.
  • Niedrige Audioqualität dank der Web Audio API.
  • Erkennung im Vordergrund mithilfe der Page visibility API
  • Netzwerkkommunikation mit der Fetch API und der WebSocket API

Hardware und Sensoren

  • Die Standortbestimmung ermittelt den Standort des Nutzers über die Geolocation API über verschiedene Anbieter, z. B. über Satellit oder WLAN.
  • Kamera und Mikrofon empfangen über die Schnittstelle Mediengeräte Medienstreams von Kameras und Mikrofonen.
  • Die Sensoren erfassen über die Sensors API oder ältere Benutzeroberflächen wie DeviceMotionEvent und DeviceOrientationEvent Echtzeitinformationen vom Beschleunigungsmesser, Gyroskop, Magnetometer und anderen Anwendungen. In Safari müssen Sie eine nicht standardmäßige Berechtigungsdialoganfrage senden, um sie verwenden zu können.
  • Touch und Zeiger: Mithilfe von Zeiger-Ereignissen und Touch-Ereignissen erhalten Sie Informationen zu allen Berührungen und Zeigerklicks, die Sie mit Ihrem Finger, einer Maus, einem Touchpad oder einem Stift ausführen.
  • Gamepads zum Lesen von Informationen von standardmäßigen Gamepads und Joysticks, die über die Gamepad API mit dem Gerät verbunden sind.
  • Biometrische Authentifizierung (z. B. Gesichtserkennung oder Fingerabdruck) über die Webauthentifizierung oder WebAuthn

Betriebssystemintegration

Hellgrün-Funktionen

Im Folgenden finden Sie eine Liste der wichtigsten Funktionen, die Sie in Ihrer PWA verwenden können. Sie sind jedoch möglicherweise nicht in jedem Browser verfügbar.

Grundlagen

  • WebGL 2.0, die neue Version der WebGL-Spezifikation für OpenGL 3.0
  • Codecs, ein Low-Level-Zugriff auf die einzelnen Frames eines Videostreams und Audioblöcke. Nützlich für Webanwendungen, bei denen die vollständige Kontrolle über die Verarbeitung von Medien über die Web Codecs API erforderlich ist.

Hardware und Sensoren

  • Umgebungslicht misst zusätzlich zur Sensors API den aktuellen Helligkeitsgrad oder die Beleuchtung des Umgebungslichts um das Gerät herum.
  • Die Vibration gibt dem Nutzer über die Vibration API ein haptisches Feedback, wenn etwas passiert, sofern das Gerät dies unterstützt.
  • Bei Aufzeichnungen werden die von einem MediaStream- oder HTMLMediaElement-Objekt (z. B. <video>-Tag) generierten Daten mithilfe der MediaRecorder API zum Analysieren, Verarbeiten oder Speichern auf einem Laufwerk erfasst.
  • Wenn Sie einen Wakelock auf dem Bildschirm anwenden, wird mithilfe der Screen Wake Lock API verhindert, dass das Gerät den Bildschirm dunkelt oder gesperrt wird, wenn Ihre PWA weiter ausgeführt werden muss.
  • Mit Virtual Reality können Sie mithilfe der WebXR Device API ein Headset und andere Geräte in Ihrer PWA verwenden.
  • Augmented Reality kann in Ihrer PWA auf verschiedene Weise umgesetzt werden, z. B. mithilfe der WebXR Device API oder der Safari Quick Look App für AR-Inhalte.
  • Inaktive Nutzer mit der Idle Detection API erkennen.
  • Die Ausrichtungssperre sperrt die Ausrichtung auf Hoch- oder Querformat, während die PWA auf dem Bildschirm zu sehen ist. Das ist mithilfe der Screen Orientation API oder der Eigenschaft orientation des Web App Manifest bei installierten Apps möglich.
  • Inhalte auf Projektoren und sekundären Bildschirmen präsentieren – dank der Presentation API.
  • Sperren Sie einen Zeiger, um mithilfe der Pointer Lock API Informationen zur Deltabewegung von Zeigern (Mäuse, Touchpads und Zeigern) anstelle von Positionswerten zu erhalten. Das ist für einige Spiele nützlich.

Betriebssystemintegration

Ressourcen