Debugowanie usług w tle

Kayce Basques

Sofia Emelianova

Sekcja Usługi w tle w Narzędziach deweloperskich w Chrome to zbiór narzędzi do interfejsów API JavaScript, które umożliwiają witrynie wysyłanie i odbieranie aktualizacji nawet wtedy, gdy użytkownik nie ma otwartej witryny. Usługa w tle jest funkcjonalnie podobna do procesu w tle.

Sekcja Usługi w tle umożliwia debugowanie tych usług w tle:

• Pobieranie w tle
• Synchronizacja w tle
• Powiadomienia
• Ładowanie spekulacyjne
• Wiadomości push

Narzędzia deweloperskie w Chrome mogą rejestrować zdarzenia pobierania, synchronizacji i powiadomień przez 3 dni, nawet gdy nie są otwarte. Pomoże Ci to upewnić się, że zdarzenia są wysyłane i odbierane zgodnie z oczekiwaniami.

Oprócz zdarzeń usługi działającej w tle Narzędzia deweloperskie mogą:

• Wyświetlać raporty, które Chrome już wysłał lub zamierza wysłać za pomocą interfejsu Reporting API.
• Umożliwia debugowanie i testowanie pamięci podręcznej stanu strony internetowej jednym kliknięciem.

Pobieranie w tle

Interfejs Background Fetch API umożliwia service workerowi niezawodne pobieranie dużych zasobów, takich jak filmy czy podcasty, w ramach usługi działającej w tle. Aby rejestrować zdarzenia pobierania w tle przez 3 dni, nawet gdy narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie na stronie, która korzysta z interfejsu Background Fetch API.

2. Kliknij kolejno Aplikacja > Usługi w tle > Pobieranie w tle i kliknij  Nagrywaj.

   

3. Na stronie wywołaj aktywność pobierania w tle. Narzędzia deweloperskie rejestrują zdarzenia w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Synchronizacja w tle

Background Sync API umożliwia usłudze Service Worker działającej w trybie offline wysyłanie danych na serwer po ponownym nawiązaniu stabilnego połączenia z internetem. Aby rejestrować zdarzenia synchronizacji w tle przez 3 dni, nawet gdy narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie, np. na tej stronie demonstracyjnej.

2. Kliknij kolejno Aplikacja > Usługi w tle > Synchronizacja w tle i kliknij  Nagrywaj.

   

3. Na stronie wersji demonstracyjnej kliknij Register background sync (Zarejestruj synchronizację w tle), aby zarejestrować odpowiedni proces roboczy usługi, a gdy pojawi się prośba, kliknij Allow (Zezwól).

   Rejestracja skryptu service worker to działanie synchronizacji w tle. Narzędzia deweloperskie rejestrują zdarzenia w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

(Eksperymentalne) Łagodzenie śledzenia przekierowań

Eksperyment Bounce tracking mitigations w Chrome umożliwia identyfikowanie i usuwanie stanu witryn, które wydają się śledzić użytkowników w witrynach za pomocą techniki śledzenia przez przekierowanie. Możesz ręcznie wymusić środki ograniczające śledzenie i wyświetlić listę witryn, których stany zostały usunięte.

Aby wymusić łagodzenie śledzenia:

1. Blokuj pliki cookie innych firm w Chrome. Otwórz > Ustawienia > Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Blokuj pliki cookie innych firm i włącz tę opcję.
2. W sekcji chrome://flags ustaw eksperyment Łagodzenie śledzenia przekierowań na Włączone z usuwaniem.
3. Otwórz Narzędzia deweloperskie i wybierz Aplikacja > Usługi w tle > Ograniczenia śledzenia odbić.
4. Kliknij link przekierowujący i poczekaj (10 sekund), aż Chrome zarejestruje przekierowanie. Karta Problemy zawiera ostrzeżenie o nadchodzącym usunięciu stanu.
5. Kliknij Wymuś uruchomienie, aby natychmiast usunąć stan.

Powiadomienia

Gdy service worker otrzyma komunikat push z serwera, używa interfejsu Notifications API, aby wyświetlić dane użytkownikowi. Aby rejestrować powiadomienia przez 3 dni, nawet gdy Narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie

2. Kliknij kolejno Aplikacja > Usługi w tle > Powiadomienia i kliknij  Nagrywaj.

   

3. Kliknij Zaplanuj powiadomienie i Zezwól, gdy pojawi się prośba.

4. Poczekaj na pojawienie się powiadomienia. Narzędzia deweloperskie rejestrują zdarzenia powiadomień w tabeli.

   

5. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

6. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Ładowanie spekulacyjne

Ładowanie spekulacyjne umożliwia niemal natychmiastowe ładowanie strony na podstawie określonych przez Ciebie reguł spekulacyjnych. Dzięki temu Twoja witryna może wstępnie pobierać i renderować strony, do których użytkownicy najczęściej przechodzą.

Wstępne pobieranie polega na pobraniu zasobu z wyprzedzeniem, a wstępne renderowanie to krok dalej – polega na renderowaniu całej strony w ukrytym procesie renderowania w tle.

Ładowanie spekulacyjne możesz debugować w sekcji Aplikacja > Usługi w tle > Ładowanie spekulacyjne. Sekcja zawiera 3 widoki:

• Ładowanie spekulacyjne Zawiera stan spekulacyjny bieżącej strony, bieżący adres URL, strony, które bieżąca strona próbuje załadować spekulacyjnie, oraz ich stany.
• Reguły Zawiera zestawy reguł na bieżącej stronie w panelu Elementy oraz ogólny stan spekulacji.
• Spekulacje Zawiera tabelę z informacjami o próbach spekulacyjnego wczytywania i ich stanach. Jeśli próba się nie powiodła, możesz kliknąć ją w tabeli, aby wyświetlić szczegółowe informacje i przyczynę niepowodzenia.

Spróbuj debugować ładowanie spekulacyjne na tej stronie demonstracyjnej wstępnego renderowania:

1. Otwórz Narzędzia deweloperskie na stronie i kliknij Aplikacja > Usługi w tle > Spekulacyjne wczytywanie. Jeśli nie widzisz żadnych spekulacyjnych ładowań zainicjowanych przez stronę, załaduj ją ponownie.

   

2. Strona początkowa wersji demonstracyjnej wstępnie renderuje 2 strony, a w przypadku 1 strony nie udaje się jej tego zrobić. Kliknij Wyświetl wszystkie spekulacje.

3. W sekcji Spekulacje wybierz spekulację ze stanem Niepowodzenie, aby wyświetlić sekcję Przyczyna niepowodzenia ze szczegółowymi informacjami u dołu.

   

   W tym przypadku renderowanie wstępne nie powiodło się, ponieważ w witrynie nie ma strony /next3.html.

4. Otwórz sekcję Reguły i kliknij Stan, aby wyświetlić zestaw reguł u dołu. Kliknięcie linku Zbiór reguł powoduje przejście do panelu Elementy i wyświetlenie miejsca, w którym zdefiniowano regułę spekulacyjną.

   

Szczegółowe instrukcje znajdziesz w artykule Debugowanie reguł spekulacyjnych.

Komunikaty push

Aby wyświetlić użytkownikowi powiadomienie push, skrypt service worker musi najpierw użyć interfejsu Push Message API, aby otrzymać dane z serwera. Gdy service worker jest gotowy do wyświetlenia powiadomienia, używa interfejsu Notifications API. Aby rejestrować wiadomości push przez 3 dni, nawet gdy narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie, np. na tej stronie demonstracyjnej.

2. Kliknij kolejno Aplikacja > Usługi działające w tle > Wiadomości push i kliknij  Nagrywaj.

   

3. Na stronie demonstracyjnej włącz Włącz powiadomienia push, a gdy pojawi się odpowiedni komunikat, kliknij Zezwól. Następnie wpisz wiadomość i wyślij ją. Narzędzia deweloperskie rejestrują zdarzenia powiadomień push w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Interfejs API do raportowania

Niektóre błędy występują tylko w środowisku produkcyjnym. Nie widzisz ich lokalnie ani podczas programowania, ponieważ prawdziwi użytkownicy, sieci i urządzenia zmieniają zasady gry.

Załóżmy na przykład, że nowa witryna korzysta z oprogramowania innej firmy, które używa komponentu document.write() do wczytywania krytycznych skryptów. Nowi użytkownicy z całego świata otwierają Twoją witrynę, ale mogą mieć wolniejsze połączenia niż te, które były używane podczas testów. Nie wiesz o tym, ale Twoja witryna zaczyna działać nieprawidłowo, ponieważ Chrome interweniuje document.write() w przypadku wolnych sieci. Możesz też śledzić wycofane lub wkrótce wycofane interfejsy API, których może używać Twoja baza kodu.

Interfejs Reporting API pomaga monitorować wycofane wywołania interfejsu API, naruszenia bezpieczeństwa na stronie i inne kwestie. Raportowanie możesz skonfigurować zgodnie z opisem w artykule Monitorowanie aplikacji internetowej za pomocą interfejsu Reporting API.

Aby wyświetlić raporty wygenerowane przez stronę:

1. Otwórz chrome://flags/#enable-experimental-web-platform-features, ustaw Eksperymentalne funkcje platformy internetowej na Włączone i uruchom ponownie Chrome.

2. Otwórz Narzędzia deweloperskie i kliknij Aplikacja > Usługi działające w tle > Interfejs Reporting API.

   

Karta Interfejs API do raportowania jest podzielona na 3 części:

• Tabela Raporty z tymi informacjami o każdym raporcie:
  • Adres URL, który spowodował wygenerowanie raportu
  • Typ naruszenia
  • Zgłoś stan
  • Punkt końcowy miejsca docelowego
  • Sygnatura czasowa Generated at
  • Zgłoś treść
• Sekcja podglądu Treść raportu. Aby wyświetlić podgląd treści raportu, kliknij go w tabeli raportów.
• Sekcja Punkty końcowe z omówieniem wszystkich punktów końcowych skonfigurowanych w nagłówku Reporting-Endpoints.

Stan raportu

W kolumnie Stan możesz sprawdzić, czy Chrome wysłał raport, czy zamierza go wysłać, czy też nie udało mu się tego zrobić.

Raporty są po pewnym czasie usuwane, niezależnie od tego, czy zostały wysłane.