PWACompat – plik manifestu aplikacji internetowej dla wszystkich przeglądarek

Masz już projektowaną aplikację internetową, napisano jej kod i skrypt service worker, a na koniec dodano do pliku plik manifestu aplikacji internetowej, w którym opisano, jak powinna działać po zainstalowaniu na urządzeniu użytkownika. Obejmuje to ikony w wysokiej rozdzielczości, których można używać w Menu z aplikacjami na telefonie komórkowym lub przełącznika aplikacji, albo sposób uruchamiania aplikacji internetowej po otwarciu z poziomu ekranu głównego użytkownika.

Wiele przeglądarek respektuje plik manifestu aplikacji internetowej, ale nie każda z nich wczytuje lub respektuje każdą określoną przez Ciebie wartość. Wpisz PWACompat – bibliotekę, która pobiera plik manifestu aplikacji internetowej i automatycznie wstawia odpowiednie tagi meta lub link dla ikon o różnym rozmiarze, favikonie, trybie uruchamiania, kolorach itd.

PWACompat korzysta z pliku manifestu aplikacji internetowej i dodaje standardowe i niestandardowe tagi meta, link itp.
PWACompat wykorzystuje plik manifestu aplikacji internetowej i dodaje standardowe i niestandardowe tagi meta, link itp.

Oznacza to, że nie musisz już dodawać do stron niezliczonych, standardowych i niestandardowych tagów (takich jak <link rel="icon" ... /> lub <meta name="orientation" ... />). Natomiast w przypadku aplikacji na ekran główny na iOS PWACompat tworzy nawet dynamicznie ekrany powitalne, dzięki czemu nie trzeba ich generować dla każdego rozmiaru ekranu.

Ekran powitalny iOS dla programu Emotikon, wygenerowany przez PWACompat

Korzystanie z PWACompat

Aby użyć narzędzia PWACompat, na wszystkich stronach umieść link do pliku manifestu aplikacji internetowej:

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

Następnie dołącz ten skrypt lub dodaj go do pakietu wczytywanego asynchronicznie:

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

PWACompat pobierze plik manifestu i wykona czynności wymagane przez przeglądarkę użytkownika niezależnie od tego, czy korzysta on z urządzenia mobilnego czy komputera.

Nadal zalecamy dodanie co najmniej jednej wysokiej jakości ikony skrótu na potrzeby indeksowania wyszukiwania:

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

Aby dowiedzieć się więcej, zapoznaj się ze sprawdzonymi metodami.

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

Analizy

Jak działa PWACompat w obsługiwanych przeglądarkach? PWACompat wczyta plik manifestu aplikacji internetowej i:

  • Utwórz metatagi dla wszystkich ikon w pliku manifestu (np.dla favikony w starszych przeglądarkach).
  • Tworzenie zastępczych metatagów dla różnych przeglądarek (np. iOS, WebKit/Chromium itp.) opisujących sposób otwierania aplikacji internetowej
  • Ustawia kolor motywu na podstawie pliku manifestu.

W przypadku Safari PWACompat również:

  • Konfiguruje apple-mobile-web-app-capable (otwieranie bez przeglądarki Chrome) dla trybów wyświetlania standalone, fullscreen lub minimal-ui
  • Tworzy obrazy apple-touch-icon i dodaje tło pliku manifestu do przezroczystych ikon: W przeciwnym razie iOS renderuje przezroczystość w kolorze czarnym.
  • Tworzy dynamiczne obrazy powitalne, ściśle dopasowane do obrazów powitalnych wygenerowanych dla przeglądarek opartych na Chromium

Jeśli chcesz przekazać nam więcej informacji lub uzyskać pomoc dotyczącą dodatkowych funkcji w przeglądarkach, skorzystaj z usługi PWACompat na GitHubie.

Wypróbuj

PWACompat jest już dostępny na platformach Airhorner, v8.dev i Emojityper. Kod HTML nagłówka Twojej witryny może być prosty: wystarczy określić plik manifestu, a PWACompat zajmie się całą resztą.

📢🤣🎉