Progressive Web Apps voor iOS

Met iOS 11.3 heeft Apple stilletjes support toegevoegd voor de nieuwe technologie van “Progressive Web Apps” (PWAs). Het wordt tijd om te kijken hoe deze werken, wat zijn de uitdagingen en mogelijkheden die je moet weten als je al een Progressive Web App hebt uitgebracht.

Als je bij dit artikel beland bent en niet weet wat een Progressive Web App is, is het goed om te weten dat er niet een precieze definitie is. Het is belangrijk om te weten dat het om apps gaat die ontwikkeld zijn met Web technologie maar ook offline kunnen werken. Het is niet nodig om in te loggen en kan op een besturingssysteem worden geïnstalleerd en er uitzien als elke andere app.

Voor de meeste platformen is er geen App Store process nodig, op Edge/Windows 10 na, die vereist dat Progressive Web Apps beschikbaar zijn in de store.

Dit betekent dus dat je apps kunt installeren op iOS zonder goedkeuring van de App Store. Waarschijnlijk is dit een van de redenen waarom Apple niets over deze optie heeft gemeld, zodat de gebruiker niet verward raakt. Zelfs de release notes op Safari vermelden niets over deze technologie.

Was Apple niet de bedenker van PWAs?

Als we eerlijk zijn heeft Google met het Chrome team de term Progressive Web Apps bedacht. Het idee was in eerste instantie beschikbaar op Safari met de originele iPhone OS. In 2007, heeft Steve Jobs gemeld hoe je apps kunt ontwikkelen voor de originele iPhone. Dit waren web apps. In eerste instantie was de App Store geen onderdeel van de originele roadmap. De native SDK (Software Development Kit) was ook niet beschikbaar tijdens het eerste jaar van het toestel. Vanuit Apple’s perspectief zijn Progressive Web Apps tot de dag vandaag, web apps die toegankelijk zijn van de home screen. Het icoon wordt een WebClip genoemd.

Het klopt dat dit idee in de afgelopen 11 jaar weinig aandacht heeft gehad en Apple is vergeten het platform up te daten. De afgelopen 10+ jaar is het altijd aanwezig geweest, maar het was inconsistent en vol met bugs. Een aantal jaren later zijn andere platformen het idee gaan overnemen inclusief de MeeGo browser op de Nokia N9 en vervolgens Chrome op Android.

Chrome heeft geholpen deze technologie te verbeteren door een betere ervaring aan te bieden. Dit was voornamelijk gericht op Service Workers en Web App Manifest specs. Met iOS 11.3 gaat Apple deze twee specs aanbieden net zoals: Firefox, Chrome, Samsung Internet, Opera en UC browser. Andere browsers op desktops ondersteunen Service Workers, maar vooral Web App Manifest support gaat belangrijk worden dit jaar.

Dus de app hoeft geen App Store test te ondergaan?

Ja, dat klopt. De app zal wel, alleen maar werken met de browser of Web Platform beveiliging en het executie model. Dit betekent dat je apps kunt publiceren die niet zijn goedgekeurd in de app store, zoals een interne app voor de werknemers van jouw bedrijf. Het nadeel is dat je geen toegang hebt tot native functies zoals: Face ID op de iPhone X of de ARKit voor augmented reality. Of je moet wachten totdat het Web Platform deze nieuwe functies oppakt.

De iOS Progressive Web App kan met Safari werken als elke website of als een alleenstaande mode (zoals elke andere app in het systeem). Als je afvraagt of iOS Progressive Web Apps gebruik maken van Web View dan is dat niet het geval voor Safari of het geïnstalleerde icoon. Wel is dit het geval wanneer je een andere browser gebruikt of door middel van Facebook en zijn In-App browser.

Mogelijkheden van Progressive Web Apps op iOS

Met het Web Platform op iOS heb je toegang tot de volgende functies:

• Geolocatie
• Sensoren (Magnetometer, Accelerometer, Gyroscope)
• Camera
• Audio output
• Spraaksynthese (alleen met aangesloten headset)
• Apple Pay
• WebAssembly, WebGL, WebRTC en andere experimentele functies.

Beperkingen in vergelijking met native iOS apps

• De app kan offline data opslaan met een maximum van 50 Mb.
• Als de gebruiker de app een aantal weken niet gebruikt zal iOS de files van de app verwijderen. Het icoon zal aanwezig blijven, maar als de app wordt gebruikt zal deze opnieuw moeten worden gedownload.
• Geen toegang tot: serial Beacons, Face ID, Bluetooth, Touch ID, Batterij informatie, altimeter sensor.
• Geen toegang om de code uit te voeren als het op de achtergrond actief is.
• Geen toegang tot privégegevens (locatie, contacten) en native social media apps.
• Geen toegang tot In App Payments en vele andere services aangeboden door Apple.
• Op iPad kun je het scherm niet delen met andere apps. Progressive Web Apps zullen altijd het hele scherm gebruiken.
• Geen Push Notifications, Siri integratie of icon badge.

Wat kunnen PWAs op Android maar niet op iOS

• Meer dan 50 Mb opslaan.
• Android verwijderd geen files als je de app niet gebruikt. Wel kunnen gegevens worden verwijderd als er gebrek aan ruimte is. Als de app is geïnstalleerd of vaak wordt gebruikt vergt het continue opslagruimte.
• Bluetooth toegang voor BLE toestellen.
• Web Share voor toegang tot native share dialog.
• Spraakherkenning.
• Achtergrond synchronisatie en Web Push Notificaties.
• Web App Banner om de gebruiker de app te laten installeren.
• Je kunt beperkt het splash screen en oriëntatie aanpassen.
• Met de WebAPK en Chrome kunnen gebruikers niet meer dan een exemplaar van de Progressive Web App installeren.
• Met WebAPK en Chrome verschijnen Progressive Web Apps onder settings en kan je het datagebruik zien. Bij iOS valt alles onder Safari.
• Met WebAPK en Chrome zal de PWA intents voor de URL beheren. Als je een link krijg naar de PWA dan zal deze in een op zichzelf staande modus worden geopend en niet binnen de browser zelf.

Wat kunnen PWA’s op iOS maar niet op Android

• Gebruikers kunnen van het icoon de naam wijzigen voordat de app wordt geïnstalleerd.
• PWA’s kunnen worden geconfigureerd in het configuratieprofiel. Corporate gebruikers kunnen dus Progressive Web App shortcuts ontvangen van het bedrijf. Safari maakt gebruik van de term WebClip voor deze functie. Volgens documentatie maakt deze optie alleen geen gebruik van de Web App Manifest.

Als er geen App Store is, hoe installeer je PWA’s?

Dit is een van de grootste uitdagingen op iOS. Er zijn geen prompt of uitnodigingen mogelijk vanuit Safari. Op Android staat dit bekend als Web App Banners. De gebruiker moet naar jouw Progressive Web App URL gaan binnen Safari en dan handmatig de Share icon aanklikken. Vervolgens “Add to Home Screen”. Wanneer je een website bezoekt dat een PWA is dit vaak nauwelijks te herkennen.

Daarnaast is het niet mogelijk om met andere browsers in de App Store zoals Firefox, Chrome of Edge een PWA of Service Worker te installeren.

Als de app eenmaal is geïnstalleerd zal het er uit zien als elk ander icoon op de home screen. Helaas is er geen 3D Touch menu beschikbaar. Wanneer je dezelfde app een tweede keer installeert zal een nieuw icoon ontstaan die naar dezelfde PWA verwijst. Gelukkig worden de geïnstalleerde files wel met elkaar gedeeld.

Veel web apps hebben een link om de native app te installeren van de App Store. Dit blijft zichtbaar, zelfs binnen de Progressive Web App.