0Pricing
HTML Academy · Lekcja

Strona zastępcza offline

Serwowanie zapisanej w pamięci podręcznej strony zastępczej, gdy użytkownik jest offline

Strona zastępcza offline to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Po co strona offline?

Gdy sieć jest niedostępna, service worker może wyświetlić niestandardową stronę zastępczą offline zamiast ogólnego błędu przeglądarki "brak internetu". Użytkownik widzi markę, przydatne informacje i dowolną zawartość z pamięci podręcznej — to znacznie lepsze rozwiązanie niż dinozaur Chromium lub smutna karta Firefoksa.

Buforowanie strony zastępczej

W zdarzeniu instalacji service workera należy wstępnie zbuforować stronę offline.html, aby była zawsze dostępna, nawet zanim użytkownik przejdzie do dowolnej strony bez połączenia. Przeglądarka zachowuje pamięć podręczną do czasu kolejnej zmiany pliku sw.js.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

Obsługa błędów

W zdarzeniu fetch należy najpierw spróbować nawiązać połączenie z siecią, a w razie niepowodzenia zwrócić zbuforowaną stronę offline.html. Ten wzorzec (najpierw sieć, potem zapasowa strona offline) to najprostszy przepis na PWA i sprawdza się w przypadku większości witryn z treścią.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

Sprawdzanie trybu navigate

Stronę offline.html należy zwracać tylko dla żądań nawigacji (ładowania strony najwyższego poziomu). W przypadku obrazów, skryptów i innych żądań zasobów podrzędnych należy pozwolić na ich niepowodzenie albo użyć osobnych kopii z pamięci podręcznej — wyświetlenie strony HTML zamiast brakującego obrazu powoduje jeszcze poważniejsze uszkodzenie strony.

Projektowanie strony offline

Strona offline powinna być lekka: należy użyć minimalnego CSS i unikać zewnętrznych zasobów, chyba że również są buforowane. Warto wyświetlić logo marki, przyjazny komunikat ("Jesteś offline — zawartość zostanie wczytana po ponownym połączeniu") oraz przycisk Ponów próbę wywołujący location.reload().

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

Buforowanie odwiedzonych stron

Oprócz pojedynczej strony offline można buforować pomyślnie wczytane strony za pomocą strategii stale-while-revalidate lub buforowania w czasie działania. Powrót do niedawno wyświetlanego artykułu bez połączenia nadal pokaże jego treść; problem wystąpi tylko w przypadku stron, których użytkownik wcześniej nie odwiedził.

Aktualizowanie wersji pamięci podręcznej

Po zaktualizowaniu offline.html należy zmienić stałą CACHE w sw.js (CACHE = "v2"). W zdarzeniu activate należy usunąć stare pamięci podręczne: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Nieaktualne strony offline są mylące.

Testowanie trybu offline

Panel Network w Chrome DevTools → ograniczenie przepustowości "Offline" symuluje brak sieci. Należy poruszać się po aplikacji i sprawdzić, czy strona offline pojawia się dla nieodwiedzonych tras oraz czy wcześniej odwiedzone strony nadal wczytują się z pamięci podręcznej.

Błędy zasobów podrzędnych

Jeśli sama strona offline odwołuje się do niezbuforowanego pliku CSS, plik ten nie wczyta się bez połączenia, a strona zostanie wyświetlona bez stylów. W programie obsługi instalacji należy wstępnie zbuforować każdy zasób potrzebny stronie offline (CSS, logo, czcionki).

Poza statycznym trybem offline

Zaawansowane aplikacje PWA kolejkowują działania użytkownika podczas braku połączenia za pomocą Background Sync, ponawiają je po przywróceniu łączności i w międzyczasie wyświetlają optymistyczny interfejs. Biblioteka Workbox udostępnia gotowe rozwiązania dla tych wzorców, ale można też zaimplementować je samodzielnie — wymaga to jednak więcej pracy.

Przywrócenie połączenia

Na stronie offline można nasłuchiwać zdarzenia online, aby wykryć ponowne połączenie: window.addEventListener("online", () => location.reload()). Strona przeładuje się natychmiast po przywróceniu łączności — bez konieczności naciskania przez użytkownika przycisku Ponów próbę.

Nie wprowadzaj użytkownika w błąd

Przyciski "Spróbuj ponownie" powinny rzeczywiście ponawiać próbę — należy wywołać location.reload(), a nie wyświetlać fałszywy wskaźnik ładowania, który niczego nie robi. Uczciwy interfejs buduje zaufanie użytkownika, a wprowadzające w błąd strony offline szybko podważają wiarygodność, gdy użytkownik to zauważy.

Sprawdzenie wiedzy

Dlaczego strona offline.html powinna być zwracana tylko dla żądań nawigacji (e.request.mode === "navigate"), a nie dla wszystkich nieudanych żądań?

Podsumowanie

Service workery mogą wyświetlać niestandardową stronę offline zamiast ogólnego błędu przeglądarki. Należy wstępnie zbuforować offline.html podczas install, zwracać ją w fetch po nieudanej próbie połączenia z siecią, gdy żądanie dotyczy nawigacji. Strona powinna być samowystarczalna, a pamięć podręczną należy wersjonować w celu aktualizacji i nasłuchiwać zdarzenia online, aby automatycznie przeładowywać stronę. Testy należy przeprowadzać z użyciem ograniczenia przepustowości offline w DevTools.

Często zadawane pytania

Czy lekcja „Strona zastępcza offline” jest bezpłatna?

Tak — pełny tekst „Strona zastępcza offline” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Strona zastępcza offline”?

Serwowanie zapisanej w pamięci podręcznej strony zastępczej, gdy użytkownik jest offline Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Strona zastępcza offline”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Manifest aplikacji internetowej
  2. Rejestrowanie service workera z HTML
  3. Kolor motywu i ikony aplikacji
  4. Strona zastępcza offline
← Powrót do HTML Academy