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. PWAs mają podobne możliwości jak aplikacje na iOS, Androida i komputera. Są to:
- stabilnie działać nawet w niestabilnych warunkach sieciowych;
- Instalowane w celu uruchamiania interfejsów 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ś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.
Podsumowanie
- Aby sprawdzić manifest aplikacji internetowej, otwórz kartę Plik manifestu.
- Karta Service Workers zawiera wiele 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ęczną usługi możesz wyświetlić 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 z ekranu głównego 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 internetowej. 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ótu.
- 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 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 do pliku manifestu opis i zbiór zrzutów ekranu, aplikacja będzie miała 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ą wersją demonstracyjną 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 DevTools 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 powoduje, że usługa workera jest aktualizowana przy każdym wczytaniu strony. - Pole wyboru
Obejście dla sieci pozwala pominąć usługę workera i zmusza przeglądarkę do korzystania z sieci w przypadku żądanych zasobów. - Link Żądania sieciowe przenosi Cię do panelu Sieć z listą przechwyconych żądań związanych z usługą działającą w tle (filtr
is:service-worker-intercepted). - Link Zaktualizuj umożliwia jednorazowe zaktualizowanie określonego pracownika obsł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ę service workera i wyczyścić pamięć podręczną i podręczną z zawartością, wystarczy kliknąć jeden przycisk.
- Wiersz Źródło informuje, kiedy został zainstalowany obecnie działający serwis worker. 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 podaje pochodzenie, do którego jest ograniczony serwis worker. Przycisk fokusowania jest przydatny głównie wtedy, gdy masz zarejestrowanych wielu usługowych pracowników. 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 jakiekolwiek 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 wykorzystywana do obliczania limitów ilości miejsca na dane (czyli do sprawdzania, czy wyjątek QuotaExceededzostał 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 ma w przyczynie do łącznego wykorzystania pamięci, wynosi 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ć limit 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 pozostałych panelach w sekcji Aplikacja, zapoznaj się z przewodnikami poniżej.
Powiązane przewodniki: