PWACompat - het webapp-manifest voor alle browsers

U hebt een webapp ontworpen, de code en de servicemedewerker geschreven en ten slotte het Web App Manifest toegevoegd om te beschrijven hoe deze zich moet gedragen wanneer deze op het apparaat van een gebruiker wordt 'geïnstalleerd'. Dit omvat zaken als pictogrammen met een hoge resolutie die u kunt gebruiken voor bijvoorbeeld het opstartprogramma of de app-switcher van een mobiele telefoon, of hoe uw webapp moet starten wanneer deze wordt geopend vanaf het startscherm van de gebruiker.

En hoewel veel browsers het Web App Manifest zullen respecteren, zal niet elke browser elke waarde die u opgeeft laden of respecteren. Voer PWACompat in, een bibliotheek die uw Web App Manifest gebruikt en automatisch relevante meta of link invoegt voor pictogrammen van verschillende groottes, de favicon, opstartmodus, kleuren enz.

PWACompat neemt een Web App Manifest en voegt standaard en niet-standaard meta-, link-, etc.-tags toe.
PWACompat neemt een Web App Manifest en voegt standaard en niet-standaard meta-, link-, etc.-tags toe.

Dit betekent dat u niet langer talloze standaard- en niet-standaard tags (zoals <link rel="icon" ... /> of <meta name="orientation" ... /> ) aan uw pagina's hoeft toe te voegen. En voor iOS-startschermtoepassingen maakt PWACompat zelfs dynamisch opstartschermen, zodat u er niet voor elke schermgrootte één hoeft te genereren.

iOS-opstartscherm voor Emojityper, gegenereerd door PWACompat

PWACompat gebruiken

Om PWACompat te gebruiken, zorg ervoor dat u op al uw pagina's naar uw Web App Manifest linkt:

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

En neem dan dit script op, of voeg het toe aan een asynchroon geladen bundel:

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

PWACompat haalt uw manifestbestand op en doet het werk dat nodig is voor de browser van uw gebruiker, ongeacht of deze zich op een mobiel apparaat of desktop bevindt.

We raden nog steeds aan om ten minste één snelkoppelingspictogram van hoge kwaliteit toe te voegen voor zoekindexering:

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

Zie de best practices voor meer informatie.

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

In de diepte

Wat doet PWACompat eigenlijk voor ondersteunde browsers? PWACompat laadt uw Web App Manifest en:

  • Maak metapictogramtags voor alle pictogrammen in het manifest (bijvoorbeeld voor een favicon, oudere browsers)
  • Maak reserve-metatags voor verschillende browsers (bijvoorbeeld iOS, WebKit/Chromium-vorken, enz.) die beschrijven hoe een web-app moet worden geopend
  • Stelt de themakleur in op basis van het manifest

Voor Safari, PWACompat ook:

  • Stelt apple-mobile-web-app-capable (openen zonder browser chrome) voor weergavemodi standalone , fullscreen of minimal-ui
  • Creëert apple-touch-icon en voegt de manifeste achtergrond toe aan transparante pictogrammen: anders geeft iOS transparantie als zwart weer
  • Creëert dynamische splash-afbeeldingen, die nauw aansluiten bij de splash-afbeeldingen die zijn gegenereerd voor Chromium-gebaseerde browsers

Als je meer wilt bijdragen of wilt helpen met extra browserondersteuning, staat PWACompat op GitHub .

Probeer het eens

PWACompat is live op Airhorner , v8.dev en Emojityper . De header-HTML van uw site kan eenvoudig zijn: specificeer gewoon het manifest en laat PWACompat de rest afhandelen.

📢🤣🎉