HTML Academy · Oppitunti

Offline-varasivu

Tarjoa välimuistissa oleva varasivu, kun käyttäjä on offline-tilassa

Oppitunti 4/414 vaihetta

Offline-varasivu on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Miksi offline-sivu?

Kun verkkoyhteyttä ei ole, service worker voi tarjota mukautetun offline-varasivun selaimen yleisen "ei internetyhteyttä" -virheen sijaan. Käyttäjä näkee brändin, hyödyllistä tietoa ja mahdollisesti välimuistiin tallennettua sisältöä — paljon miellyttävämpää kuin Chromiumin dinosaurus tai Firefoxin surullinen välilehti.

Varasivun tallentaminen välimuistiin

Esitallentakaa offline.html-sivu service workerin install-tapahtumassa, jotta se on aina käytettävissä, myös ennen kuin käyttäjä siirtyy millekään sivulle offline-tilassa. Selain säilyttää välimuistin seuraavaan sw.js-muutokseen asti.

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

Palautus virhetilanteessa

Yrittäkää fetch-tapahtumassa ensin verkkoyhteyttä ja palauttakaa virheen sattuessa välimuistissa oleva offline.html. Tämä malli (network-first ja offline-varasivu) on yksinkertaisin PWA-ratkaisu ja toimii useimmilla sisältösivustoilla.

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

navigate-tilan tarkistus

Palauttakaa offline.html vain navigointipyyntöihin eli ylätason sivulatauksiin. Kuvien, komentosarjojen ja muiden aliresurssien latauksissa antakaa pyynnön epäonnistua tai käyttäkää resurssikohtaisia välimuistissa olevia kopioita — HTML-sivun tarjoaminen puuttuvan kuvan tilalle rikkoo sivua pahemmin.

Offline-sivun suunnittelu

Pidättehän offline-sivun kevyenä: käyttäkää vain vähän CSS:ää älkääkä käyttäkö ulkoisia resursseja, ellei niitäkin ole tallennettu välimuistiin. Näyttäkää brändin logo, ystävällinen viesti ("Olette offline-tilassa — sisältö latautuu, kun yhteys palautuu") ja Retry-painike, joka kutsuu location.reload()-funktiota.

<!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>

Vierailtujen sivujen tallentaminen välimuistiin

Yksittäisen offline-sivun lisäksi voitte tallentaa onnistuneesti ladatut sivut välimuistiin stale-while-revalidate- tai runtime caching -strategialla. Äskettäin katsotun artikkelin sisältö näkyy edelleen ilman verkkoyhteyttä, ja vain aiemmin avaamattomat sivut epäonnistuvat.

Välimuistin version päivittäminen

Kun päivitätte offline.html-tiedostoa, muuttakaa CACHE-vakion arvoa tiedostossa sw.js (CACHE = "v2"). Poistakaa activate-tapahtumassa vanhat välimuistit: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Vanhentuneet offline-sivut aiheuttavat hämmennystä.

Offline-tilan testaaminen

Chrome DevToolsin Network-paneelin → "Offline"-rajoitus simuloi verkkoyhteyden puuttumista. Siirtykää sovelluksessa eri sivuille ja varmistakaa, että offline-sivu näytetään aiemmin avaamattomilla reiteillä ja että aiemmin vieraillut sivut latautuvat edelleen välimuistista.

Aliresurssien latautumisen epäonnistuminen

Jos offline-sivu viittaa välimuistiin tallentamattomaan CSS-tiedostoon, tiedoston lataus epäonnistuu offline-tilassa ja sivu näytetään ilman tyylejä. Esitallentakaa install-käsittelijässä kaikki offline-sivun tarvitsemat resurssit (CSS, logo ja fontit).

Staattista offline-sivua pidemmälle

Edistyneet PWA:t jonottavat käyttäjän toiminnot offline-tilassa Background Sync -toiminnolla, yrittävät niitä uudelleen yhteyden palauduttua ja näyttävät sillä välin optimistisen käyttöliittymän. Workbox-kirjasto tarjoaa näihin malleihin valmiita ratkaisuja, mutta voitte toteuttaa ne myös itse, mikä vaatii enemmän työtä.

Yhteyden palautumisen havaitseminen

Kuunnelkaa offline-sivulla online-tapahtumaa yhteyden palautumisen havaitsemiseksi: window.addEventListener("online", () => location.reload()). Sivu latautuu uudelleen heti yhteyden palauduttua ilman, että käyttäjän tarvitsee painaa Retry-painiketta.

Olkaa rehellisiä

"Yritä uudelleen" -painikkeiden tulee todella yrittää uudelleen — kutsukaa location.reload()-funktiota älkääkä käyttäkö valetoimintoa, joka ei tee mitään. Rehellinen käyttöliittymä ylläpitää käyttäjän luottamusta, kun taas harhaanjohtavat offline-sivut heikentävät uskottavuutta nopeasti, kun käyttäjä huomaa asian.

Tietotesti

Miksi offline.html-varasivu pitäisi palauttaa vain navigointipyyntöihin (e.request.mode === "navigate") eikä kaikkiin epäonnistuneisiin pyyntöihin?

Vastaa interaktiivisessa oppitunnissa

Yhteenveto

Service workerit voivat tarjota mukautetun offline-varasivun selaimen yleisen virhesivun sijaan. Esitallentakaa offline.html install-tapahtumassa ja tarjotkaa se fetch-tapahtumassa, kun verkkoyhteys epäonnistuu ja pyyntö koskee navigointia. Pitäkää sivu itsenäisenä, päivittäkää välimuistin versio muutoksia varten ja kuunnelkaa online-tapahtumaa automaattista uudelleenlatausta varten. Testatkaa toimintaa DevToolsin offline-rajoituksella.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Offline-varasivu” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Offline-varasivu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Offline-varasivu”?

Tarjoa välimuistissa oleva varasivu, kun käyttäjä on offline-tilassa Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Offline-varasivu”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: HTML Academy