PWACompat, il manifest delle app web per tutti i browser

Hai progettato un'app web, ne hai scritto il codice e il service worker e, infine, hai aggiunto il file manifest dell'app web per descrivere il suo comportamento quando "installato" sul dispositivo di un utente. Ciò include, ad esempio, icone ad alta risoluzione da utilizzare, ad esempio, l'Avvio app di un cellulare o il selettore di app, o il modo in cui l'app web dovrebbe avviarsi quando viene aperta dalla schermata Home dell'utente.

Anche se molti browser rispetteranno il file manifest delle app web, non tutti i browser caricheranno o rispetteranno ogni valore specificato. Inserisci PWACompat, una libreria che prende il tuo manifest delle app web e inserisce automaticamente i tag meta o link pertinenti per le icone di dimensioni diverse, la favicon, la modalità di avvio, i colori e così via.

PWACompat accetta un manifest dell'app web e aggiunge tag meta, link e così via standard e non standard.
PWACompat accetta un file manifest dell'app web e aggiunge meta tag, link e così via standard e non standard.

Questo significa che non devi più aggiungere innumerevoli tag standard e non standard (come <link rel="icon" ... /> o <meta name="orientation" ... />) alle tue pagine. Per le applicazioni nella schermata Home di iOS, PWACompat creerà persino le schermate iniziali in modo dinamico, così non dovrai generarne una per ogni dimensione dello schermo.

Schermata iniziale di Emojityper in iOS, generata da PWACompat

Utilizzo di PWACompat

Per utilizzare PWACompat, assicurati di inserire un link al file manifest dell'app web in tutte le tue pagine:

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

Quindi includi questo script o aggiungilo a un 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 tuo file manifest e svolgerà il lavoro necessario per il browser dell'utente, indipendentemente dal fatto che utilizzi un dispositivo mobile o un computer.

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

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

Per scoprire 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 effettivamente PWACompat? PWACompat caricherà il file manifest dell'app web e:

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

Per Safari, PWACompat anche:

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

Se vuoi contribuire ulteriormente o fornire ulteriore supporto per i browser, PWACompat è su GitHub.

Prova

PWACompat è disponibile su Airhorner, v8.dev ed Emojityper. L'HTML dell'intestazione del tuo sito può essere semplice: è sufficiente specificare il manifest e lasciare che PWACompat gestisca il resto.

📢🤣🎉