Le PWA su iOS : limiti e differenze con app native 🚀

Condividi questo articolo:


Con iOS 11.3, Apple ha aggiunto silenziosamente il supporto per l’insieme di base di nuove tecnologie alla base dell’idea di “Progressive Web Apps” (PWA). È tempo di vedere come funzionano, quali sono le loro capacità e sfide e cosa devi sapere se hai già un PWA pubblicato.

Questa App è una PWA e appare a schermo intero -in linea abilitata- su un iPad. Appare anche nel dock iPad come qualsiasi altra app nativa dall’App Store.

Se sei venuto qui e non sai ancora cosa sia un PWA, iniziamo a dire che non esiste una definizione unica o precisa. Ma è un’app creata con tecnologie Web che, senza packaging o firma, può funzionare offline e può facoltativamente essere installata nel sistema operativo dove apparirà e funzionerà come qualsiasi altra app.

Non esiste alcun processo dell’App Store coinvolto nella maggior parte delle piattaforme: solo Edge / Windows 10 sta attualmente forzando PWA nel negozio.

Quindi hai ragione, ora puoi installare app su iOS senza l’app Store. Questo è probabilmente uno dei motivi per cui Apple non ha menzionato affatto questa nuova capacità; potrebbero non voler confondere gli utenti. Nemmeno le note di rilascio su Safari menzionano le tecnologie.

Sai distinguere tra l’app nativa di Google Maps e la versione PWA?

Siamo onesti qui; mentre Google con il team Chrome ha coniato il termine PWA, l’idea era inizialmente disponibile su Safari sul sistema operativo iPhone originale. Nel 2007, Steve Jobs ha annunciato “un’altra cosa” nel WWDC: come sviluppare app per l’iPhone originale ed era, a sorpresa, app web! L’App Store non era sulla roadmap originale e l’SDK nativo non era disponibile durante il primo anno del dispositivo. Dal punto di vista di Apple, le PWA ancora oggi sono solo “app Web dalla schermata principale” e l’icona è qualcosa che viene chiamata WebClip.


È anche vero che l’idea non ha ricevuto troppa attenzione 11 anni fa e Apple ha dimenticato di aggiornare quella piattaforma, quindi mentre era ancora lì da oltre 10 anni era buggy e incoerente. Qualche anno dopo altre piattaforme clonarono l’idea tra cui il browser MeeGo su Nokia N9 e quindi Chrome su Android.

Chrome ha contribuito a far evolvere le tecnologie per offrire un’esperienza migliore, principalmente con le specifiche dei manifestanti di Service Worker e Web App. A partire da iOS 11.3 oggi (30 marzo 2018) Apple sta abbinando Chrome, Firefox, Samsung Internet, UC Browser e Opera (principalmente su Android) supportando queste due specifiche. Altri browser su supporto desktop Operai di servizio ma il supporto manifest di app Web è in lavorazione per quest’anno.

Steve Jobs presenta PWA (con un nome diverso) nel WWDC 07 con il primo iPhone
Aspetta lì, quindi l’app non ha superato alcun test di qualità sull’App Store, giusto? 🤔

Sì, è corretto. Tuttavia, l’app verrà eseguita solo con il modello di sicurezza ed esecuzione del browser o della piattaforma Web. Ciò significa che puoi “pubblicare” app non approvate nel negozio, come un’app interna per i dipendenti della tua azienda (e sì, anche contenuti per adulti), ma non puoi accedere a funzionalità native pure, come Face ID su iPhone X o ARKit per realtà aumentata. O almeno, è necessario attendere che la piattaforma Web rilevi queste nuove funzionalità.

Il PWA può essere eseguito all’interno di Safari come qualsiasi sito Web o in modalità autonoma, come qualsiasi altra app nel sistema. Se ti stai chiedendo se i PWA utilizzano la visualizzazione Web, non è questo il caso di Safari o dell’icona installata, ma lo sarà durante la navigazione in altri browser o all’interno di Facebook con il suo browser in-app.

Capacità di PWA su iOS

Con la piattaforma Web su iOS puoi accedere a:

geolocalizzazione
Sensori (magnetometro, accelerometro, giroscopio)
telecamera
Uscita audio
Sintesi vocale (solo con cuffie collegate)
Apple Pay
WebAssembly, WebRTC, WebGL e molte altre funzionalità sperimentali sotto una bandiera.

Riesci a rilevare che queste icone sono tutte PWA su un iPhone?
Limitazioni rispetto alle app iOS native

  • L’app può archiviare dati e file offline solo fino a 50 Mb
  • Se l’utente non utilizza l’app per alcune settimane, iOS libererà i file dell’app. L’icona sarà ancora presente nella schermata principale e, quando si accede, l’app verrà scaricata di nuovo
  • Nessun accesso ad alcune funzionalità, come Bluetooth, seriale, beacon, Touch ID, Face ID, ARKit, sensore altimetro, informazioni sulla batteria
  • Nessun accesso per eseguire il codice mentre in background
  • Nessun accesso alle informazioni private (contatti, posizione in background) e anche nessun accesso alle app social native
  • Nessun accesso a In App Payments e molti altri servizi basati su Apple
  • Su iPad, nessun accesso a work con Side o Split Views condividendo lo schermo con altre app, i PWA occuperanno sempre l’intero schermo
  • Nessuna notifica push, nessun badge icona o integrazione Siri
  • Anche se hai un PWA installato con un’icona e il nome Tinder, Siri non riesce a trovarlo

Cosa possono fare le PWA su Android e non su iOS

Su Android puoi archiviare più di 50 Mb
Android non elimina i file se non si utilizza l’app, ma può eliminare i file sotto pressione di archiviazione. Inoltre, se installato o utilizzato molto dall’utente, il PWA può richiedere l’archiviazione permanente
Accesso Bluetooth per dispositivi BLE
Condivisione Web per l’accesso alla finestra di dialogo della condivisione nativa
Riconoscimento vocale
Sincronizzazione in background e notifiche push Web
Banner dell’app Web per invitare l’utente a installare l’app
Puoi personalizzare (un po ‘) la schermata iniziale e gli orientamenti desiderati
Con WebAPK e Chrome, gli utenti non possono installare più di un’istanza di un PWA
Con WebAPK e Chrome, i PWA vengono visualizzati in Impostazioni e puoi vedere l’utilizzo dei dati; su iOS tutto appare sotto Safari
Con WebAPK e Chrome, PWA gestisce gli intenti per il suo URL, quindi se ottieni un collegamento a PWA, questo verrà aperto in modalità autonoma e non all’interno della finestra del browser.

Cosa possono fare le PWA su iOS e non su Android

Gli utenti possono cambiare il nome dell’icona prima di installarlo
Possono essere configurati in un profilo di configurazione, in modo che gli utenti aziendali possano ricevere scorciatoie PWA dall’azienda (è una buona idea!). Safari usa il termine WebClip per questa funzione; tuttavia non sembra leggere il Web App Manifest (secondo la documentazione)
I profili di configurazione possono includere WebClips o icone PWA

Ma se non c’è App Store, come si installa un PWA? ⚠️

 

Questa è una delle sfide più significative su iOS in quanto non ci saranno richieste o inviti da Safari (noti come banner delle app Web su Android). Pertanto, l’utente deve accedere all’URL PWA in qualche modo all’interno di Safari, quindi premere manualmente l’icona Condividi, quindi “Aggiungi alla schermata principale”. Non ci saranno indicazioni che un sito Web che si sta visitando sia un PWA.

Quando vai su Tinder.com puoi ignorare il banner dell’app nativo nella parte superiore e fare clic su Condividi, Aggiungi alla schermata principale. Se fornirai istruzioni per l’installazione da parte dell’utente, tieni presente che il pulsante è localizzato in base alla lingua del sistema
Inoltre, ulteriori pseudo-browser disponibili nell’App Store, come Chrome, Firefox, Brave o Edge, non saranno in grado di installare un PWA o utilizzare i Service Worker.

Una volta installato, apparirà come qualsiasi altra icona nella schermata principale. Tuttavia, non ci sarà alcun menu 3D Touch. E se installi di nuovo lo stesso PWA, avrai un’altra icona che punta allo stesso PWA (fortunatamente, i file installati saranno condivisi).

Inoltre, molte app Web dispongono di un collegamento per installare l’app nativa dall’App Store, che è ancora visibile anche all’interno della PWA, come nell’esempio di Tinder:

Ho già l’app, giusto?
Ho già un PWA, funzionerà subito su iOS?

Il tuo PWA sarà disponibile per l’installazione subito dopo che gli utenti hanno effettuato l’aggiornamento a iOS 11.3. Non è necessario attivare l’opzione per iOS. Ogni PWA è disponibile per l’installazione. Ma ciò non significa che tutto funzionerà come previsto.

Uber PWA sembra davvero bello. Ma se fai clic su “Accedi” o “Continua” l’autorizzazione va su Safari, quindi sei fuori dal PWA autonomo … quindi, è inutile.
Se stai leggendo questo articolo, potresti aver già visto il mio precedente articolo in beta: Cupertino abbiamo un problema. Sfortunatamente, la maggior parte dei bug e delle sfide che ho incontrato durante i beta sono ancora qui con noi nella versione finale 😒

Se non fai nulla, la tua PWA potrebbe ottenere una barra di stato nero su nero, quindi l’utente non vedrà l’ora, lo stato della batteria o qualsiasi notifica 😣
Ciò che non funziona

Il display: schermo intero e display: minimal-ui non funzionerà su iOS; lo schermo intero si attiverà da solo e minimal-ui sarà solo una scorciatoia per Safari. Puoi ottenere qualcosa di simile a schermo intero (la barra di stato esiste ma sulla tua app) usando l’estensione di visualizzazione adatta per la copertina o un meta tag deprecato.
Se si fa affidamento su Background Sync, è necessario disporre di un’implementazione del backup
Non è possibile bloccare l’orientamento del PWA
Il colore del tema per lo stile della barra di stato non funzionerà; puoi usare il meta tag deprecato per le barre di stato in bianco o nero, oppure puoi usare un trucco CSS / HTML per emulare un colore del tema.

Starbucks PWA non ha un pulsante Indietro dalla sezione “Iscriviti”, quindi non è possibile annullare l’operazione, è necessario ricaricare PWA
Se il tuo PWA non ha gesti o pulsanti indietro nell’interfaccia utente dell’app, l’utente non sarà in grado di navigare tra le schermate
La tua icona Android potrebbe sembrare terribile su iOS poiché Apple non supporta icone trasparenti, quindi dai un’occhiata.

Google Keep PWA si affida alle icone di Manifest app Web, quindi su iOS è solo uno screenshot. È necessario fornire icone iOS tramite un tag di collegamento non standard Apple
Inoltre, iOS non sta prendendo le icone dal Manifest dell’app Web, ma dal collegamento Apple-Touch-Icon. Se non fornisci il tag link, verrà utilizzato uno screenshot per l’icona (vedi Google Keep

Esempio PWA)
Non esiste una schermata iniziale, quindi la maggior parte delle proprietà dei colori del manifest vengono ignorate
Nessun evento manifest verrà generato, quindi se stai monitorando l’installazione attraverso questi canali, non funzionerà su iOS (ma puoi invece consultare navigator.standalone).
Cosa tenere a mente

Il tuo PWA non manterrà lo stato tra le sessioni, se l’utente esce da un PWA, verrà riavviato al suo ritorno, quindi se hai bisogno che l’utente convalidi un’e-mail, un SMS o esegua un’autenticazione a due fattori, inseriscilo in mente di offrire una soluzione adeguata.


Tutti i tuoi PWA inattivi appariranno come schermi bianchi, non importa quale. Ricorda che non sono in esecuzione e se torni da loro, inizieranno da zero


I PWA nella storia non hanno alcun screenshot quindi sfortunatamente sembrano tutti schermi bianchi 😒
Sono presenti bug quando l’app viene eseguita in modalità autonoma. Non fare affidamento su Safari per i test.


Il tentativo della Nasa di utilizzare l’area di notch per la PWA sta dando alcuni glitch UX
Se desideri utilizzare l’area della tacca di iPhone X per la tua app, devi apportare alcune modifiche a HTML e CSS. Se non lo fai nel modo giusto, potrebbero accadere cose strane
A volte, aggiungi alla schermata principale e manifest non viene utilizzato, quindi viene installato solo un collegamento ☹️.


Google Maps con marchio Starbucks? No, è solo iOS dopo aver utilizzato PWA aperti di seguito; rende queste cose strane in cui la cronologia, un’app carica l’URL sbagliato
Safari e il collegamento alla schermata principale condividono la stessa registrazione di Service Worker (ma non l’istanza) e i file memorizzati nella cache. Safari View Controller (come il browser in-app all’interno di Twitter) supporta gli operatori del servizio e la cache, ma sembra che stia eliminando tutti i dati dopo la chiusura della sessione.
Ogni pseudo-browser come Chrome o Firefox e ogni app che utilizza WebView, come il browser In-App di Facebook, non supporta i Service Worker (funzionava durante i beta), quindi non verranno installati file. La mia ipotesi è che potrebbe essere necessaria un’API per WKWebView per consentire al proprietario dell’app di decidere cosa fare con gli operatori del servizio, ma … chi lo sa.


Utilizzando Safari TP è possibile eseguire il debug del client e dell’assistente tecnico (indovinare quale sia quale) sia su Safari che su “Web” (PWA nella schermata principale). Inoltre, la connessione tramite rete è utile!
Per eseguire il debug di Service Worker su iOS devi installare Safari Technology Preview o Safari 11.1 disponibile con gli aggiornamenti macOS 10.11.5, 10.12.6 e 10.13.4.

L’ispettore del Service Service è ancora sperimentale; ad esempio, non è disponibile il supporto per visualizzare i contenuti dell’archivio cache


I lavoratori dell’assistenza possono essere disabilitati da Impostazioni in Tecnologie sperimentali (è abilitato per impostazione predefinita)

Cos’è l’app vuota?


A volte, quando si aprono molti PWA contemporaneamente, la barra delle applicazioni di iOS diventa pazza, mostrando app “fantasmi” senza icona o titolo nella cronologia
Hai trovato qualche bug nel tuo PWA su iOS? Mandami una riga nei commenti e la posterò qui o compilerò una segnalazione di bug al team WebKit. Seguimi su Twitter su @firt se desideri ricevere aggiornamenti sull’articolo. Se sei interessato a un seminario pratico, controlla il mio programma di formazione; creeremo un PWA che copre ciò che la maggior parte delle persone manca su di loro su ogni piattaforma, incluso come sopravvivere a iOS 😀


Per ulteriori informazioni visita il sito: immagi.net

Condividi questo articolo: