W panelu Aplikacja możesz sprawdzać, modyfikować i debugować pliki manifestu aplikacji internetowej, skrypty service worker oraz pamięć podręczną skryptów service worker.
Progresywne aplikacje internetowe (PWA) to nowoczesne, wysokiej jakości aplikacje stworzone w technologii internetowej. Progresywne aplikacje internetowe mają podobne możliwości do aplikacji na iOS i Androida oraz aplikacji komputerowych. Są to:
- Niezawodny nawet w niestabilnych warunkach sieci.
- 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;
W tym przewodniku omawiamy tylko funkcje progresywnej aplikacji internetowej dostępne 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 Skrypty service worker służy do wykonywania wielu zadań związanych z skryptami service worker, takich jak wyrejestrowanie lub aktualizowanie usługi, emulowanie zdarzeń push, przejście do trybu offline lub zatrzymywanie skryptu service worker.
- Pamięć podręczna service workera jest widoczna na karcie Pamięć podręczna.
- Możesz anulować rejestrację service workera i wyczyścić wszystkie dane i pamięć podręczną za pomocą jednego przycisku na karcie Wyczyść pamięć podręczną.
Plik manifestu 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 sposób wyświetlania aplikacji na ekranie głównym, dokąd należy kierować użytkownika podczas uruchamiania z ekranu głównego i jak wygląda aplikacja po uruchomieniu.
Po skonfigurowaniu pliku manifestu możesz go sprawdzić na karcie Plik manifestu w panelu Aplikacja.
- Aby zobaczyć źródło pliku manifestu, kliknij link pod etykietą pliku manifestu aplikacji (
manifest.webmanifestna zrzucie ekranu powyżej). - 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.
- Zestaw sekcji Skrót #N zawiera informacje o wszystkich obiektach skrótów.
- W sekcji Zrzut ekranu N znajdują się zrzuty ekranu z bardziej rozbudowanym interfejsem instalacji aplikacji.
Dodatkowo, jeśli Narzędzia deweloperskie napotkają błąd, na przykład ikonę, której nie można wczytać, na karcie Plik manifestu pojawi się sekcja Możliwość instalacji zawierająca opis błędu.
Wyświetlanie i sprawdzanie ikon z możliwością maskowania
Sekcja Ikony na karcie Plik manifestu zawiera wszystkie ikony aplikacji. W tej sekcji możesz też sprawdzić bezpieczne obszary ikon z maskowaniem, czyli formatu ikon, które dostosowują 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ć 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 są w trybie urządzenia. Jeśli jednak uda Ci się dodać aplikację na komputerze, będzie ona też działać na urządzeniach mobilnych.
Jeśli chcesz przetestować działanie interfejsu mobilnego, możesz podłączyć prawdziwe urządzenie mobilne do Narzędzi deweloperskich za pomocą zdalnego debugowania. 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 pozwalają zapewnić szybki dostęp do kilku typowych działań, które użytkownicy często potrzebują.
Aby sprawdzić skróty zdefiniowane w pliku manifestu, przewiń do sekcji Skrót #N na karcie Plik manifestu.
Sprawdzanie zrzutów ekranu pod kątem bogatszego interfejsu instalacji
Gdy dodasz opis i zestaw zrzutów ekranu do pliku manifestu, okno instalacji aplikacji będzie bardziej szczegółowe.
Aby przejrzeć zrzuty ekranu, przewiń do sekcji Zrzut ekranu #N na karcie Plik manifestu.
Testowanie rejestracji modułu obsługi protokołu URL
Aplikacje PWA obsługują linki, które korzystają z określonego protokołu, co zapewnia bardziej zintegrowaną obsługę. Aby dowiedzieć się, jak utworzyć moduł obsługi, przeczytaj artykuł Rejestracja modułu obsługi protokołu URL na potrzeby aplikacji PWA.
Aby przetestować moduł obsługi:
- Na stronie docelowej PWA otwórz Narzędzia deweloperskie. Zobacz na przykład tę wersję demonstracyjną PWA.
- Na stronie demonstracyjnej zainstaluj PWA i po zakończeniu instalacji ponownie załaduj aplikację. Przeglądarka zarejestrowała teraz 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 kluczowe technologie przyszłości 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, synchronizowanie w tle czy funkcje offline.
Powiązane przewodniki:
Karta Skrypty service worker w panelu Aplikacja to główne miejsce w Narzędziach deweloperskich. Umożliwia ono sprawdzanie i debugowanie mechanizmów Service Worker.
- Jeśli skrypt service worker jest zainstalowany na aktualnie otwartej stronie, zobaczysz go na tej karcie. Na przykład na powyższym zrzucie ekranu widać, że w ramach
https://airhorner.com/jest zainstalowany serwis worker. - Pole wyboru
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 powoduje, że usługa workera jest aktualizowana przy każdym wczytaniu strony. 
Zaznaczone pole wyboru Obejście dla sieci powoduje pominięcie skryptu service worker i wymuszenie na przeglądarce korzystania z sieci do pobrania żądanych zasobów.- Link Żądania sieciowe przenosi do panelu Sieć z listą przechwyconych żądań związanych z usługą pracującą w tle (filtr
is:service-worker-intercepted). - Link Aktualizuj przeprowadza jednorazową aktualizację określonego skryptu service worker.
- Przycisk Push emuluje powiadomienie push bez ładunku (zwane też tickle).
- Przycisk Synchronizuj emuluje zdarzenie synchronizacji w tle.
- Link Wyrejestruj powoduje wyrejestrowanie określonego 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.
- Linia Źródło informuje, kiedy zainstalowano obecnie działającego pracownika usługi. Link to nazwa pliku źródłowego skryptu service worker. Kliknięcie linku przeniesie Cię do źródła skryptu service worker.
- Wiersz Stan wskazuje stan skryptu service worker. Liczba w tym wierszu (
#16na zrzucie ekranu) wskazuje, ile razy został zaktualizowany skrypt service worker. Jeśli zaznaczysz pole wyboru
Aktualizuj po ponownym załadowaniu, liczba 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 jest uruchomiony). Skrypty service worker są zatrzymywane i uruchamiane przez przeglądarkę w dowolnym momencie. Symuluje to jawne zatrzymanie skryptu service worker za pomocą linku stop. Zatrzymanie mechanizmu Service Worker to świetny sposób na sprawdzenie, jak zachowuje się kod, gdy skrypt service worker uruchomi się ponownie. Często ujawnia błędy spowodowane błędnymi założeniami dotyczącymi trwałego stanu globalnego. - W wierszu Klienci podana jest domena, w której działa usługa. Przycisk fokusowania jest przydatny głównie wtedy, gdy masz zarejestrowanych wielu pracowników usługi. Jeśli klikniesz przycisk fokus obok skryptu service worker, który działa na innej karcie, Chrome skupia się na tej karcie.
Tabela Cykl aktualizacji zawiera działania skryptu service worker i czas, który upłynął, takie jak instalacja, oczekiwanie i aktywacja. Aby zobaczyć dokładną sygnaturę czasową każdej aktywności, 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 będzie widoczna ikona 
błędu z liczbą błędów obok wiersza Źródło.
Link z numerem spowoduje otwarcie konsoli ze wszystkimi zarejestrowanymi błędami.
Aby wyświetlić informacje o wszystkich skryptach service worker, kliknij Pokaż wszystkie rejestracje u dołu karty Skrypty service worker. Ten link prowadzi do strony chrome://serviceworker-internals/?devtools, na której możesz dodatkowo debugować mechanizmy Service Worker.
Pamięci podręczne skryptów service worker
Karta Pamięć podręczna zawiera listę tylko do odczytu zasobów buforowanych przy użyciu interfejsu Cache API (swojej instancji roboczej).
Pamiętaj, że gdy po raz pierwszy otworzysz pamięć podręczną i dodasz do niej zasób, narzędzia DevTools mogą nie wykryć tej zmiany. Załaduj ponownie stronę, aby zobaczyć pamięć podręczną.
Jeśli masz otwarte co najmniej dwie pamięci podręczne, zobaczysz je na liście poniżej menu Pamięć podręczna.
Wykorzystanie limitu
Niektóre odpowiedzi na karcie „Przechowywanie w pamięci podręcznej” 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 używanej do obliczania limitów kwoty miejsca na dane (czyli czy zostanie QuotaExceededwyjątek) i przekazywanej przez interfejs API navigator.storage, dodano znaczne wypełnienie.
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. Należy o tym pamiętać przy określaniu liczby nieprzejrzystych odpowiedzi, które chcesz przechowywać w pamięci podręcznej, ponieważ w oparciu o rzeczywisty rozmiar nieprzejrzystych zasobów możesz z łatwością przekroczyć limit miejsca na dane znacznie szybciej, niż się spodziewasz.
Powiązane przewodniki:
- Stack Overflow: jakie ograniczenia dotyczą nieprzezroczystych 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 i miejsc do przechowywania danych za pomocą jednego przycisku. Więcej informacji znajdziesz w sekcji poniżej.
Powiązane przewodniki:
Inne przewodniki po panelu aplikacji
Aby dowiedzieć się więcej o innych panelach w sekcji Aplikacja, zapoznaj się z przewodnikami poniżej.
Powiązane przewodniki: