Identificare in modo univoco le PWA con la proprietà ID manifest dell'app web

Pete LePage

Quando l'utente installa la tua PWA, il browser ha bisogno di un modo per identificare in modo univoco la PWA. Ma, fino a poco tempo fa, la specifica del file manifest delle app web non costituiva definire un modo per identificare in modo univoco una PWA, lasciando che siano i browser a decidere e che porta a implementazioni diverse. In alcuni browser, il start_url mentre in altri viene usato il percorso del file manifest, impossibile aggiornare uno di questi campi.

Per risolvere il problema, nell'app web è disponibile una nuova proprietà facoltativa id specifica del manifest, che ti consente di definire in modo esplicito l'identificatore utilizzato della tua PWA. L'aggiunta della proprietà id al manifest rimuove la dipendenza da start_url o la posizione del manifest, e consente per aggiornarli in futuro.

Che cosa fa la proprietà id?

La proprietà id rappresenta l'identità della PWA per il browser. Quando il browser vede un manifest senza un'identità corrispondente una PWA già installata, la tratterà come una nuova PWA, anche se viene pubblicata dallo stesso URL di un'altra PWA. Ma se vede un manifest con un'identità che corrisponde alla PWA già installata, la tratterà come la PWA installata.

Supporto browser

Il supporto per la proprietà id è stato fornito in Chrome 96.

Che cosa devo fare se ho un'app senza id?

Non devi fare altro che non devi fare nulla e nulla si romperà non aggiungere id al file manifest dell'app web (purché start_url e il percorso manifest rimane lo stesso). Per rendere la tua PWA a prova di futuro, puoi aggiungere una proprietà id al file manifest dell'app web.

Come faccio a determinare e impostare il mio id?

Il modo più sicuro e preciso per determinare il id per una PWA è controllare il valore calcolato da Chrome.

  1. Con Chrome 96 o versioni successive, apri l'app Riquadro manifest del riquadro Applicazione in DevTools.
  2. Passa il mouse sopra l'icona (!) accanto alla proprietà ID app. La L'icona della descrizione comando (!) viene visualizzata solo quando id non è specificato in il file manifest dell'app web.
  3. Prendi nota del valore id mostrato nella descrizione comando (vedi screenshot di seguito).
  4. Aggiungi una proprietà id al file manifest dell'app web utilizzando il valore id mostrato in la descrizione comando.

Descrizione comando che mostra "id" valore.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Cosa succede se non imposto un id?

Non preoccuparti, non romperà nulla. A partire da Chrome 96, browser genererà un id se non ne esiste uno nel file manifest in base a start_url nel file manifest dell'app web.

L'aggiunta di un id al file manifest dell'app web rende possibile di modificare start_url e il percorso manifest (se e solo se il loro origin rimane invariato!), perché il browser identificare la PWA in base al valore id specificato, anziché al valore start_url o del file manifest.

Come faccio a verificarlo?

Per verificare il comportamento, segui questi passaggi:

  1. Installa la PWA.
  2. Apri about://web-app-internals/ e controlla unhashed_app_id e Proprietà start_url per la PWA installata.
  3. Aggiungi una proprietà id al file manifest dell'app web seguendo i passaggi descritti in Come faccio a determinare e impostare il mio id qui sopra?
  4. Riavvia il browser utilizzando chrome://restart, avvia la PWA da about://apps, quindi chiudi la PWA per forzare l'aggiornamento del file manifest.
  5. Apri about://web-app-internals/ e controlla la proprietà manifest_id per la PWA installata per verificare che non sia cambiata.
  6. Modifica start_url nel file manifest dell'app web.
  7. Riavvia il browser utilizzando chrome://restart, avvia la PWA da about://apps, quindi chiudi la PWA per forzare l'aggiornamento del file manifest.
  8. Apri about://web-app-internals/ e controlla la proprietà start_url per la PWA installata per verificare che sia stata aggiornata come previsto.

Risorse aggiuntive