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.
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.
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świetlaniastandalone
,fullscreen
lubminimal-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ą.
📢🤣🎉