Funzionalità

Le app web progressive possono fare molto di più che eseguire il rendering dei contenuti sullo schermo o connettersi a servizi web. Le PWA possono gestire i file del file system, interagire con gli appunti del sistema, accedere all'hardware collegato al dispositivo e molto altro. Ogni API web è disponibile per la tua PWA e alcune API aggiuntive sono disponibili quando l'app viene installata.

Puoi utilizzare What Web Can Do Today per conoscere le possibilità offerte da ciascuna piattaforma. Per singole API o funzionalità, puoi utilizzare Can I Use o le tabelle di compatibilità del browser su MDN.

Verifica sempre il supporto delle funzionalità

La prima lettera in PWA sta per progressivo e deriva dall'idea di miglioramento progressivo e di rilevamento delle funzionalità. Non dovresti aspettarti che l'app funzioni allo stesso modo su tutti i dispositivi. La diversità di contesti e abilità su miliardi di dispositivi in diversi paesi rende le PWA un'eccellente piattaforma, grazie alla loro progressività.

Ciò significa che devi sviluppare la tua app in livelli che potrebbero non essere disponibili su tutti i dispositivi e verificare la disponibilità prima dell'utilizzo.

Devi verificare con JavaScript se esiste un'API prima di utilizzarla o chiedere a un'API se un servizio è disponibile su quel particolare dispositivo.

Potente web

Il web oggi è super potente. Ad esempio:

  • Puoi creare un'app di video chat iperlocale con WebRTC, geolocalizzazione e messaggi push.
  • Puoi rendere un'app installabile.
  • Puoi aggiungere effetti video con WebAssembly.
  • Puoi persino portarlo nella realtà virtuale con WebGL e WebXR.

Potenziare la tua PWA

Dividi le API con funzionalità PWA in quattro gruppi:

  • Verde: API disponibili su ogni browser e su ogni piattaforma, quando tecnicamente possibile. La maggior parte di questi articoli sono stati spediti da molti anni, sono considerati maturi e puoi utilizzarli con sicurezza. Un'API di esempio di questo gruppo è l'API di geolocalizzazione.
  • Verde chiaro: le API sono disponibili solo su alcuni browser. Considerata la mancanza di supporto su alcune piattaforme, sono maturati all'interno del sottogruppo di browser supportati, in modo che tu possa utilizzare la funzionalità in sicurezza su di essi. Un'API di esempio di questo gruppo è WebUSB.
  • Giallo: API sperimentali. Queste API non sono ancora mature; sono disponibili solo su alcuni browser e all'interno di test o prove. Abbiamo parlato di alcune di queste funzionalità nel capitolo sperimentale.
  • Rosso: il gruppo di API che non è possibile utilizzare in una PWA e in cui si prevede di aggiungerle è ancora a lungo termine. Un'API di esempio di questo gruppo è il geofencing.

Funzionalità ecologiche

Di seguito è riportato un elenco delle funzionalità più importanti che puoi utilizzare nella PWA.

Dettagli di base

  • Memorizzazione nella cache dei file localmente utilizzando l'API Cache, come illustrato nel Capitolo Memorizzazione nella cache.
  • Esecuzione di attività in thread utilizzando web worker, come abbiamo visto nel capitolo Gestione della complessità.
  • Gestione delle richieste di rete con strategie diverse in un service worker, come descritto nel capitolo dei Service worker.
  • 2D Canvas per eseguire il rendering di elementi grafici 2D sullo schermo utilizzando l'API Canvas.
  • Canvas ad alte prestazioni 2D e 3D, o WebGL, per il rendering di elementi grafici 3D.
  • WebAssembly, o WASM, per l'esecuzione di codice compilato di basso livello per migliorare le prestazioni.
  • Comunicazione in tempo reale mediante l'API WebRTC.
  • API Web Performance (prestazioni web) per misurare e contribuire a offrire un'esperienza migliore. Per ulteriori informazioni, consulta la guida all'API Performance.
  • Archivia i dati localmente con IndexedDB e la gestione dello spazio di archiviazione per eseguire query sulla quota e richiedere l'archiviazione permanente, come illustrato nel capitolo sui dati offline.
  • Audio di basso livello grazie all'API Web Audio.
  • Rilevamento in primo piano mediante l'API Page Visibilità.
  • Comunicazione di rete mediante l'API Fetch e l'API WebSocket.

Hardware e sensori

  • Gamepad per leggere le informazioni provenienti da gamepad e joystick standard collegati al dispositivo tramite l'API Gamepad.
  • Autenticazione biometrica (ad esempio riconoscimento del volto o dell'impronta) tramite autenticazione web o WebAuthn.

Integrazione del sistema operativo

Funzionalità verde chiaro

Di seguito è riportato un elenco delle funzionalità più importanti che puoi utilizzare nella tua PWA, ma tieni presente che potrebbero non essere disponibili su tutti i browser.

Nozioni di base

  • WebGL 2.0, la nuova versione delle specifiche WebGL per la corrispondenza con OpenGL 3.0.
  • Codec, accesso di basso livello ai singoli frame di uno stream video e a blocchi di audio; è utile per le applicazioni web che richiedono un controllo completo sul modo in cui i contenuti multimediali vengono elaborati tramite l'API Web Codecs.

Hardware e sensori

  • La funzionalità Luce ambientale legge l'attuale livello di illuminazione o l'illuminamento della luce ambientale intorno al dispositivo, oltre all'API Sensors.
  • La vibrazione fornisce all'utente un feedback aptico quando succede qualcosa, se il dispositivo la supporta, tramite l'API Vibration.
  • I supporti di registrazione acquisiscono i dati generati da un oggetto MediaStream o HTMLMediaElement (ad esempio un tag <video>) a scopo di analisi, elaborazione o salvataggio su disco grazie all'API MediaRecorder.
  • L'applicazione di un wakelock allo schermo impedisce al dispositivo di oscurare o bloccare lo schermo quando la PWA deve rimanere in esecuzione utilizzando l'API Screen Wake Lock.
  • La realtà virtuale ti consente di utilizzare cuffie e altri dispositivi nella PWA, grazie all'API WebXR Device.
  • La realtà aumentata può essere ottenuta nella PWA in molti modi, ad esempio utilizzando l'API WebXR Device o l'app Safari Quick Look per i contenuti AR.
  • Rileva gli utenti inattivi con l'API IDle Detection.
  • Il blocco dell'orientamento blocca l'orientamento su verticale o orizzontale mentre la PWA è sullo schermo, grazie all'API Screen Orientation o alla proprietà orientation del manifest dell'app web per le app installate.
  • Presentare contenuti su proiettori e display secondari, grazie all'API Presentazione.
  • Blocca un puntatore per ricevere informazioni sui movimenti delta dai puntatori (mopi, trackpad e puntatori) anziché dai valori di posizione, utili per alcuni giochi, grazie all'API Pointer Lock.

Integrazione del sistema operativo

Risorse