Le app web progressive (PWA) per computer sono un ottimo modo multipiattaforma e cross-browser per creare app con un modello di sicurezza incentrato sulla sicurezza e sulla privacy degli utenti e ottenere la condivisione integrata con la collegabilità intrinseca del web. Crea una nuova app web o migliora quella esistente con API moderne per conferirle funzionalità, affidabilità e installabilità simili a quelle di un'app per computer. Le PWA sono il modo migliore per distribuire la tua app web per ChromeOS.
Su ChromeOS, la potenza della piattaforma web è in primo piano: le app web sono una funzionalità principale della piattaforma. Le PWA installate vengono visualizzate nel launcher di ChromeOS, possono essere bloccate nella barra e si integrano perfettamente con il resto del sistema operativo.
Per iniziare, esamina l'elenco di controllo PWA e assicurati che la tua app web superi l'elenco di controllo PWA principale. Puoi utilizzare PWABuilder per fornire una pagina offline personalizzata e rendere installabile la tua app. Quindi, utilizza questi consigli per far brillare la tua PWA su ChromeOS.
Rendi l'app installabile
Uno dei grandi vantaggi delle PWA rispetto alle normali app web è la possibilità di installarle, proprio come le tradizionali app per computer. Il percorso dell'app web progressiva su web.dev ha una sezione dedicata a rendere installabile la tua PWA; usala per iniziare. Affinché una PWA venga identificata come installabile su ChromeOS, devono essere soddisfatti i seguenti criteri, che possono essere verificati utilizzando il controllo installabile di Lighthouse:
- Deve avere un manifest dell'app web valido.
-
Deve soddisfare i criteri di installazione di Chrome
- Per le PWA su ChromeOS, nella barra degli indirizzi viene visualizzato un prompt di installazione senza che venga soddisfatta una soglia euristica di coinvolgimento degli utenti.
Le icone sono una parte importante dell'identità della tua PWA, quindi assicurati che siano interessanti e uniche. Possono anche includere la trasparenza. Poiché le PWA hanno un unico codebase condiviso su tutte le piattaforme, devi assicurarti di avere a disposizione un'icona mascherabile. Assicurati di includere anche le icone normali per i sistemi operativi che non supportano le icone adattabili.
Una volta installata, la tua PWA verrà visualizzata su ChromeOS, dal launcher allo scaffale. L'installazione della PWA offre anche alcune funzionalità aggiuntive per rendere la tua app davvero speciale.
Una nota sulla modalità offline
Rendere installabile la tua app offre molti vantaggi in termini di rilevabilità, usabilità e funzionalità. Rendere installabile la tua PWA non significa che l'intera esperienza deve funzionare offline. Affinché un'app web installata sembri un'app tradizionale, deve avere una qualche forma di funzionalità offline. Per iniziare è sufficiente una pagina offline personalizzata di base. Gli utenti si aspettano che le app installate non vadano in crash quando lo stato della connessione cambia. Proprio come un'app tradizionale non mostra mai una pagina vuota quando è offline, le PWA non dovrebbero mai mostrare la pagina offline predefinita del browser. Le pagine offline personalizzate possono variare da un messaggio che informa l'utente che ha bisogno di una connessione a un gioco per passare il tempo fino a quando non si connette di nuovo. Fornire questa esperienza offline personalizzata per le pagine o le funzionalità non memorizzate nella cache che richiedono una connessione contribuisce a colmare il divario tra le app per l'esperienza utente.
Puoi creare una semplice pagina offline durante l'evento install di un service worker memorizzando nella cache preventiva la pagina desiderata per un utilizzo successivo e rispondendo con questa se un utente è offline. Puoi seguire il nostro esempio di pagina offline personalizzata per vedere un esempio di questa funzionalità in azione e scoprire come implementarla.
Se vuoi offrire un'esperienza più solida, oltre all'API Cache Storage, puoi utilizzare funzionalità come IndexedDB per l'archiviazione NoSQL nel browser e la sincronizzazione in background per consentire agli utenti di eseguire azioni offline e posticipare la comunicazione con il server finché non hanno di nuovo una connessione stabile. Puoi anche implementare pattern come sessioni sicure e di lunga durata per mantenere l'autenticazione degli utenti e scheletri di schermate per comunicare rapidamente agli utenti che stai caricando contenuti che possono ripristinare i contenuti memorizzati nella cache o un indicatore offline, se necessario.
Rendi l'esperienza tattile
Quasi tutti i dispositivi ChromeOS supportano il tocco e molti anche gli stili, quindi devi assicurarti che la tua app funzioni perfettamente con entrambi gli input, oltre alla normale tastiera e al mouse. L'API Pointer Events è progettata appositamente per gestire questo problema. Alcuni eventi fondamentali correlati al puntatore che probabilmente non dovrai modificare, come gli eventi click. Altri eventi, come mouseup o touchstart, devono essere migrati alle loro controparti di eventi puntatore per funzionare perfettamente con qualsiasi tipo di puntatore. Se vuoi, puoi anche gestire separatamente diversi tipi di input. Per le app e i giochi che si basano molto sull'input tattile dell'utente, il passaggio all'API Pointer Events farà una grande differenza sui dispositivi ChromeOS.
Disegno fluido sul web
Se stai creando un'app in cui gli utenti disegnano con le dita o con stilo, mantenere la latenza tra l'input e l'output sufficientemente bassa da garantire la fluidità è sempre stato difficile. Quando crei questo tipo di app basate sull'API Canvas per ChromeOS, ti consigliamo di utilizzare il suggerimento desynchronized per canvas.getContext() per fornire un rendering a bassa latenza. Per utilizzare il suggerimento desynchronized per un canvas:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Considerazioni sulla progettazione per il tocco
È importante tenere in considerazione il supporto del tocco e dello stilo quando progetti le tue app web. Le interazioni che potresti dare per scontate, come il passaggio del mouse, non funzionano bene, se non del tutto, per altri metodi di input. Ecco alcune best practice da tenere a mente quando progetti interfacce compatibili con il tocco e lo stilo:
- Non fare ipotesi di input in base alle dimensioni dello schermo. Utilizza invece il rilevamento delle funzionalità, idealmente al momento dell'input, per determinare come rispondere. Ricorda che su ChromeOS gli utenti possono passare facilmente da mouse, tocco e stilo in una sola sessione.
- Assicurati che gli elementi che un utente deve toccare abbiano una dimensione minima del target sufficientemente grande da non colpire accidentalmente gli elementi circostanti.
- Considera il passaggio del mouse come un miglioramento progressivo e assicurati che l'interazione possa essere eseguita in altri modi per il tocco e lo stilo (ad esempio, una pressione prolungata o un tocco).
- Gli utenti che utilizzano il tocco si aspettano di poter interagire direttamente con gli elementi sullo schermo, ad esempio pizzicare per ingrandire le mappe anziché utilizzare i pulsanti di zoom in/out. L'aggiunta di gesti tattili comuni, ove opportuno, può contribuire notevolmente a rendere la tua app naturale.
Rendi l'esperienza capace
Sebbene alcune funzionalità delle PWA siano note, come l'API Notifications che consente a un'app web di ricevere e pubblicare notifiche della piattaforma, sono in arrivo sul web una serie di funzionalità nuove e future per potenziare le tue app. Il progetto Web Capabilities di Chromium, noto anche come Project Fugu 🐡, è un'iniziativa volta a introdurre nuovi e potenti standard web che preservino ciò che rende il web unico: sicurezza incentrata sull'utente, basso attrito e compatibilità multipiattaforma.
Nota:queste funzionalità si trovano in vari stati di completamento, dalla fase di valutazione alla spedizione, e potrebbero essere destinate solo a computer o dispositivi mobili, non a entrambi. Sebbene gli utenti di ChromeOS abbiano maggiori probabilità di ricevere funzionalità mirate per il desktop man mano che diventano disponibili, il supporto multipiattaforma, anche il supporto stabile in ChromeOS, a volte può richiedere diversi anni.