Unikalne identyfikowanie aplikacji PWA za pomocą identyfikatora pliku manifestu aplikacji internetowej

Pete LePage

Gdy użytkownik zainstaluje Twoją PWA, przeglądarka musi mieć sposób czyli progresywnych aplikacji internetowych. Do niedawna jednak w specyfikacji pliku manifestu aplikacji internetowej nie było zdefiniować sposób jednoznacznej identyfikacji PWA, pozostawiając przeglądarkom wybór co prowadzi do różnych implementacji. W niektórych przeglądarkach atrybut start_url w innych, a w innych – ścieżka do pliku manifestu, nie może zaktualizować żadnego z tych pól.

Aby rozwiązać ten problem, udostępniamy w aplikacji internetowej nową, opcjonalną właściwość id specyfikacji pliku manifestu, która umożliwia jawne zdefiniowanie identyfikatora używanego Twoją progresywną aplikację internetową. Dodanie właściwości id do pliku manifestu eliminuje zależność start_url lub lokalizację pliku manifestu i umożliwia aby zaktualizować je w przyszłości.

Do czego służy właściwość id?

Właściwość id reprezentuje aplikację PWA dla przeglądarki. Kiedy przeglądarka widzi plik manifestu, który nie ma tożsamości pasującej do jest już zainstalowana PWA, traktuje ją jako nową, nawet jeśli jest udostępniana z tego samego adresu URL co inna aplikacja PWA. Jeśli jednak wyświetla plik manifestu z tożsamością zgodne z już zainstalowaną PWA, będzie traktować ją jako zainstalowaną.

Obsługa przeglądarek

Obsługa usługi id jest dostępna w Chrome 96.

Co zrobić, jeśli mam aplikację bez identyfikatora id?

Nic nie musisz robić i nic się nie zmieni, jeśli nie dodawaj id do pliku manifestu aplikacji internetowej (o ile start_url i ścieżka pliku manifestu pozostaje bez zmian). Aby zadbać o przyszłość PWA, możesz dodać usłudze id do pliku manifestu aplikacji internetowej.

Jak określić i ustawić id?

Najbezpieczniejszy i najdokładniejszy sposób określenia id na potrzeby aplikacji PWA jest sprawdzenie wartości obliczonej przez Chrome.

  1. W przeglądarce Chrome 96 lub nowszej otwórz Panel pliku manifestu panelu Aplikacja w Narzędziach deweloperskich.
  2. Najedź kursorem na ikonę (!) obok usługi Identyfikator aplikacji. (!) ikona etykietki pojawi się tylko wtedy, gdy element id jest nieokreślony w plik manifestu aplikacji internetowej.
  3. Zwróć uwagę na wartość id podaną we wskazówce (patrz zrzut ekranu poniżej).
  4. Dodaj usługę id do pliku manifestu aplikacji internetowej za pomocą wartości id podanej w polu kliknij etykietkę.

Etykietka pokazująca identyfikator .

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Co się stanie, jeśli nie ustawię id?

Nie martw się – nic się nie zmieni. Począwszy od Chrome 96, przeglądarka wygeneruje element id, jeśli nie ma go w pliku manifestu na podstawie start_url w manifeście aplikacji internetowej.

Dodanie atrybutu id do pliku manifestu aplikacji internetowej umożliwia aby zmienić start_url i ścieżkę pliku manifestu (jeśli i tylko wtedy, gdy ich konkretna origin pozostaje bez zmian!), ponieważ przeglądarka identyfikować PWA na podstawie określonego identyfikatora id, a nie identyfikatora start_url lub pliku manifestu.

Jak to sprawdzić?

Aby przetestować to działanie, postępuj zgodnie z wykonaj te czynności:

  1. Zainstaluj PWA.
  2. Otwórz aplikację about://web-app-internals/ i sprawdź unhashed_app_id oraz Właściwość start_url zainstalowanej aplikacji PWA.
  3. Dodaj usługę id do pliku manifestu aplikacji internetowej, wykonując czynności opisane w Jak mogę określić i ustawić mój id powyżej.
  4. Uruchom ponownie przeglądarkę, używając pliku chrome://restart, uruchom PWA na stronie about://apps, a następnie zamknij aplikację PWA, aby wymusić odświeżenie pliku manifestu.
  5. Otwórz about://web-app-internals/ i sprawdź właściwość manifest_id dla zainstalowanej aplikacji PWA, aby sprawdzić, czy nic się nie zmieniło.
  6. Zmień start_url w pliku manifestu aplikacji internetowej.
  7. Uruchom ponownie przeglądarkę, używając pliku chrome://restart, uruchom PWA na stronie about://apps, a następnie zamknij aplikację PWA, aby wymusić odświeżenie pliku manifestu.
  8. Otwórz about://web-app-internals/ i sprawdź właściwość start_url dla zainstalowana aplikacja PWA, aby sprawdzić, czy została zaktualizowana zgodnie z oczekiwaniami.

Dodatkowe materiały