PWACompat, il manifest delle app web per tutti i browser

Hai progettato un'app web, scritto il relativo codice e il service worker e infine hai aggiunto il File manifest dell'app web per descrivere come dovrebbe comportarsi quando 'installato' sul dispositivo di un utente. Sono inclusi, ad esempio, icone ad alta risoluzione da utilizzare, ad esempio un sull'Avvio app o sul selettore di app del cellulare oppure su come deve essere avviata l'app web quando viene aperta dal schermata Home dell'utente.

E sebbene molti browser rispetteranno il file manifest dell'app web, non tutti i browser verranno caricati o rispettati ogni valore specificato. Inserisci PWACompat, un raccolta che recupera il file manifest dell'app web e inserisce automaticamente i tag meta o link pertinenti per icone di dimensioni diverse, favicon, modalità di avvio, colori e così via.

PWACompat prende un manifest dell'app web e aggiunge meta, link e altri tag standard e non standard.
PWACompat utilizza un file manifest dell'app web e aggiunge meta, link e altri tag standard e non standard.

Ciò significa che non dovrai più aggiungere innumerevoli tag standard e non standard (come <link rel="icon" ... /> o <meta name="orientation" ... />) alle tue pagine. Inoltre, per le applicazioni della schermata iniziale di iOS, PWACompat crea anche schermate di benvenuto in modo dinamico, quindi non devi generarne una per ogni dimensione dello schermo.

Schermata iniziale iOS per Emojityper, generata da PWACompat

Utilizzo di PWACompat

Per utilizzare PWACompat, assicurati di collegarti alla tua app web Manifest in tutte le pagine:

<link rel="manifest" href="manifest.webmanifest" />

e includi questo script o aggiungilo a una bundle caricato in modo asincrono:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat recupererà il file manifest ed eseguirà le operazioni necessarie per il browser dell'utente, indipendentemente dal fatto che si trovi su un dispositivo mobile o un computer.

Ti consigliamo comunque di aggiungere almeno un'icona di scorciatoia di alta qualità per l'indicizzazione della ricerca:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

Per saperne di più, consulta le best practice.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

Approfondimento

Per i browser supportati, cosa fa esattamente PWACompat? PWACompat caricherà il file manifest dell'app web e:

  • Crea meta tag icona per tutte le icone nel file manifest (ad es. per una favicon, browser meno recenti)
  • Crea meta tag di fallback per vari browser (ad es. iOS, WebKit/fork di Chromium e così via) con le descrizioni come dovrebbe aprirsi un'app web
  • Imposta il colore del tema in base al file manifest

Per Safari, anche PWACompat:

  • Imposta apple-mobile-web-app-capable (apertura senza browser Chrome) per modalità di visualizzazione standalone, fullscreen o minimal-ui
  • Crea apple-touch-icon immagini, aggiungendo lo sfondo del file manifest a icone trasparenti: altrimenti iOS mostra la trasparenza come
  • Crea immagini di splash dinamiche, molto simili a quelle generate per i browser basati su Chromium

Se vuoi dare il tuo contributo o ricevere ulteriore assistenza per i browser, PWACompat è su GitHub.

Prova

PWACompat è disponibile su Airhorner, v8.dev e Emojityper. L'intestazione HTML dei tuoi siti può essere semplice: specifica il manifest e lascia che sia PWACompat a gestire il resto.

📢🤣🎉