Service Worker

Julkaistu sovellus toimii tällä hetkellä niin, että se ladataan ensimmäisen käyntikerran jälkeen laitteen muistista. Sovelluksen taustalla toimii Service Worker, joka huolehtii sovelluksen lataamisesta taustalla laitteen välimuistiin. Sama toiminto lataa taustalla sovelluksen uusimman version, jos sellainen on tullut. Uusi versio otetaan käyttöön viimeistään siinä vaiheessa, kun sovellus seuraavan kerran käynnistetään.

Oletuksena Service Worker tallentaa selaimen muistiin sovelluksen HTML-, JavaScript- ja CSS-tiedostot sekä manifest-määrittelyssä olevat ikonit. Sovelluksessa käytetyt SVG-kuvia ei tallenneta. Tämä ilmenee, kun sovelluksen avaa ilman verkkoyhteyttä, kuten esimerkiksi lentokonetilassa. Tällöin sovellus pystyy käyttämään ainoastaan laitteelle tallennettuja resursseja, loput resursseista näkyvät rikkinäisinä kuvakkeina.

Jotta sovellus tallentaa myös sovelluksessa käytetyt kuvat, on Service Workerin määrityksiin lisättävä asetus, joka ohjeistaa kuvien tallentamisen.

Muokkaa projektin pääkansiossa olevaa vite.config.js-tiedostossa defineConfig-määrittely seuraavanlaiseksi:

export default defineConfig({
  plugins: [react(),
            VitePWA({ manifest: manifest,
                      workbox: {
                        globPatterns: ['**/*.{js,css,html,png,svg}']
                      } })],
})

Tämä lisää VitePWA-lisäosan määrityksiin workbox-määrittelyn, jossa asetetaan ladattavat tiedostot. Service Worker lataa tämän määrittelyn jälkeen kaikki julkaisukansiossa olevat js-, css-, html-, png- ja svg-päätteiset tiedostot.

Oletusmäärityksillä Service Worker tallentaa js-, css- ja html-päätteiset tiedostot. Nämä pitää määritellä, jotta ne ladattaisiin myös määrittelyn jälkeen.

Tämän jälkeen muutokset viedään Git-repoon ja sieltä GitHub-etärepoon seuraavasti:

git add .
git commit -m "korjaa kuvien latautumisen taustalla"
git push origin main

Kun GitHub on paketoinut uuden version ja julkaissut sen Static Web Apps -alustalla, voidaan sovellus avata uudelleen päätelaitteella. Päivityksen jälkeisen käynnistyksen yhteydessä Service Worker lataa taustalla päivitetyt tiedostot. Pienen hetken jälkeen, kun sovellus uudelleenkäynnistetään ilman verkkoyhteyttä, sovelluksen kuvat toimivat.

Taustalla latautuva sisältö

Jos haluat tutkia, mitä tietoja Service Worker tallentaa, niin sitä voi tutkia selaimen kehittäjänäkymän Application-välilehdeltä. Välilehden vasemmassa reunassa on sivuvalikko, josta pääsee tutkimaan sovelluksen tietoja sekä tekemään joitain toimintoja, kuten tyhjentämään sivustosta tallennetut tiedot.

Manifest-sivulla näkyy manifest.json -tiedostossa määritellyt tiedot, kuten sivuston nimi, kuvaus, taustavärit ja ikonit.

Service Workers -sivulta ilmenee Service Workerin tila. Sivun yläreunassa on mm. Offline -valinta, jolla selainikkunan saa väliaikaisesti toimimaan ilman verkkoyhteyttä. Lisäksi tältä sivulta saa lähetettyä sovellukselle testiviestin, jos sovellus hyödyntää Push Notification -toiminnallisuutta.

Storage-sivulla näkyy, kuinka paljon sovelluksesta tallennetut tiedot kokonaisuudessaan vievät tilaa. Sivulla olavalla Clear site data -napilla pystyy poistamaan kaiken sivustosta tallennetun tiedon, jolloin seuraava sivulataus aloittaa ns. "tyhjältä pöydältä".

Local storage -otsikon alla olevasta sivusta näkee reaaliaikaisesti mitä tietoja sovellus on tallentanut local storage -taltioon.

Cache storage -otsikon alla on workbox-precache-alkuinen sivu, josta näkee mitä tiedostoja Service worker on ladannut laitteen välimuistiin. Tässä listassa näkyvät tiedostot ovat käytettävissä silloin, kun selaimella ei ole verkkoyhteyttä käytettävissä.

TESTAA

Voit testata Service workerin toimintaa seuraavasti:

1. Tee selaimessa pakotettu sivupäivitys näppäinyhdistelmällä Ctrl + F5.
2. Aseta selain offline-tilaan Service workers -sivulla.
3. Päivitä sivu (tavallisella sivupäivityksellä) ja tarkkaile toimiiko sovellus niin kuin pitäisi. Sovelluksen kaikki kuvat pitäisi toimia.
4. Tyhjennä sovelluksen tallennetut tiedot klikkaamalla Storage-sivulla Clear site data -nappia.
5. Päivitä sivu (tavallisella sivupäivityksellä). Ruudulle pitäisi tulostua tieto, että verkkoyhteyttä ei ole.
6. Aseta selain online-tilaan ottamalla täppä pois Serveice workers -sivun offline-kohdasta.
7. Päivitä sivu (tavallisella sivupäivityksellä). Sovellus latautuu nyt normaalisti, Cache storage -sivun alta näkyy, että sovelluksen kaikki tiedostot on tallennettu välimuistiin. Tämä lataus vastaa tilannetta, jolloin käyttäjä vierailee ensimmäisen kerran sivustolla.
8. Aseta selain jälleen offline-tilaan Service workers -sivulla.
9. Päivitä sivu (tavallisella sivupäivityksellä) ja tarkkaile toimiiko sovellus niin kuin pitäisi. Sovelluksen pitäisi toimia normaalisti. Tämä vastaa tilannetta, jolloin käyttäjä vierailee sivustolla ilman verkkoyhteyttä.
10. Aseta selain lopuksi online-tilaan ottamalla täppä pois Serveice workers -sivun offline-kohdasta.

korjaa kuvien latautumisen taustalla -commit