W panelu Aplikacja możesz sprawdzać, modyfikować i debugować pliki manifestu aplikacji internetowej, skrypty service worker oraz pamięć podręczną skryptu service worker.
Progresywne aplikacje internetowe (PWA) to nowoczesne, wysokiej jakości aplikacje stworzone w technologii internetowej. Aplikacje PWA mają podobne możliwości co aplikacje na iOS, Androida i komputera. Są to:
- stabilnie działać nawet w niestabilnych warunkach sieciowych;
- instalowane w systemach operacyjnych, aby uruchamiać aplikacje na takich powierzchniach, jak folder Aplikacje w systemie Mac OS X, menu Start w systemie Windows oraz ekran główny w systemach Android i iOS.
- wyświetlać się w przełącznikach aktywności, wyszukiwarkach na urządzeniach, takich jak Spotlight, oraz w arkuszach udostępniania treści;
Ten przewodnik dotyczy tylko funkcji progresywnych aplikacji internetowych w panelu Aplikacja. Jeśli potrzebujesz pomocy dotyczącej innych paneli, przeczytaj ostatnią sekcję tego przewodnika, Przewodniki po innych panelach aplikacji.
Podsumowanie
- Aby sprawdzić manifest aplikacji internetowej, otwórz kartę Plik manifestu.
- Karta Service Worker zawiera całą gamę zadań związanych z workerami usługi, takich jak wyrejestrowanie lub aktualizowanie usługi, emulowanie zdarzeń push, przechodzenie w tryb offline czy zatrzymywanie workera usługi.
- Pamięć podręczna service workera jest widoczna na karcie Pamięć podręczna.
- Możesz odrejestrować service workera i wyczyścić wszystkie dane i pamięć podręczną za pomocą jednego przycisku na karcie Wyczyść pamięć podręczną.
Manifest aplikacji internetowej
Jeśli chcesz, aby użytkownicy mogli dodać Twoją aplikację do folderu Aplikacje w Mac OS X, menu Start w Windowsie oraz ekranu głównego na Androidzie i iOS, musisz utworzyć manifest aplikacji internetowej. Plik manifestu określa, jak aplikacja będzie wyświetlać się na ekranie głównym, dokąd kierować użytkownika po uruchomieniu aplikacji na ekranie głównym i jak będzie wyglądać po uruchomieniu.
Po skonfigurowaniu pliku manifestu możesz go sprawdzić na karcie Plik manifestu w panelu Aplikacja.
- Aby wyświetlić źródło pliku manifestu, kliknij link pod etykietą Plik manifestu aplikacji (
manifest.webmanifestna powyższym zrzucie ekranu). - Sekcje Tożsamość i Prezentacja wyświetlają pola ze źródła pliku manifestu w bardziej przyjazny dla użytkownika sposób.
- W sekcji Moduły obsługi protokołu możesz jednym kliknięciem przetestować rejestrację modułu obsługi protokołu URL w Twojej aplikacji PWA. Więcej informacji znajdziesz w artykule Testowanie rejestracji modułu obsługi protokołu URL.
- W sekcji Ikony wyświetlają się wszystkie określone przez Ciebie ikony, a także możesz sprawdzić ich maski.
- Sekcje w sekcji Skrót #N zawierają informacje o wszystkich obiektach skrótów.
- W sekcji Zrzut ekranu N wyświetlają się zrzuty ekranu z bardziej rozbudowanym interfejsem instalacji aplikacji.
Jeśli w Narzędziach dla programistów wystąpi błąd, np. ikona, która nie może zostać załadowana, na karcie Plik manifestu pojawi się sekcja Możliwość instalacji z opisem błędu.
Wyświetlanie i sprawdzanie ikon z możliwością maskowania
W sekcji Ikony na karcie Plik manifestu wyświetlane są wszystkie ikony aplikacji. W tej sekcji możesz też sprawdzić bezpieczne obszary ikon z możliwością maskowania, czyli format ikon, który dostosowuje się do platform.
Aby przyciąć ikony tak, aby widoczny był tylko minimalny bezpieczny obszar, zaznacz 
Pokaż 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.
Instalacja wyzwalacza
Chrome umożliwia włączenie i promowanie instalacji PWA bezpośrednio w interfejsie. Dowiedz się, jak zapewnić użytkownikom możliwość instalacji aplikacji w aplikacji.
Aby rozpocząć 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ę nie może symulować procesu na urządzeniach mobilnych. Zwróć uwagę, że przeglądarka Chrome na komputerze wyświetla przycisk instalacji na pasku adresu, mimo że Narzędzia dla deweloperów są w trybie urządzenia. Jeśli jednak uda Ci się dodać aplikację do komputera, będzie ona działać też na telefonie.
Jeśli chcesz przetestować prawdziwe urządzenie mobilne, możesz połączyć je z DevTools za pomocą debugowania zdalnego. Aby rozpocząć instalację na połączonym urządzeniu mobilnym, otwórz menu 
z 3 kropkami i kliknij 
Zainstaluj aplikację.
Sprawdzanie skrótów
Skróty do aplikacji umożliwiają szybki dostęp do kilku typowych czynności, których użytkownicy potrzebują często.
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 do pliku manifestu opis i zbiór zrzutów ekranu, aplikacja uzyska bardziej rozbudowane okno instalacji.
Aby sprawdzić zrzuty ekranu, przewiń do sekcji Zrzut ekranu #N na karcie Plik manifestu.
Testowanie rejestracji modułu obsługi protokołu URL
Aplikacje PWA mogą obsługiwać linki, które korzystają z określonego protokołu, aby zapewnić bardziej zintegrowane działanie. Aby dowiedzieć się, jak utworzyć moduł obsługi, zapoznaj się z artykułem Rejestrowanie modułu obsługi protokołu URL na potrzeby PWA.
Aby przetestować swój moduł obsługi:
- Na stronie docelowej PWA otwórz Narzędzia deweloperskie. Zapoznaj się na przykład z tą demonstracją PWA.
- Na stronie demonstracyjnej zainstaluj PWA, a po zakończeniu instalacji ponownie załaduj aplikację. 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 być testowany przez moduł obsługi, i kliknij Testuj protokół.
W tym przykładzie może on przetwarzać wartości americano,chaiilatte-macchiato. - Gdy Chrome zapyta, czy może otworzyć aplikację, potwierdź to, 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 przetwarzanie linku przez moduł obsługi zakończy się powodzeniem, w aplikacji pojawi się obraz filiżanki z kawą.
Skrypty service worker
Skrypty service worker to podstawowa technologia przyszłej platformy internetowej. To skrypty, które przeglądarka uruchamia w tle, oddzielnie 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 funkcje offline.
Powiązane przewodniki:
Karta Workery usługi na panelu Aplikacja to główne miejsce w Narzędziach deweloperskich, w którym można sprawdzać i debugować workery usługi.
- Jeśli na otwartej stronie jest zainstalowany serwis worker, zobaczysz go na tej karcie. Na przykład na powyższym zrzucie ekranu widać, że w ramach
https://airhorner.com/jest zainstalowany serwis worker. 
Offline – przełącza Narzędzia deweloperskie w tryb offline. Jest to równoznaczne z trybem offline dostępnym w panelu Sieć lub opcją Go offlinew Menu poleceń.- Pole wyboru
Zaktualizuj przy ponownym załadowaniu wymusza aktualizację usługi po każdym wczytaniu strony. 
Obejście dla sieci pozwala pominąć usługę workera i zmusza przeglądarkę do korzystania z sieci w celu uzyskania żądanych zasobów.- Link Żądania sieci przenosi Cię do panelu Sieć z listą przechwyconych żądań związanych z usługą (filtr
is:service-worker-intercepted). - Link Zaktualizuj umożliwia jednorazowe zaktualizowanie określonego pracownika usługi.
- Przycisk Push emuluje powiadomienie push bez ładunku (zwane też tickle).
- Przycisk Synchronizuj emuluje zdarzenie synchronizacji w tle.
- Link Wyrejestruj służy do wyrejestrowania wskazanego skryptu service worker. Aby dowiedzieć się, jak anulować rejestrację usługi workera i wyczyścić pamięć podręczną i pamięć podręczną za pomocą jednego przycisku, przeczytaj artykuł Wyczyszczenie pamięci.
- Wiersz Źródło informuje, kiedy zainstalowano obecnie działającego pracownika usługi. Link to jest nazwą pliku źródłowego usługi. Kliknięcie linku spowoduje przejście do źródła pracownika obsługi klienta.
- W wierszu Stan podany jest stan skryptu service worker. Liczba na tym wierszu (
#16na zrzucie ekranu) wskazuje, ile razy usługa została zaktualizowana. Jeśli włączysz
Aktualizuj po ponownym załadowaniu, zauważysz, że liczba rośnie po każdym wczytaniu strony.
Obok stanu zobaczysz link start (jeśli usługa robocza jest zatrzymana) lub link stop (jeśli usługa robocza jest uruchomiona). Service workery są zaprojektowane tak, aby przeglądarka mogła je w dowolnym momencie zatrzymać i uruchomić. Możesz to zasymulować, wyraźnie zamykając instancję roboczą usługi za pomocą linku stop. Zatrzymanie pracownika usługi to świetny sposób na przetestowanie, jak zachowuje się Twój kod, gdy pracownik usługi zostanie ponownie uruchomiony. Często ujawnia błędy spowodowane błędnymi założeniami dotyczącymi trwałego stanu globalnego. - Wiersz Klienci wskazuje pochodzenie, do którego jest ograniczony pracownik usługi. Przycisk fokusowania jest przydatny głównie wtedy, gdy masz zarejestrowanych wielu pracowników usługi. Jeśli klikniesz przycisk wyśrodkowania obok service workera działającego na innej karcie, Chrome wyśrodkuje tę kartę.
Tabela Cykl aktualizacji zawiera informacje o działaniach wykonywanych przez serwis workera i czasie ich trwania, np. o instalowaniu, oczekiwaniu i aktywowaniu. Aby zobaczyć dokładną sygnaturę czasową każdej aktywności, kliknij przyciski
Rozwiń.
Więcej informacji znajdziesz w artykule Cykl życia usługi.
Jeśli instancja robocza usługi powoduje błędy, na karcie Instancje robocze usługi pojawi się ikona 
Błąd z liczbą błędów obok wiersza Źródło.
Link z numerem przeniesie Cię do konsoli ze wszystkimi zarejestrowanymi błędami.
Aby zobaczyć informacje o wszystkich usługach, u dołu karty Usługa kliknij Zobacz wszystkie rejestracje. Ten link prowadzi do chrome://serviceworker-internals/?devtools, gdzie możesz dalej debugować usługi.
Pamięci podręczne skryptów 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 (elementu 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ć tej zmiany. Załaduj ponownie stronę, aby zobaczyć pamięć podręczną.
Jeśli masz otwarte co najmniej 2 poziomy pamięci podręcznej, zobaczysz je w menu Pamięć podręczna.
Wykorzystanie limitu
Niektóre odpowiedzi na karcie Pamięć podręczna mogą zostać oznaczone jako „nieprzejrzyste”. Dotyczy to odpowiedzi pobranej z innego źródła, np. z CDN lub zdalnego interfejsu API, gdy CORS nie jest włączony.
Aby uniknąć wycieku informacji z różnych domen, do rozmiaru nieprzezroczystej odpowiedzi dodawana jest znaczna ilość danych, która jest używana do obliczania limitów ilości miejsca na dane (czyli do sprawdzania, czy wyjątek QuotaExceeded został wygenerowany) i zgłaszana przez interfejs navigator.storage API.
Szczegóły tego wypełniania różnią się w zależności od przeglądarki, ale w przypadku Google Chrome oznacza to, że minimalny rozmiar, jaki pojedyncza zaszyfrowana odpowiedź w pamięci podręcznej może zająć w ogólnej ilości miejsca na dane, to około 7 megabajtów. Pamiętaj o tym, gdy określasz, ile zasobów nieprzezroczystych chcesz przechowywać w pamięci podręcznej, ponieważ możesz przekroczyć limity dotyczące ilości miejsca na dane znacznie szybciej, niż się spodziewasz, biorąc pod uwagę rzeczywisty rozmiar zasobów nieprzezroczystych.
Powiązane przewodniki:
- Stack Overflow: Jakie ograniczenia dotyczą nieprzejrzystych odpowiedzi?
- Workbox: informacje o limitach miejsca na dane
Wyczyść magazyn
Karta Wyczyść pamięć jest bardzo przydatna podczas tworzenia progresywnych aplikacji internetowych. Ta karta umożliwia wyrejestrowanie usług w tle i wyczyszczenie wszystkich pamięci podręcznych oraz pamięci masowej za pomocą jednego przycisku. Aby dowiedzieć się więcej, zapoznaj się z sekcją poniżej.
Powiązane przewodniki:
Inne przewodniki dotyczące panelu aplikacji
Aby dowiedzieć się więcej o innych panelach w sekcji Aplikacja, zapoznaj się z przewodnikami poniżej.
Powiązane przewodniki: