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 do pliku manifestu właściwości id powoduje usunięcie zależności 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. Gdy przeglądarka wykryje plik manifestu, który nie ma tożsamości pasującej do zainstalowanej już aplikacji PWA, będzie traktować go jako nową aplikację PWA, nawet jeśli jest on wyświetlany pod tym samym adresem URL co inna aplikacja PWA. Jeśli jednak zobaczy plik manifestu z tożsamością odpowiadającą już zainstalowanej aplikacji PWA, uzna go za zainstalowaną aplikację PWA.

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 niczego robić. Nie wystąpią żadne problemy, jeśli nie dodasz do pliku manifestu aplikacji internetowej id (o ile ścieżka 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 zepsuje. Od wersji 96 przeglądarka wygeneruje id, jeśli nie ma go w pliku manifestu na podstawie 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 przetestować?

Aby przetestować zachowanie, 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 następnie zamknij ją, 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