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 identificarla in modo univoco. Tuttavia, fino a poco tempo fa, la specifica del manifest dell'app web non definiva esplicitamente un modo per identificare in modo univoco una PWA, lasciando la decisione ai browser e portando a implementazioni diverse. In alcuni browser viene utilizzato start_url mentre in altri viene utilizzato il percorso del file manifest, il che rende impossibile aggiornare uno di questi campi.

Per risolvere il problema, è disponibile una nuova proprietà facoltativa id nella specifica del file manifest dell'app web, che ti consente di definire esplicitamente l'identificatore utilizzato per la PWA. L'aggiunta della proprietà id al manifest rimuove la dipendenza dal start_url o dalla posizione del manifest e consente un aggiornamento futuro.

A cosa serve la proprietà id?

La proprietà id rappresenta l'identità della PWA per il browser. Quando il browser rileva un manifest che non ha un'identità corrispondente a una PWA già installata, la tratterà come una nuova PWA, anche se viene pubblicata dallo stesso URL di un'altra PWA. Tuttavia, se rileva un manifest con un'identità corrispondente alla PWA già installata, la considererà come tale.

Supporto browser

Il supporto della proprietà id è stato implementato in Chrome 96.

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

Non devi fare nulla e non si verificheranno problemi se non aggiungi un id al manifest dell'app web (purché start_url e il percorso del manifest rimangano invariati). Per garantire la compatibilità futura della tua PWA, puoi aggiungere una proprietà id al 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 è quello di controllare il valore calcolato da Chrome.

  1. Se utilizzi Chrome 96 o versioni successive, apri il riquadro Manifest del riquadro Applicazione in DevTools.
  2. Quando id non è specificato nel file manifest dell'app web, viene visualizzata una nota sotto la proprietà ID app calcolato.
  3. Copia il valore id mostrato nella nota (vedi lo screenshot di seguito).
  4. Aggiungi una proprietà id al manifest dell'app web utilizzando il valore id mostrato nella nota.

ID app calcolato nel riquadro App di DevTools.

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

Che cosa succede se non imposti un id?

Non preoccuparti, non succederà nulla. A partire da Chrome 96, il browser genererà un valore id se non ne esiste uno nel file manifest basato su start_url nel file manifest dell'app web.

L'aggiunta di un id al manifest dell'app web consente di cambiare il start_url e il percorso del manifest (se e solo se la relativa origine rimane invariata), perché il browser identificherà la PWA in base al id specificato, anziché al start_url o al percorso del manifest.

Come faccio a testarlo?

Per testare il comportamento, segui questi passaggi:

  1. Installa la PWA.
  2. Apri about://web-app-internals/ e controlla le proprietà manifest_id e 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 sopra.
  4. Riavviare il browser utilizzando chrome://restart, avviare la PWA da about://apps e poi chiuderla per forzare l'aggiornamento del file manifest.
  5. Apri about://web-app-internals/ e controlla la proprietà manifest_id per verificare che la PWA installata non sia cambiata.
  6. Modifica start_url nel file manifest dell'app web.
  7. Riavviare il browser utilizzando chrome://restart, avviare la PWA da about://apps e poi chiuderla per forzare l'aggiornamento del file manifest.
  8. Apri about://web-app-internals/ e controlla la proprietà start_url per verificare che la PWA installata sia stata aggiornata come previsto.

Risorse aggiuntive