Interfejs API stanu strony internetowej notRestoredReasons

Dowiedz się, które elementy nawigacyjne uniemożliwiają korzystanie z pamięci podręcznej stanu strony internetowej i dlaczego.

Chris Mills

Właściwość notRestoredReasons dodana do klasy PerformanceNavigationTiming podaje informacje o tym, czy ramki znajdujące się w dokumencie zostały zablokowane podczas nawigacji, oraz o przyczynach blokowania użycia bfcache. Programiści mogą na podstawie tych informacji zidentyfikować strony wymagające aktualizacji, aby zapewnić ich zgodność z pamięci podręcznej stanu strony internetowej, a tym samym poprawić wydajność witryny.

Obecny stan,

Wypróbuj interfejs API notRestoredReasons dla bfcache

Od wersji 109 interfejs API notRestoredReasons bfcache jest dostępny w Chromium w ramach próbnej wersji origin. Aktualne informacje o harmonogramie udostępniania tej funkcji znajdziesz na stronie funkcji ChromeStatus.com (daty wydania nowych wersji znajdziesz w harmonogramie Chrome).

Aby wypróbować interfejs API notRestoredReasons bfcache, zarejestruj się w wersji próbnej origin i użyj go w swoich eksperymentach. Aby dowiedzieć się, jak używać tokena po rejestracji, zapoznaj się z sekcją Korzystanie z testowania origin.

Pojęcia i zastosowanie

Nowoczesne przeglądarki oferują funkcję optymalizacji nawigacji po historii o nazwie pamięć podręczna stanu strony internetowej (bfcache). Umożliwia to natychmiastowe wczytywanie strony, gdy użytkownik wraca na wcześniej odwiedzoną stronę. Strony mogą zostać zablokowane przed wchodzeniem do pamięci podręcznej lub zostać trwale usunięte z pamięci podręcznej stanu strony internetowej z różnych powodów, niektórych wymagają specyfikacji, a inne tylko z implementacji przeglądarek.

Wcześniej deweloperzy nie mogli dowiedzieć się, dlaczego ich strony zostały zablokowane w pamięci podręcznej stanu strony internetowej, chociaż przeprowadzano to testy w narzędziach deweloperskich w Chrome. Aby umożliwić monitorowanie w polu, klasa PerformanceNavigationTiming została poszerzona o właściwość notRestoredReasons. Zwraca obiekt zawierający powiązane informacje na temat wszystkich ramek znajdujących się w dokumencie:

• Szczegóły, na przykład ramki id i name, które pomagają zidentyfikować je w kodzie HTML.
• Czy zablokowano im możliwość korzystania z pamięci podręcznej stanu strony internetowej.

• Powody blokowania dostępu do pamięci podręcznej stanu strony internetowej.

  Dzięki temu deweloperzy mogą zadbać o zgodność tych stron z pamięci podręcznej stanu strony internetowej i w ten sposób zwiększyć wydajność witryny.

Przykłady

Instancję PerformanceNavigationTiming można pobrać z funkcji takich jak Performance.getEntriesByType() i PerformanceObserver.

Możesz na przykład wywołać tę funkcję, aby zwrócić wszystkie obiekty PerformanceNavigationTiming znajdujące się obecnie na osi czasu wydajności i zapisać ich notRestoredReasons:

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

W przypadku nawigacji w historii właściwość PerformanceNavigationTiming.notRestoredReasons zwraca obiekt o takiej strukturze, która odzwierciedla zablokowany stan ramki najwyższego poziomu:

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

Oto ich właściwości:

blocked

Wartość logiczna określająca, czy dana strona jest zablokowana dla korzystania z pamięci podręcznej stanu strony internetowej (true) czy nie (false).

children

Tablica obiektów reprezentujących zablokowany stan dowolnych klatek umieszczonych w ramce najwyższego poziomu. Każdy obiekt ma taką samą strukturę jak obiekt nadrzędny – dzięki temu w obiekcie można rekurencyjnie reprezentować dowolną liczbę poziomów osadzonych ramek. Jeśli ramka nie ma elementów podrzędnych, tablica będzie pusta.

id

Ciąg reprezentujący wartość atrybutu id ramki (np. <iframe id="foo" src="...">). Jeśli ramka nie ma parametru id, wartość będzie pustym ciągiem znaków.

name

Ciąg reprezentujący wartość atrybutu name ramki (np. <iframe name="bar" src="...">). Jeśli ramka nie ma parametru name, wartość będzie pustym ciągiem znaków.

reasons

Tablica ciągów znaków reprezentujących powód, dla którego dana strona została zablokowana z pamięci podręcznej stanu strony internetowej. Zablokowanie może mieć wiele różnych przyczyn. Więcej informacji znajdziesz w sekcji Przyczyny blokowania poniżej.

src

Ciąg reprezentujący ścieżkę do źródła ramki (np. <iframe src="b.html">). Jeśli ramka nie ma parametru src, wartość będzie pustym ciągiem znaków.

url

Ciąg znaków reprezentujący adres URL wyświetlanej strony.

W przypadku obiektów PerformanceNavigationTiming, które nie reprezentują nawigacji w historii, właściwość notRestoredReasons zwraca wartość null. Przydaje się to do określania, czy pamięć podręczna (bfcache) nie ma zastosowania w przypadku konkretnej nawigacji, a czy adres notRestoredReasons nie jest obsługiwany, w takim przypadku zwraca wartość undefined.

Zgłaszanie blokowania pamięci podręcznej stanu strony internetowej w ramkach z tej samej domeny

Gdy na stronie są umieszczone ramki z tego samego pochodzenia, zwrócona wartość notRestoredReasons będzie zawierać obiekt we właściwości children, który odpowiada zablokowaniu stanu każdej umieszczonej ramki.

Na przykład:

{
  blocked: false,
  children: [
    { url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
    { url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Zgłaszanie blokowania pamięci podręcznej stanu strony internetowej w ramkach z innych domen

Gdy strona zawiera ramki z innych domen, ograniczamy ilość udostępnianych informacji na ich temat, aby uniknąć wycieku informacji z tych domen. Uwzględniamy tylko informacje, które strona zewnętrzna już zna i czy poddrzewo z innych domen blokuje pamięć podręczną (bfcache), czy nie. Nie uwzględniamy żadnych przyczyn blokowania ani informacji o niższych poziomach drzewa podrzędnego (nawet jeśli niektóre podpoziomy są tego samego pochodzenia).

Na przykład:

{
  blocked: false,
  children: [
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
    /* cross-origin frame */
    { url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Jeśli wiele ramek z innych domen ma przyczyny blokowania, losowo wybierzemy jeden element iframe z innych domen i zgłosimy, czy został on zablokowany z pamięci podręcznej stanu strony internetowej. W przypadku pozostałych klatek raportujemy null dla wartości blocked. Dzięki temu nieuczciwe podmioty nie mogą wywnioskować informacji o stanie użytkownika w witrynach, nad którymi nie mają kontroli. W tym celu umieść na stronie wiele ramek innych firm i porównaj informacje dotyczące blokowania w każdej z nich.

{
  blocked: false,
  children: [
    /* cross-origin frames */
    {url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
    {url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
    {url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
  ]
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Zapoznaj się z sekcją Bezpieczeństwo i prywatność w wyjaśnieniu, aby uzyskać więcej informacji o kwestiach związanych z bezpieczeństwem i prywatnością.

Przyczyny blokowania

Jak wspomnieliśmy wcześniej, blokowanie może mieć wiele różnych powodów. Przygotowaliśmy przydatny arkusz kalkulacyjny, w którym znajdziesz wszystkie ciągi znaków i wyjaśniliśmy, co oznaczają.

Istnieje kilka głównych kategorii, na które warto zwrócić uwagę:

• Circumstantial: odnosi się do powodów blokowania, które nie są bezpośrednio związane z kodem strony dewelopera. Na przykład powiązany komponent uległ awarii, coś poszło nie tak podczas procesu wczytywania, strona jest w stanie tymczasowym, którego nie można buforować, pamięć podręczna jest wyłączona z powodu niewystarczającej ilości pamięci lub skrypt service worker robi na stronie coś, co uniemożliwia jej przechowywanie w pamięci podręcznej.
• Extensions: wiadomości związane z rozszerzeniami mogą być wyświetlane z kilku różnych powodów. Zasadniczo w przypadku opcji „Rozszerzenia” łączymy różne powody. Powody blokowania związane z rozszerzeniami podaliśmy celowo, ponieważ nie chcemy ujawniać zbyt wielu informacji o tym, jakie rozszerzenia zainstalował użytkownik, które są aktywne na stronie, co robi itp.
• PageSupportNeeded: kod dewelopera korzysta z funkcji platformy internetowej, która w innym przypadku nie blokuje buforowania bfcache, ale obecnie działa w takim stanie. Na przykład strona ma obecnie BroadcastChannel z zarejestrowanymi detektorami lub otwarte połączenie IndexedDB. Strona ma też zarejestrowany moduł obsługi unload, który obecnie nie pozwala na używanie pamięci podręcznej stanu strony internetowej w niektórych przeglądarkach.
• SupportPending: kod dewelopera korzysta z funkcji platformy internetowej, która wyklucza stronę z pamięci podręcznej stanu strony internetowej, np. Web Serial API, Web Authentication API, File System Access API lub Media Session API. lub strona używa parametru Cache-Control: no-store, co obecnie uniemożliwia korzystanie z pamięci podręcznej stanu strony internetowej w niektórych przeglądarkach. Ta kategoria służy też do zgłaszania poza stroną narzędzia blokującego pamięć podręczną, takich jak czytnik ekranu lub menedżer haseł w Chrome.

Prześlij opinię

Zespół Chromium chce poznać Twoją opinię na temat interfejsu API notRestoredReasons bfcache.

Opowiedz nam o projekcie interfejsu API

Czy interfejs API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, które potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz na temat modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w odpowiednim [repozytorium GitHub][opinia] lub podziel się uwagami na temat istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd w implementacji Chromium? A może implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje dotyczące odtwarzania oraz określ komponent jako UI > Browser > Navigation > bfcache. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.

Pokaż obsługę interfejsu API

Czy zamierzasz używać interfejsu API notRestoredReasons bfcache? Twoja publiczna pomoc pomaga zespołowi Chromium priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta na adres @ChromiumDev, używając hashtagu #NotRestoredReasons, i daj nam znać, gdzie i do czego go używasz.

Przydatne linki

• Pamięć podręczna stanu strony internetowej
• Wyjaśnienie publiczne
• Błąd śledzenia w Chromium
• Testowanie origin interfejsu API NotRestoredReason dla interfejsu API stanu cofania/przekierowania
• Strona funkcji ChromeStatus.com
• Zamiar eksperymentu