W panelu Aplikacja możesz sprawdzać, modyfikować i debugować pliki manifestu aplikacji internetowych, mechanizmy Service Worker i pamięci podręczne instancji roboczych.
Progresywne aplikacje internetowe (PWA) to nowoczesne aplikacje wysokiej jakości opracowane przy użyciu technologii internetowej. Progresywne aplikacje internetowe oferują podobne możliwości co aplikacje na iOS i Androida oraz aplikacje komputerowe. Są to:
- Niezawodne nawet w niestabilnych warunkach sieciowych.
- Instalujący się, aby uruchamiać platformy systemów operacyjnych, np. folder Aplikacje w systemie Mac OS X, menu Start w systemie Windows oraz ekran główny na urządzeniach z Androidem i iOS.
- Wyświetlaj informacje w opcjach przełączania aktywności, w wyszukiwarkach na urządzeniach (np. Spotlight) i arkuszach udostępniania treści.
W tym przewodniku omawiamy tylko funkcje progresywnej aplikacji internetowej w panelu Aplikacja. Jeśli szukasz pomocy dotyczącej innych paneli, zapoznaj się z ostatnią sekcją tego przewodnika: Przewodniki dotyczące panelu Inne aplikacje.
Podsumowanie
- Użyj karty Plik manifestu, aby sprawdzić plik manifestu aplikacji internetowej.
- Karta Skrypty service worker pozwala na wykonywanie wielu różnych zadań związanych z skryptami service worker, takich jak wyrejestrowywanie lub aktualizowanie usługi, emulowanie zdarzeń push, przechodzenie w tryb offline czy zatrzymywanie skryptu service worker.
- Wyświetl pamięć podręczną skryptu service worker na karcie Cache Storage (Miejsce pamięci podręcznej).
- Wyrejestruj skrypt service worker i wyczyść całą pamięć podręczną oraz pamięć podręczną jednym kliknięciem na karcie Wyczyść pamięć wewnętrzną.
Manifest aplikacji internetowej
Jeśli chcesz, aby użytkownicy mogli dodawać Twoją aplikację do folderu Aplikacje w Mac OS X, w menu Start w systemie Windows oraz na ekranie głównym na urządzeniach z Androidem i iOS, potrzebujesz manifestu aplikacji internetowej. Plik manifestu określa, w jaki sposób aplikacja wyświetla się na ekranie głównym, dokąd przekierować użytkownika po uruchomieniu z ekranu głównego oraz jak aplikacja wygląda po uruchomieniu.
Po skonfigurowaniu pliku manifestu możesz go sprawdzić na karcie Plik manifestu w panelu Aplikacja.
- Aby spojrzeć na źródło pliku manifestu, kliknij link pod etykietą pliku manifestu aplikacji (
manifest.webmanifestna zrzucie ekranu powyżej). - W sekcjach Tożsamość i Prezentacja wyświetlają się tylko pola ze źródła pliku manifestu w bardziej przyjazny dla użytkownika sposób.
- Sekcja Moduły obsługi protokołów umożliwia przetestowanie rejestracji modułu obsługi protokołu URL PWA jednym kliknięciem. Więcej informacji znajdziesz w sekcji Rejestracja modułu obsługi protokołu URL w wersji testowej.
- W sekcji Ikony znajdują się wszystkie określone ikony i możesz sprawdzić ich maski.
- Zestaw sekcji Skrót #N zawiera informacje o wszystkich obiektach skrótów.
- Zestaw Zrzut ekranu #N zawiera zrzuty ekranu, które wzbogacają interfejs instalacji aplikacji.
Jeśli w Narzędziach deweloperskich wystąpi błąd, na przykład ikonę, której nie można wczytać, na karcie Plik manifestu pojawi się sekcja Instalacja z opisem błędu.
Wyświetl i zaznacz ikony z możliwością maskowania
Sekcja Ikony na karcie Plik manifestu zawiera wszystkie ikony aplikacji. W tej sekcji możesz też sprawdzić, czy w bezpiecznych obszarach nie ma ikon z maskowaniem, czyli formatu ikon dostosowujących się do platformy.
Aby przyciąć ikony, tak aby widoczny był tylko minimalny bezpieczny obszar, zaznacz 
Pokazuj tylko minimalny bezpieczny obszar ikon z możliwością maskowania.
Jeśli całe logo jest widoczne w bezpiecznym obszarze, nie musisz nic robić.
Aktywuj instalację
Chrome umożliwia włączanie i promowanie instalacji PWA bezpośrednio w interfejsie użytkownika. Dowiedz się, jak zainstalować własną aplikację.
Aby uruchomić proces instalacji PWA:
- Otwórz stronę docelową PWA w Chrome.
Na prawo od paska adresu u góry kliknij
Zainstaluj.
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
Funkcja Zainstaluj aplikację nie może symulować przepływu pracy na urządzeniach mobilnych. Zwróć uwagę, że przeglądarka Chrome na komputerze wyświetla przycisk instalacji na pasku adresu, mimo że Narzędzia deweloperskie działają w trybie urządzenia. Jeśli jednak dodasz ją na komputerze, będzie ona działać także na urządzeniach mobilnych.
Jeśli chcesz przetestować działanie prawdziwego środowiska mobilnego, możesz połączyć z Narzędziami deweloperskimi prawdziwe urządzenie mobilne za pomocą zdalnego debugowania. Aby uruchomić instalację na połączonym urządzeniu mobilnym, otwórz menu 
z 3 kropkami i kliknij 
Zainstaluj aplikację.
Sprawdź skróty
Skróty do aplikacji zapewniają szybki dostęp do kilku typowych działań, których użytkownicy często potrzebują.
Aby przejrzeć skróty zdefiniowane w pliku manifestu, przewiń do sekcji Skrót #N na karcie Plik manifestu.
Sprawdź zrzuty ekranu, aby uzyskać bogatszy interfejs instalacji
Jeśli dodasz do pliku manifestu opis i zestaw zrzutów ekranu, okno instalacji aplikacji stanie się bardziej atrakcyjne.
Aby przejrzeć zrzuty ekranu, przewiń do sekcji Zrzut ekranu #N na karcie Plik manifestu.
Rejestracja modułu obsługi protokołu adresu URL testu
PWA mogą obsługiwać linki, które używają określonego protokołu, co zapewnia bardziej zintegrowaną obsługę. Aby dowiedzieć się, jak utworzyć moduł obsługi, przeczytaj artykuł o rejestrowaniu modułów obsługi protokołu URL na potrzeby aplikacji PWA.
Aby przetestować moduł obsługi:
- Otwórz Narzędzia deweloperskie na stronie docelowej PWA. Zobacz np. prezentację PWA.
- Na stronie demonstracyjnej zainstaluj PWA i załaduj aplikację ponownie. Przeglądarka zarejestrowała PWA jako moduł obsługi protokołu
web+coffee. - W sekcji Aplikacja > Plik manifestu > Moduł obsługi protokołu wpisz adres URL, który ma przetestować moduł obsługi, i kliknij Protokół testowy.
W tym przykładzie moduł obsługi może przetworzyć specyfikację americano,chaiilatte-macchiato. - Gdy Chrome zapyta, czy można otworzyć aplikację, potwierdź, klikając Otwórz moduł obsługi protokołu.
- W następnym oknie zezwól aplikacji na obsługę linków
web+coffee.
Jeśli moduł obsługi przetworzy link, w aplikacji zobaczysz obraz filiżanki z kawą.
Skrypty service worker
Mechanizmy Service Worker stanowią fundamentalną technologię przyszłości platformy internetowej. Są to skrypty uruchamiane przez przeglądarkę w tle niezależnie od strony internetowej. Umożliwiają one dostęp do funkcji, które nie wymagają obsługi strony internetowej ani interakcji użytkownika, takich jak powiadomienia push, synchronizacja w tle i działanie offline.
Powiązane przewodniki:
Karta Service Workers w panelu Application (aplikacja) to główne miejsce w Narzędziach deweloperskich, które służy do sprawdzania i debugowania skryptu service worker.
- Jeśli skrypt service worker jest zainstalowany na aktualnie otwartej stronie, zobaczysz go na tej karcie. Na przykład na zrzucie ekranu powyżej jest zainstalowany skrypt service worker dla zakresu
https://airhorner.com/. - Zaznaczenie pola wyboru
Offline powoduje, że Narzędzia deweloperskie działają w trybie offline. Jest to odpowiednik trybu offline dostępnego w panelu Sieć lub opcji Go offlinew menu poleceń. - Pole wyboru
Aktualizuj przy ponownym załadowaniu wymusza aktualizację przez skrypt service worker przy każdym wczytaniu strony. - Pole wyboru
Pomijaj dla sieci pomija skrypt service worker i wymusza na przeglądarce przejście do sieci w celu pobrania żądanych zasobów. - Link Żądania sieciowe prowadzi do panelu Sieć z listą przechwyconych żądań powiązanych z skryptem service worker (filtr
is:service-worker-intercepted). - Link Aktualizuj powoduje jednorazową aktualizację określonego skryptu service worker.
- Przycisk Push emuluje powiadomienie push bez ładunku (zwanego też powiadomieniem).
- Przycisk Synchronizuj emuluje zdarzenie synchronizacji w tle.
- Link Wyrejestruj wyrejestrowuje określony skrypt service worker. W artykule Wyczyść pamięć wewnętrzną znajdziesz sposoby wyrejestrowania skryptu service worker oraz wyczyszczenia pamięci i pamięci podręcznej jednym kliknięciem.
- Wiersz Źródło informuje, kiedy uruchomiono aktualnie uruchomiony skrypt service worker. Link to nazwa pliku źródłowego skryptu service worker. Kliknięcie go powoduje przejście do źródła skryptu service worker.
- Wiersz Stan zawiera informacje o stanie skryptu service worker. Liczba w tym wierszu (
#16na zrzucie ekranu) wskazuje, ile razy skrypt service worker był aktualizowany. Jeśli zaznaczysz pole wyboru
Aktualizuj przy ponownym załadowaniu, liczba ta zwiększa się przy każdym wczytaniu strony.
Obok stanu zobaczysz link start (jeśli skrypt service worker jest zatrzymany) lub link stop (jeśli skrypt service worker jest uruchomiony). Skrypty service worker są zatrzymywane i uruchamiane w dowolnym momencie przez przeglądarkę. Bezpośrednie zatrzymanie skryptu service worker za pomocą linku stop może to symulować. Zatrzymanie skryptu service worker to świetny sposób na sprawdzenie, jak zachowuje się Twój kod, gdy skrypt service worker uruchamia się ponownie. Często ujawnia błędy wynikające z błędnych założeń dotyczących trwałego stanu globalnego. - Wiersz Klienci wskazuje źródło, do którego jest ograniczony skrypt service worker. Przycisk fokus jest najbardziej przydatny, gdy masz wiele zarejestrowanych mechanizmów Service Worker. Jeśli klikniesz przycisk fokusa obok skryptu service worker, który działa w innej karcie, Chrome wyświetli na niej tę kartę.
Tabela Cykl aktualizacji zawiera informacje o aktywnościach mechanizmów Service Worker i ich czasach, takich jak instalacja, oczekiwanie czy aktywowanie. Aby zobaczyć dokładną sygnaturę czasową każdego działania, kliknij przyciski
Rozwiń.
Więcej informacji znajdziesz w artykule Cykl życia mechanizmów Service Worker.
Jeśli skrypt service worker powoduje błędy, na karcie Skrypty service worker obok wiersza Źródło pojawia się ikona 
Błąd z liczbą błędów.
Link z tym numerem prowadzi do konsoli ze wszystkimi zarejestrowanymi błędami.
Aby wyświetlić informacje o wszystkich skryptach service worker, u dołu karty Service Workers kliknij Zobacz wszystkie rejestracje. Ten link prowadzi do strony chrome://serviceworker-internals/?devtools, gdzie możesz dalej debugować mechanizmy Service Worker.
Pamięć podręczna skryptu service worker
Karta Pamięć podręczna zawiera listę zasobów (tylko do odczytu), które zostały zapisane w pamięci podręcznej za pomocą interfejsu Cache API.
Gdy pierwszy raz otworzysz pamięć podręczną i dodasz do niej zasób, Narzędzia deweloperskie mogą nie wykryć zmiany. Załaduj ponownie stronę. Pamięć podręczna powinna być widoczna.
Jeśli masz otwarte co najmniej 2 pamięci podręczne, zobaczysz je na liście poniżej menu Pamięć podręczna.
Wykorzystanie limitu
Niektóre odpowiedzi na karcie Pamięć podręczna mogą zostać oznaczone jako „nieprzezroczyste”. Oznacza odpowiedź pobraną z innego źródła, np. z CDN lub zdalnego interfejsu API, gdy funkcja CORS nie jest włączona.
Aby zapobiec wyciekowi informacji z wielu domen, do rozmiaru nieprzejrzystej odpowiedzi dodano znaczne dopełnienie używane do obliczania limitów miejsca na dane (tzn. czy został zgłoszony wyjątek QuotaExceeded) i raportowany przez navigator.storage API.
Szczegóły tego dopełnienia różnią się w zależności od przeglądarki, ale w przypadku Google Chrome oznacza to, że minimalny rozmiar każdej nieprzejrzystej odpowiedzi z pamięci podręcznej w przypadku ogólnego wykorzystania miejsca na dane wynosi około 7 MB. Należy o tym pamiętać przy określaniu liczby nieprzejrzystych odpowiedzi, które chcesz buforować, ponieważ w przypadku rzeczywistego rozmiaru nieprzezroczystych zasobów możesz łatwo przekroczyć limit miejsca na dane znacznie szybciej, niż się spodziewasz.
Powiązane przewodniki:
- Stack Overflow: jakie ograniczenia obowiązują w przypadku niejednoznacznych odpowiedzi
- Pole robocze: informacje o limitach miejsca na dane
Wyczyść pamięć
Karta Wyczyść pamięć jest bardzo przydatna przy tworzeniu progresywnych aplikacji internetowych. Na tej karcie możesz wyrejestrować mechanizmy Service Worker oraz wyczyścić wszystkie pamięci podręczne i pamięć masową jednym kliknięciem. Więcej informacji znajdziesz w sekcji poniżej.
Powiązane przewodniki:
Inne przewodniki po panelu aplikacji
Więcej informacji o innych panelach panelu Aplikacja znajdziesz w przewodnikach poniżej.
Powiązane przewodniki: