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

Pete LePage

Gdy użytkownik zainstaluje PWA, przeglądarka musi mieć możliwość jednoznacznego zidentyfikowania tej aplikacji. Jednak do niedawna specyfikacja pliku manifestu aplikacji internetowej nie określała jednoznacznie sposobu identyfikowania PWA, pozostawiając tę decyzję przeglądarkom i prowadząc do różnych implementacji. W niektórych przeglądarkach używana jest wartość start_url, a w innych ścieżka do pliku manifestu, co uniemożliwia aktualizację któregokolwiek z tych pól.

Aby rozwiązać ten problem, w specyfikacji pliku manifestu aplikacji internetowej dodano nową opcjonalną właściwość id, która umożliwia jawne zdefiniowanie identyfikatora używanego w Twojej aplikacji internetowej. Dodanie właściwości id do pliku manifestu eliminuje zależność od start_url lub lokalizacji pliku manifestu i umożliwia ich aktualizację w przyszłości.

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

Właściwość id reprezentuje tożsamość PWA w przeglądarce. Jeśli przeglądarka napotka plik manifestu, który nie ma tożsamości pasującej do już zainstalowanej aplikacji PWA, potraktuje ją jako nową aplikację PWA, nawet jeśli będzie wyświetlana z tego samego adresu URL co inna aplikacja PWA. Jeśli jednak znajdzie plik manifestu z tożsamością pasującą do już zainstalowanej aplikacji PWA, potraktuje ją jako zainstalowaną.

Obsługa przeglądarek

W Chrome 96 dodano obsługę właściwości id.

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

Nie musisz nic robić i nic się nie zmieni, jeśli nie dodasz id do pliku manifestu aplikacji internetowej (o ile start_url i ścieżka pliku manifestu pozostaną takie same). Aby zapewnić sobie przyszłość swojej progresywnej aplikacji internetowej, możesz dodać do pliku manifestu aplikacji internetowej właściwość id.

Jak określić i ustawić id?

Najbezpieczniejszym i najbardziej dokładnym sposobem określenia wartości id dla PWA jest sprawdzenie wartości obliczonej przez Chrome.

  1. W Chrome 96 lub nowszej wersji otwórz panel Manifest w panelu Aplikacja w Narzędziach deweloperskich.
  2. Gdy w pliku manifestu aplikacji internetowej id nie jest określony, pod właściwością Obliczony identyfikator aplikacji pojawi się odpowiednia uwaga.
  3. Skopiuj wartość id widoczną w notatce (patrz zrzut ekranu poniżej).
  4. Dodaj do pliku manifestu aplikacji internetowej właściwość id, używając wartości id podanej w notatce.

Obliczony identyfikator aplikacji w panelu Aplikacja w Narzędziach deweloperskich

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

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

Nie martw się – nic się nie zmieni. Od wersji 96 przeglądarka wygeneruje id, jeśli nie ma go w pliku manifestu na podstawie wartości start_url w pliku manifestu aplikacji internetowej.

Dodanie do pliku manifestu aplikacji internetowej id umożliwia zmianę start_url i ścieżki manifestu (jeśli i tylko jeśli ich źródło pozostaje takie samo), ponieważ przeglądarka będzie identyfikować PWA na podstawie określonego id, a nie start_url ani ścieżki manifestu.

Jak to sprawdzić?

Aby przetestować działanie, wykonaj te czynności:

  1. Zainstaluj PWA.
  2. Otwórz about://web-app-internals/ i sprawdź właściwości manifest_id i start_url zainstalowanej aplikacji PWA.
  3. Dodaj usługę id do pliku manifestu aplikacji internetowej, wykonując czynności opisane w sekcji Jak określić i ustawić id.
  4. Uruchom ponownie przeglądarkę (chrome://restart), uruchom progresywną aplikację internetową (about://apps), a potem ją zamknij, aby wymusić odświeżenie pliku manifestu.
  5. Otwórz about://web-app-internals/ i sprawdź właściwość manifest_id zainstalowanej aplikacji PWA, aby upewnić się, że nie uległa zmianie.
  6. Zmień start_url w pliku manifestu aplikacji internetowej.
  7. Uruchom ponownie przeglądarkę (chrome://restart), uruchom progresywną aplikację internetową (about://apps), a potem ją zamknij, aby wymusić odświeżenie pliku manifestu.
  8. Otwórz about://web-app-internals/ i sprawdź właściwości start_url zainstalowanej aplikacji PWA, aby sprawdzić, czy została ona zaktualizowana zgodnie z oczekiwaniami.

Dodatkowe materiały