PWA potenti

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 consentire nuovi e potenti standard web, preservando al contempo ciò che rende il web unico: la sicurezza incentrata sull'utente, la semplicità e la compatibilità cross-platform.

Colmare il divario di app

La maggior parte di queste funzionalità sono progettate per colmare il divario tra le app mobile o desktop tradizionali e le app web. Le prime funzionalità principali a essere state rilasciate consentono alle app web di accedere ai selettori di contatti e alle funzionalità di condivisione della piattaforma, mentre le PWA installate possono registrarsi come destinazione di condivisione della piattaforma e mostrare badge delle icone, per citarne alcune.

Ogni funzionalità viene sottoposta a un ampio processo di standardizzazione per raccogliere il feedback della community e contribuire a definire l'API, garantendo che il design finale sia sicuro, privato e affidabile. Le nuove funzionalità vengono monitorate in un tracker aperto e possono essere suddivise in una delle cinque categorie:

SPEDITO

Disponibile per l'utilizzo nell'ultima versione stabile di Chrome. Può essere utilizzato in modo affidabile a condizione che il suo utilizzo venga rilevato correttamente.

IN ORIGIN TRIAL

Disponibile come prova dell'origine (OT) di Chrome, che consente al team di Chrome di convalidare le funzionalità e le API sperimentali nell'utilizzo reale e di fornire feedback sull'usabilità ed efficacia delle API. Le prove sul campo sono facoltative e ti consentono di testare questa funzionalità in versione beta con i tuoi utenti senza che questi debbano attivare flag speciali nel browser. Le API potrebbero cambiare dopo un OT e gli OT non sono garantiti per un periodo di tempo prima del lancio, quindi non devono essere trattati come un meccanismo di lancio anticipato per le nuove API.

IN DEVELOPER TRIAL

Disponibile dietro un flag in Chrome. Queste API sono sperimentali e ancora in fase di sviluppo attivo. Non sono pronte per l'uso in produzione, con buone probabilità che ci siano bug e che le API cambieranno. Gli sviluppatori possono utilizzare questo periodo di tempo per provare le funzionalità sperimentali in autonomia, ma non devono chiedere ai propri utenti di attivare i flag per utilizzare le loro funzionalità.

AVVIATO

Lo sviluppo è iniziato, ma al momento non esiste un'API utilizzabile.

IN VALUTAZIONE

API per cui gli utenti hanno manifestato interesse, ma la cui implementazione non è ancora iniziata. Se un'API non è ancora stata avviata, aggiungila ai preferiti o aggiungi i tuoi casi d'uso al relativo problema per aiutare il team di Chromium a dare la priorità.

Migliorare la PWA

Quando crei la tua PWA, valuta la possibilità di implementare le seguenti API e best practice per migliorare notevolmente l'aspetto della tua app web. Suddivisa per caso d'uso generale, la tua app potrebbe trarre vantaggio da una o più API per migliorare l'esperienza utente complessiva. Le API contrassegnate con 🔮 sono in fase di prova dell'origine, quelle contrassegnate con 🚩 sono in fase di prova per gli sviluppatori, quelle contrassegnate con 📱 sono attualmente stabili su mobile e le loro implementazioni desktop sono iniziate, mentre tutte le altre API menzionate sono stabili (anche se potrebbero non essere disponibili su tutte le piattaforme). Sono incluse solo le API disponibili nelle versioni stabile, beta (contrassegnata con β) o canary (contrassegnata con α) attuali di Chrome. L'elenco viene aggiornato regolarmente per riflettere le API rilasciate.

Installazione di app

Se vuoi che la tua app web sia disponibile insieme ad altre app installate, ad esempio nella barra delle app, nel launcher, sul desktop e nel selettore app, valuta la possibilità di implementare le seguenti API in modo che la tua PWA sia installabile. Facoltativamente, dopo aver seguito questo codelab.

  • Manifest dell'app web: fornisce informazioni sull'app web al browser e al sistema operativo, ad esempio nome, logo, URL da cui avviare l'app e come visualizzarla.
  • Service worker e API Cache Storage: consentono all'app web di creare un server proxy e controllare la gestione della cache del browser. Un service worker che reagisce all'evento fetch di un browser e può rispondere a una richiesta di recupero dell'URL di avvio specificato nel file manifest dell'app web con contenuti quando è offline è un requisito per l'installazione.
  • Esegui all'accesso 🚩β: consente di configurare la PWA in modo che venga avviata automaticamente quando l'utente esegue l'accesso.
  • Scorciatoie dell'icona dell'app: fornisci scorciatoie a URL specifici con la tua app web (ad esempio, avvia una chat, carica una foto e così via) dal menu contestuale dell'icona dell'app installata (ad es. tieni premuto sui dispositivi mobili, fai clic con il tasto destro del mouse sui computer) sulle piattaforme supportate.
  • getInstalledRelatedApps: consente all'app web di verificare se la PWA, l'app per Android o l'app per Windows (UWP) è già stata installata.

Adattivo e accessibile

Se vuoi che la tua app web sia utilizzabile da utenti con dispositivi diversi e con esigenze fisiche e/o mentali diverse, ti consigliamo di implementare quanto segue:

  • Design adattabile: assicurati che la tua app web offra un'esperienza utilizzabile, o almeno non interrotta, per schermi di dimensioni piccole e grandi, in modo che gli utenti di diversi dispositivi e posizionamenti delle finestre possano utilizzare la tua app.
  • Linee guida WCAG 2.0: assicurati che la tua app web sia utilizzabile da persone con una gamma di capacità fisiche e mentali, non solo da persone neurotipiche e normodotate. Consulta anche la pagina Cosa fare e cosa non fare per progettare in funzione dell'accessibilità del governo del Regno Unito.

Monetizzazione e distribuzione

  • Web Payments: interfaccia flessibile e standard per i pagamenti online, progettata per funzionare su qualsiasi browser o dispositivo e con qualsiasi fornitore di servizi di pagamento.
  • API Digital Goods 🔮: interfaccia standard e flessibile per eseguire query e gestire gli acquisti in-app da applicazioni web, con supporto per i tipi di acquisto comuni, come acquisti una tantum, acquisti ripetibili (come gemme/valuta di gioco) e abbonamenti. Funziona in combinazione con i pagamenti web.
  • Attività web attendibile: crea un'app Android per la tua PWA in modo che possa essere elencata per il download negli store compatibili, ad esempio Google Play.

Accesso agli appunti

  • Appunti asincroni: legge e scrive testo e immagini negli appunti dell'utente e ascolta gli eventi di copia e incolla dell'utente.

Notifiche

Se la tua app web deve inviare notifiche agli utenti, ad esempio un'app di chat o la codifica in background in corso, ti consigliamo di implementare le seguenti API:

  • Notifiche push web: una volta che un utente ha eseguito l'opt-in, consente alla tua app web di inviargli notifiche push.
  • API Badging: consente all'app web installata di impostare un badge a livello di applicazione sull'icona dell'app, facoltativamente con un numero.
  • Condizioni di attivazione delle notifiche 🔮: invia notifiche agli utenti quando viene soddisfatta una condizione di attivazione, ad esempio in base all'ora o alla posizione (pensa alle notifiche degli eventi di calendario)

Condivisione degli intent e gestione dei protocolli

  • Registrazione del protocollo URL 🚩α: consente alle applicazioni web di registrarsi come gestori di protocolli/schemi URL personalizzati utilizzando il manifest di installazione.
  • Web Share: utilizza l'interfaccia utente di condivisione di sistema integrata sui dispositivi supportati per condividere URL, testo e file con altre app installate sul dispositivo. L'app non deve essere installata.
  • Web Share Target: rendi disponibile la tua PWA installata nell'interfaccia utente di condivisione di sistema integrata sui dispositivi supportati per consentire agli utenti di condividere testo e file nella tua app da altre app.

Aprire e salvare file

  • API File Handling 🚩: fai registrare la tua app web installata con il sistema operativo per indicare la sua capacità di gestire (leggere/riprodurre in streaming/modificare) file con determinati tipi MIME e/o estensioni di file, consentendo, ad esempio, di inserirla in un elenco "Apri con…" di un menu contestuale.
  • API File System Access: accesso affidabile al file system dell'utente per sessione, che consente le seguenti interazioni (in base alle esigenze della tua app)
    • Read files from the local file system (Leggi file dal file system locale): mostra un selettore di file e consente a un utente di scegliere uno o più file da aprire, limitando facoltativamente i tipi di file consentiti per tipo MIME ed estensione.
    • Salva le modifiche al file aperto: salva le modifiche a un file aperto con FSA direttamente, senza chiedere all'utente di scegliere dove salvare il file o di scaricarne una copia.
    • Crea un nuovo file sul file system locale: consente a un utente di creare un nuovo file, facoltativamente con l'estensione predefinita, sul file system locale, a cui la tua app ha accesso per il salvataggio.
    • File aperti di recente: i gestori di file creati con FSA possono essere archiviati in IndexedDB, consentendoti di mostrare un elenco di file utilizzati di recente tra le sessioni utente (anche se le autorizzazioni di modifica non vengono mantenute tra le sessioni)
    • Leggere, scrivere e manipolare una directory: consente a un utente di scegliere una directory nel file system locale di cui la tua app può leggere i contenuti, creare, leggere ed eliminare file e sottodirectory e determinare il percorso relativo dei file.
  • Flussi di compressione: comprime o decomprime utilizzando gli algoritmi di compressione gzip e deflate.

Gestione delle finestre

Integrazione più profonda del sistema operativo

  • API Local Fonts 🔮: consente alla tua app web di elencare i caratteri installati localmente e richiedere l'accesso al contenitore SFNT di basso livello (orientato ai byte) che include i dati completi dei caratteri, consentendo alla tua app di eseguire il rendering personalizzato dei caratteri installati localmente.
  • Wake Lock: consente alla tua app web di impedire lo spegnimento dello schermo, in modo che possa eseguire attività di lunga durata senza interruzioni (ad es.transcodifica di file o visualizzazione di una ricetta durante la preparazione).
  • Rilevamento inattività 🔮: consente alla tua app web di rilevare quando l'utente non utilizza attivamente il proprio dispositivo.

Supporto offline esteso

Se vuoi che la tua app web funzioni ancora meglio offline, ti consigliamo di implementare le seguenti API:

  • Sincronizzazione in background: quando sei offline, metti in coda le richieste che necessitano di una connessione e sincronizza i dati della tua app web in background, quando la rete è disponibile, anziché non elaborare le richieste offline. Ad esempio, consentire l'invio di messaggi o la sincronizzazione delle modifiche incrementali a un documento quando si torna online.
  • Sincronizzazione periodica in background: consente al service worker dell'app web installata e utilizzata di frequente di essere riattivato periodicamente, in base a un periodo di tempo minimo trascorso, e di essere eseguito, ad esempio per aggiornare una cache, consentendo di mantenere aggiornato il contenuto quando un utente apre l'app.
  • API Content Indexing: consente alla tua app web di comunicare al browser quali contenuti sono disponibili offline per consentire al browser di mostrarli agli utenti.
  • Recupero in background: consente recuperi in background di lunga durata, ad esempio il download di film o il caricamento di video e immagini, senza rischiare l'interruzione del service worker.

Streaming, codifica e decodifica di contenuti multimediali

Se la tua app web riproduce file multimediali, come file video o audio, ti consigliamo di implementare le seguenti API:

  • Streaming adattivo: consente agli stream video di passare da una velocità in bit all'altra in base alle prestazioni della rete
  • Picture in picture: consente a un utente di estrarre il video dalla tua app web in una finestra sempre in primo piano, che può essere spostata e ridimensionata in modo indipendente.
  • API Media Session: consente a un utente di controllare la riproduzione dei contenuti multimediali per la tua app web utilizzando funzionalità software a livello di hardware e sistema operativo (come i pulsanti di riproduzione/pausa/interruzione nelle tastiere o nelle schermate di blocco), nonché di controllare le notifiche multimediali a livello di sistema operativo (come titolo, artista, album e copertina)
  • API Chromecast: consentono a un utente di trasmettere contenuti multimediali a un ricevitore Chromecast disponibile, ad esempio per riprodurre un video dalla tua app web sulla TV.
  • Web Codecs 🔮: accesso a codificatori e decodificatori multimediali hardware e software integrati, utili sia per casi d'uso in tempo reale come lo streaming live a bassa latenza e la codifica, la decodifica e la transcodifica dei file.

Supporto esteso per l'input

Supporto avanzato delle periferiche

  • Web USB: consente all'app web di accedere a dispositivi USB non standard (ad es. tastiere e mouse) dalla tua app
  • API Serial 🔮: aggiunge un'API per comunicare con i dispositivi hardware tramite una porta seriale fisica o virtuale.

Elenco di controllo delle PWA

Pronto a migliorare la tua PWA con queste nuove potenti API? Scegli uno dei casi d'uso riportati di seguito per visualizzare un insieme consigliato di API da utilizzare oppure crea la tua lista di controllo e cerca di completarla.