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

Pete LePage

Gdy użytkownik instaluje Twoją aplikację PWA, przeglądarka musi mieć możliwość jednoznacznej identyfikacji tej aplikacji. Do niedawna jednak specyfikacja pliku manifestu aplikacji internetowej nie definiowała sposobu jednoznacznego identyfikowania PWA, przez co przeglądarki podejmowały decyzję i prowadziły do różnych implementacji. W niektórych przeglądarkach używany jest parametr start_url, a w innych ścieżka do pliku manifestu uniemożliwia zaktualizowanie żadnego z tych pól.

Aby rozwiązać ten problem, wprowadziliśmy w specyfikacji pliku manifestu aplikacji internetowej nową opcjonalną właściwość id, która umożliwia jawne zdefiniowanie identyfikatora aplikacji PWA. Dodanie właściwości id do pliku manifestu usuwa zależność od start_url lub lokalizacji tego pliku i umożliwia ich aktualizowanie w przyszłości.

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

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

Obsługiwane przeglądarki

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

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

Nie musisz nic robić. Jeśli nie dodasz metody id do pliku manifestu aplikacji internetowej (o ile start_url i ścieżka pliku manifestu pozostaną takie same), nic nie zadziała. Aby przygotować swoją aplikację PWA w przyszłości, możesz dodać do jej pliku manifestu usługę id.

Jak określić i ustawić urządzenie id?

Najbezpieczniejszym i najdokładniejszym sposobem określenia wartości id w przypadku PWA jest sprawdzenie wartości obliczonej przez Chrome.

  1. W Chrome w wersji 96 lub nowszej otwórz w Narzędziach deweloperskich panel Plik manifestu w panelu Aplikacja.
  2. Najedź kursorem myszy na ikonę (!) obok właściwości Identyfikator aplikacji. Ikona etykietki (!) pojawi się tylko wtedy, gdy parametr id nie będzie określony w pliku manifestu aplikacji internetowej.
  3. Zwróć uwagę na wartość id podaną w wskazówce (zobacz zrzut ekranu poniżej).
  4. Dodaj właściwość id do pliku manifestu aplikacji internetowej, używając wartości id widocznej w etykietce.

Etykietka z wartością identyfikatora.

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

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

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

Dodanie elementu id do pliku manifestu aplikacji internetowej umożliwia zmianę start_url i ścieżki pliku manifestu (i tylko wtedy, gdy ich źródło pozostaje niezmienione), ponieważ przeglądarka rozpozna PWA na podstawie określonego elementu id, a nie ścieżki start_url lub pliku manifestu.

Jak to przetestować?

Aby to sprawdzić, wykonaj te czynności:

  1. Zainstaluj progresywną aplikację internetową.
  2. Otwórz about://web-app-internals/ i sprawdź właściwości unhashed_app_id oraz 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 skonfigurować id powyżej.
  4. Uruchom ponownie przeglądarkę za pomocą chrome://restart, uruchom PWA z poziomu 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 zainstalowanej aplikacji PWA, aby sprawdzić, czy się nie zmieniła.
  6. Zmień start_url w manifeście aplikacji internetowej.
  7. Uruchom ponownie przeglądarkę za pomocą chrome://restart, uruchom PWA z poziomu 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 zainstalowanej aplikacji PWA, aby upewnić się, że została zaktualizowana zgodnie z oczekiwaniami.

Dodatkowe materiały