PWACompat – plik manifestu aplikacji internetowej dla wszystkich przeglądarek

Udało Ci się zaprojektować aplikację internetową, napisać jej kod i skrypt service worker, a na koniec dodać Plik manifestu aplikacji internetowej opisujący, jak powinien działać, gdy „zainstalowano” na urządzeniu użytkownika. Obejmuje to ikony w wysokiej rozdzielczości, np. w programu uruchamiającego lub przełącznika aplikacji na telefonie komórkowym albo sposób uruchamiania aplikacji internetowej po na ekranie głównym.

Chociaż wiele przeglądarek będzie wczytywać plik manifestu aplikacji internetowej i uwzględniać jego wartości, nie wszystkie będą to robić. Wpisz PWACompat, biblioteka, która pobiera z pliku manifestu aplikacji internetowej odpowiednie tagi meta lub link w przypadku ikon o różnych rozmiarach, favikony, trybie uruchamiania, kolorach itp.

PWACompat pobiera plik manifestu aplikacji internetowej i dodaje standardowe i niestandardowe tagi meta, link itp.
PWACompat przetwarza manifest aplikacji internetowej i dodaje standardowe i niestandardowe tagi meta, linków itp.

Oznacza to, że nie musisz już dodawać niezliczonej liczby tagów standardowych i niestandardowych (np. <link rel="icon" ... /> lub <meta name="orientation" ... />). W przypadku aplikacji na ekranie głównym iOS PWACompat będzie nawet dynamicznie tworzyć ekrany powitalne, aby nie trzeba było generować ich dla każdego rozmiaru ekranu.

Ekran powitalny na potrzeby rozszerzenia emotikonów w iOS wygenerowany przez PWACompat

Korzystanie z PWACompat

Aby używać atrybutu PWACompat, dodaj link do pliku manifestu aplikacji internetowej na wszystkich stronach:

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

Następnie umieść ten skrypt lub dodaj go do asynchronicznie wczytywanego pakietu:

<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 wykonuje czynności potrzebne przeglądarce użytkownika niezależnie od tego, czy jest to urządzenie mobilne czy komputer.

Mimo to 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 uzyskać więcej informacji, zapoznaj się ze sprawdzonymi metodami.

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

Analizy

Co właściwie robi PWACompat w obsługiwanych przeglądarkach? PWACompat wczyta manifest aplikacji internetowej:

  • Utwórz metatagi dla wszystkich ikon w pliku manifestu (np. favikony, starsze przeglądarki)
  • Tworzenie metatagów zastępczych dla różnych przeglądarek (np. iOS, WebKit/Chromium forks itp.) opisujących jak powinna otwierać się aplikacja internetowa
  • Ustawia kolor motywu na podstawie pliku manifestu.

W przypadku przeglądarki Safari aplikacja PWACompat:

  • Ustawia apple-mobile-web-app-capable (otwieranie bez ramki przeglądarki) w trybach wyświetlania standalone, fullscreen lub minimal-ui.
  • Tworzy obrazy apple-touch-icon, dodając tło z pliku manifestu do przezroczystych ikon: w przeciwnym razie iOS renderuje przezroczystość jako czarny kolor.
  • Tworzy dynamiczne obrazy powitalne, które są bardzo podobne do obrazów powitalnych wygenerowanych dla przeglądarek opartych na Chromium.

Jeśli chcesz przyczynić się do rozwoju projektu lub pomóc w dodatkowym testowaniu obsługi przeglądarek, PWACompat jest dostępny na GitHubie.

Wypróbuj

PWACompat jest już dostępny na platformach Airhorner, v8.dev i Emotikony. Twoje witryny Kod HTML w nagłówku może być prosty: wystarczy określić plik manifestu, a usługa PWACompat zajmie się resztą.

📢🤣🎉