Użyj panelu Aplikacja , aby sprawdzać, modyfikować i debugować pliki manifestu aplikacji internetowych, skrypty service worker i ich pamięci podręczne.
Progresywne aplikacje internetowe (PWA) to nowoczesne, wysokiej jakości aplikacje tworzone przy użyciu technologii internetowych. PWA mają podobne możliwości jak aplikacje na iOS, Androida i komputery. Są to:
- niezawodne nawet w niestabilnych warunkach sieciowych,
- możliwe do zainstalowania w miejscach uruchamiania systemów operacyjnych, takich jak folder Aplikacje w systemie Mac OS X, menu Start w systemie Windows oraz ekran główny w systemach Android i iOS,
- wyświetlane w przełącznikach aktywności, wyszukiwarkach urządzeń, takich jak Spotlight, oraz w arkuszach udostępniania treści.
Ten przewodnik omawia tylko funkcje progresywnych aplikacji internetowych w panelu Aplikacja. Jeśli potrzebujesz pomocy dotyczącej innych paneli, zapoznaj się z ostatnią sekcją tego przewodnika – Inne przewodniki dotyczące panelu Aplikacja.
Podsumowanie
- Użyj karty Manifest , aby sprawdzić plik manifestu aplikacji internetowej.
- Użyj karty Skrypty service worker, aby wykonywać różne zadania związane ze skryptami service worker, takie jak wyrejestrowywanie lub aktualizowanie usługi, emulowanie zdarzeń push, przechodzenie w tryb offline lub zatrzymywanie skryptu service worker.
- Wyświetl pamięć podręczną skryptu service worker na karcie Pamięć podręczna.
- Wyrejestruj skrypt service worker i wyczyść wszystkie dane oraz pamięci podręczne jednym kliknięciem przycisku na karcie Wyczyść dane.
Manifest aplikacji internetowej
Jeśli chcesz, aby użytkownicy mogli dodać Twoją aplikację do folderu Aplikacje w systemie Mac OS X, menu Start w systemie Windows oraz na ekranie głównym w systemach Android i iOS, musisz mieć manifest aplikacji internetowej. Manifest określa, jak aplikacja będzie wyświetlać się na ekranie głównym, gdzie przekierować użytkownika po uruchomieniu aplikacji z ekranu głównego oraz jak aplikacja będzie wyglądać po uruchomieniu.
Gdy skonfigurujesz manifest, możesz go sprawdzić na karcie Manifest w panelu Aplikacja.
- Aby sprawdzić źródło manifestu, kliknij link pod etykietą Manifest aplikacji (
manifest.webmanifestna zrzucie ekranu powyżej). - Sekcje Tożsamość i Prezentacja wyświetlają pola ze źródła manifestu w bardziej przyjazny dla użytkownika sposób.
- Sekcja Obsługa protokołów umożliwia przetestowanie rejestracji modułu obsługi protokołu URL w PWA jednym kliknięciem. Więcej informacji znajdziesz w artykule Testowanie rejestracji modułu obsługi protokołu URL.
- Sekcja Icons wyświetla wszystkie określone przez Ciebie ikony i umożliwia sprawdzenie ich masek.
- Zestaw sekcji Skrót #N wyświetla informacje o wszystkich obiektach skrótów.
- Zestaw sekcji Zrzut ekranu #N wyświetla zrzuty ekranu, które wzbogacają interfejs instalacji aplikacji.
Jeśli Narzędzia deweloperskie napotkają błąd, np. nie można wczytać ikony, na karcie Manifest pojawi się sekcja Możliwość instalacji z opisem błędu.
Wyświetlanie i sprawdzanie ikon z możliwością maskowania
Sekcja Ikony na karcie Manifest wyświetla wszystkie ikony aplikacji. W tej sekcji możesz też sprawdzić bezpieczne obszary ikon z możliwością maskowania oraz format ikon, które dostosowują się do platform.
Aby przyciąć ikony tak, aby widoczny był tylko minimalny bezpieczny obszar, zaznacz pole wyboru 
Pokazuj tylko minimalny bezpieczny obszar dla ikon z możliwością maskowania.
Jeśli całe logo jest widoczne w bezpiecznym obszarze, wszystko jest w porządku.
Wywoływanie instalacji
Chrome umożliwia włączenie i promowanie instalacji PWA bezpośrednio w interfejsie użytkownika. Dowiedz się, jak zapewnić własne środowisko instalacji w aplikacji.
Aby wywołać proces instalacji PWA:
- Otwórz stronę docelową PWA w Chrome.
Po prawej stronie paska adresu u góry kliknij
Zainstaluj.
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
Funkcja Zainstaluj aplikację (lub Dodaj do ekranu głównego na niektórych urządzeniach) nie może symulować procesu na urządzeniach mobilnych. Zwróć uwagę, że przeglądarka Chrome na komputerze wyświetla przycisk instalacji na pasku adresu, nawet jeśli Narzędzia deweloperskie są w trybie urządzenia. Jeśli jednak uda Ci się dodać aplikację na komputerze, będzie ona działać też na urządzeniach mobilnych.
Jeśli chcesz przetestować prawdziwe środowisko mobilne, możesz połączyć prawdziwe urządzenie mobilne z
Narzędziami deweloperskimi za pomocą zdalnego debugowania. Aby wywołać instalację na połączonym urządzeniu mobilnym, otwórz menu 
z 3 kropkami i kliknij 
Zainstaluj aplikację (lub Dodaj do ekranu głównego).
Sprawdzanie skrótów
Skróty do aplikacji umożliwiają szybki dostęp do kilku typowych działań, których użytkownicy często potrzebują.
Aby sprawdzić skróty zdefiniowane w pliku manifestu, przewiń do sekcji Skrót #N na karcie Manifest.
Sprawdzanie zrzutów ekranu pod kątem bogatszego interfejsu instalacji
Gdy dodasz opis i zestaw zrzutów ekranu do pliku manifestu, aplikacja otrzyma bogatsze okno instalacji.
Aby sprawdzić zrzuty ekranu, przewiń do sekcji Zrzut ekranu #N na karcie Manifest.
Testowanie rejestracji modułu obsługi protokołu URL
PWA mogą obsługiwać linki, które używają określonego protokołu, aby zapewnić bardziej zintegrowane środowisko. Aby dowiedzieć się, jak utworzyć moduł obsługi, przeczytaj artykuł Rejestracja modułu obsługi protokołu URL na potrzeby PWA.
Aby przetestować moduł obsługi:
- Otwórz Narzędzia deweloperskie na stronie docelowej PWA. Możesz na przykład sprawdzić tę demonstracyjną PWA.
- Na stronie demonstracyjnej zainstaluj PWA i po instalacji ponownie załaduj aplikację. Przeglądarka zarejestrowała teraz PWA jako moduł obsługi protokołu
web+coffee. - W sekcji Aplikacja > Manifest > Obsługa protokołów wpisz adres URL, który ma przetestować moduł obsługi, i kliknij Testuj protokół.
W tym przykładzie moduł obsługi może przetwarzać americano,chaiilatte-macchiato. - Gdy Chrome zapyta, czy może otworzyć aplikację, potwierdź, klikając Otwórz moduł obsługi protokołu.
- W następnym oknie dialogowym zezwól aplikacji na obsługę linków
web+coffee.
Jeśli moduł obsługi prawidłowo przetworzy link, w aplikacji zobaczysz obraz filiżanki kawy.
Skrypty service worker
Skrypty service worker to podstawowa technologia przyszłej platformy internetowej. Są to skrypty, które przeglądarka uruchamia w tle, niezależnie od strony internetowej. Te skrypty umożliwiają dostęp do funkcji, które nie wymagają strony internetowej ani interakcji z użytkownikiem, takich jak powiadomienia push, synchronizacja w tle i tryb offline.
Powiązane przewodniki:
Karta Skrypty service worker w panelu Aplikacja to główne miejsce w Narzędziach deweloperskich, w którym można sprawdzać i debugować skrypty service worker.
- Jeśli na obecnie otwartej stronie jest zainstalowany skrypt service worker, zobaczysz go na tej karcie. Na przykład na zrzucie ekranu powyżej jest zainstalowany skrypt service worker w zakresie
https://airhorner.com/. - Pole wyboru
Offline przełącza Narzędzia deweloperskie w tryb offline. Jest to odpowiednik trybu offline
dostępnego w panelu Sieć lub opcji Go offlinew menu Polecenia. - Pole wyboru
Aktualizuj przy ponownym wczytaniu wymusza aktualizację skryptu service worker przy każdym wczytaniu strony. - Pole wyboru
Omiń sieć pomija skrypt service worker i wymusza na przeglądarce przejście do
sieci w celu uzyskania żądanych zasobów. - Link Żądania sieciowe przenosi do panelu Sieć z listą przechwyconych żądań związanych ze skryptem service worker (filtr
is:service-worker-intercepted). - Link Aktualizuj wykonuje jednorazową aktualizację określonego skryptu service worker.
- Przycisk Push emuluje powiadomienie push bez ładunku (znane też jako tickle).
- Przycisk Synchronizuj emuluje zdarzenie synchronizacji w tle.
- Link Wyrejestruj wyrejestrowuje określony skrypt service worker. Więcej informacji o wyrejestrowywaniu skryptu service worker oraz czyszczeniu danych i pamięci podręcznych jednym kliknięciem przycisku znajdziesz w sekcji Wyczyść dane.
- Wiersz Źródło informuje, kiedy został zainstalowany aktualnie działający skrypt service worker. Link to nazwa pliku źródłowego skryptu service worker. Kliknięcie linku powoduje przejście do źródła skryptu service worker.
- Wiersz Stan informuje o stanie skryptu service worker. Liczba w tym wierszu (
#16na zrzucie ekranu) wskazuje, ile razy skrypt service worker został zaktualizowany. Jeśli włączysz
pole wyboru Aktualizuj przy ponownym wczytaniu, zauważysz, że liczba zwiększa się przy każdym wczytaniu strony.
Obok stanu zobaczysz link Uruchom (jeśli skrypt service worker jest zatrzymany) lub link Zatrzymaj (jeśli skrypt service worker jest uruchomiony). Skrypty service worker są zaprojektowane tak, aby przeglądarka mogła je w dowolnym momencie zatrzymać i uruchomić. Możesz to zasymulować, zatrzymując skrypt service worker za pomocą linku Zatrzymaj. Zatrzymanie skryptu service worker to świetny sposób na sprawdzenie, jak kod zachowuje się po ponownym uruchomieniu skryptu service worker. Często ujawnia to błędy wynikające z błędnych założeń dotyczących trwałego stanu globalnego. - Wiersz Klienci informuje o źródle, do którego jest ograniczony skrypt service worker. Przycisk Skup się jest najbardziej przydatny, gdy masz zarejestrowanych kilka skryptów service worker. Jeśli klikniesz przycisk Skup się obok skryptu service worker, który działa na innej karcie, Chrome przełączy się na tę kartę.
Tabela Cykl aktualizacji pokazuje działania skryptu service worker i ich czasy trwania, takie jak instalacja, oczekiwanie i aktywacja. Aby zobaczyć dokładny sygnaturę czasową każdego działania, kliknij przyciski
Rozwiń.
Więcej informacji znajdziesz w artykule Cykl życia skryptu service worker.
Jeśli skrypt service worker spowoduje błędy, na karcie Skrypty service worker pojawi się ikona 
Błąd z liczbą błędów obok wiersza Źródło.
Link z liczbą przenosi do Konsoli ze wszystkimi zarejestrowanymi błędami.
Aby zobaczyć informacje o wszystkich skryptach service worker, u dołu karty Skrypty service worker kliknij Zobacz wszystkie rejestracje. Ten link przenosi do strony chrome://serviceworker-internals/?devtools, na której możesz dalej debugować skrypty service worker.
Pamięci podręczne skryptów service worker
Karta Pamięć podręczna zawiera listę tylko do odczytu zasobów, które zostały zapisane w pamięci podręcznej za pomocą interfejsu Cache API (skryptu service worker).
Pamiętaj, że gdy po raz pierwszy otworzysz pamięć podręczną i dodasz do niej zasób, Narzędzia deweloperskie mogą nie wykryć zmiany. Odśwież stronę, a powinna się pojawić pamięć podręczna.
Jeśli masz otwarte co najmniej 2 pamięci podręczne, zobaczysz je pod menu Pamięć podręczna.
Wykorzystanie limitu
Niektóre odpowiedzi na karcie Pamięć podręczna mogą być oznaczone jako "nieprzezroczyste". Oznacza to odpowiedź pobraną z innego źródła, np. z CDN lub zdalnego interfejsu API, gdy CORS nie jest włączony.
Aby uniknąć wycieku informacji między domenami, do rozmiaru
nieprzezroczystej odpowiedzi dodawany jest znaczny margines, który służy do obliczania limitów miejsca na dane (czyli czy zostanie zgłoszony wyjątek QuotaExceeded
) i jest zgłaszany przez interfejs navigator.storage API.
Szczegóły tego marginesu różnią się w zależności od przeglądarki, ale w przypadku Google Chrome oznacza to, że minimalny rozmiar, jaki pojedyncza odpowiedź nieprzezroczysta w pamięci podręcznej ma wpływ na ogólne wykorzystanie miejsca na dane, wynosi około 7 MB. Pamiętaj o tym, gdy będziesz określać, ile odpowiedzi nieprzezroczystych chcesz zapisać w pamięci podręcznej, ponieważ możesz łatwo przekroczyć limity miejsca na dane znacznie szybciej, niż się spodziewasz, na podstawie rzeczywistego rozmiaru zasobów nieprzezroczystych.
Powiązane przewodniki:
- Stack Overflow: jakie ograniczenia dotyczą odpowiedzi nieprzezroczystych?
- Workbox: zrozumienie limitu miejsca na dane
Wyczyść dane
Karta Wyczyść dane jest bardzo przydatna podczas tworzenia progresywnych aplikacji internetowych. Ta karta umożliwia wyrejestrowanie skryptów service worker oraz wyczyszczenie wszystkich pamięci podręcznych i danych jednym kliknięciem przycisku. Więcej informacji znajdziesz w sekcji poniżej.
Powiązane przewodniki:
Inne przewodniki dotyczące panelu Aplikacja
Więcej informacji o innych panelach w panelu Aplikacja znajdziesz w przewodnikach poniżej.
Powiązane przewodniki: