It’s #FrontendFriday – 8 neue Chrome APIs für PWAs
Auf blog.doubleSlash.de habe ich bereits zu „Was ist eine progressive Web App“ gebloggt. In diesem Blogpost stelle ich euch 8 neue APIs im Google Chrome Browser vor, die das native Verhalten von Web Apps unterstützen. Die verschiedenen APIs werde ich nicht bis ins technische Detail erläutern, sondern vor allem die Benefits für User darlegen.
Browser-Kompatibilitäts-Disclaimer: alle nachfolgend vorgestellten APIs funktionieren (bis jetzt) nur in Google Chrome oder Google Chrome für Android. Bevor die APIs produktiv verwendet werden, bitte immer über caniuse.com prüfen, wie der aktuelle Browsersupport ist.
1. Web Share Target API
Kennt ihr die Teilen-Funktion in Android mit Vorschlag von passenden, bereits installierten Apps? Genau diese Funktion ist nun auch mit Web Apps nutzbar. Die Web Share Target API ermöglicht so das einfache Teilen von Dateien, Links oder Text an eine Web App.
Demo (Android): https://web-share.glitch.me/
2. Asynchrone Zwischenablage für Bilder (Async Clipboard API)
Die Async Clipboard API ist an sich nichts neues, jedoch wurde sie um die Möglichkeit zur Entgegennahme von Bildern aus der Zwischenablage in den Browser erweitert. Dadurch kann der User „wie gewohnt“ via [STRG]+[C] Bilder z.B. aus dem Windows Explorer kopieren und mit [STRG]+[V] in eine Web App einfügen.
Demo: https://glitch.com/~async-clipboard-api
3. Wake Lock API
Durch die Wake Lock API gibt es endlich auch für Webapps einen einheitlichen Weg, den erzwungenen „Sleep“-Modus von Apps durch Android zu verhindern – ganz ohne unschöne Hacks! So können Operationen im Browser auch mit deaktiviertem Display im Hintergrund weiter ausgeführt werden. Vorsicht: natürlich verbraucht dies mehr Akku, jedoch gibt es sinnvolle Anwendugnsfälle, die auch im Hintergrund weiter laufen müssen (z.B. Run Tracking Apps).
4. Web OTP (aka SMS Receiver API)
Die Web OTP API (One Time Password) ermöglicht es, Einmalpasswörter – die über SMS zugesendet werden – im Browser automatisch zu erkennen. Ihr kennt das vielleicht bereits von Apps wie WhatsApp oder Messenger, wo bei der Einrichtung der SMS-Code automatisch von der App übernommen wird. Dies soll mit der API in Zukunft auch in einer Web App (Browser) funktionieren.
Demo (Android): https://code.sgo.to/tmp/sms.html oder https://sms-receiver-demo.glitch.me/
5. Native File System API
Die Native File System API dürfte vielen bereits bekannt sein. Sie ermöglicht das direkte Speichern und Laden von Dateien auf der Festplatte. Somit ist es beispielsweise möglich, einen vollwertigen Texteditor auf Webbasis zu entwickeln, wie in der Demo zu sehen.
Demo: https://googlechromelabs.github.io/text-editor/
6. Shape Detection API
Der Zugriff auf die Kamera über den Browser zum Aufnehmen von Fotos oder Videos ist für die meisten bereits bekannt. Die Shape Detection API ergänzt diese Funktion jedoch mit einem sehr nützlichen Feature: sie analysiert das aufgenommene Foto/Video und erkennnt, ob sich in der Aufnahme ein Gesicht, Text oder Barcode befindet. Probiert’s einfach mal aus!
Demo (Android): https://shape-detection-demo.glitch.me/
7. Web Payment API
Die Web Payment API vereinfacht den Bezahlprozess auf Webseiten für Benutzer enorm. Bereits hinterlegte Bezahloptionen in Android werden nach Freigabe durch den Benutzer direkt an die Webseite übertragen – keine lästige Eingabe von Kreditkarteninformationen, Rechnungsadressen oder Versandadressen mehr!
In meinem Vortrag „Stop being native, start being progressive“ auf der WDC 2019 in Nürnberg habe ich die Web Payment API sogar live vorgestellt.
Demo: https://paymentrequest.show/demo/
8. Contact Picker
Mit der Contact Picker API könnt ihr Kontakte direkt aus dem Android Contact Store auswählen und an eine Webseite übertragen. Wichtig hierbei ist, dass die API nur die Kontakte an die Webseite durch reicht, die ihr auch ausgewählt habt.
Demo (Android): https://contact-picker.glitch.me/
