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

Pete LePage

Quando l'utente installa la PWA, il browser ha bisogno di un modo per identificarla in modo univoco. Tuttavia, fino a poco tempo fa, le specifiche del manifest dell'app web non definisce esplicitamente un modo per identificare in modo univoco una PWA, lasciando ai browser la decisione e portando a implementazioni diverse. In alcuni browser viene utilizzato start_url, mentre in altri viene utilizzato il percorso del file manifest, che non consente di aggiornare entrambi i campi.

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

Che cosa fa la proprietà id?

La proprietà id rappresenta l'identità della PWA sul browser. Quando il browser vede un manifest che non ha un'identità corrispondente a una PWA già installata, la considera come una nuova PWA, anche se viene pubblicata dallo stesso URL di un'altra PWA. Se, invece, vede un manifest con un'identità che corrisponde alla PWA già installata, lo considera come la PWA installata.

Supporto del browser

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

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

Non è richiesta alcuna azione da parte tua e se non aggiungi id al file manifest dell'app web (a condizione che start_url e il percorso del manifest rimangano invariati). Per rendere la tua PWA a prova di futuro, 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 è controllare il valore calcolato da Chrome.

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

Descrizione comando che mostra il valore "id".

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

Cosa succede se non imposto un id?

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

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

Come faccio a testarlo?

Per verificare il comportamento:

  1. Installa la PWA.
  2. Apri about://web-app-internals/ e controlla le proprietà unhashed_app_id e start_url della 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 della PWA installata per verificare che non sia cambiata.
  6. Modifica il 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 della PWA installata per verificare che sia stata aggiornata come previsto.

Altre risorse