Frontend Service Worker'i Navigatsioon: Lehe Laadimiste Pealtkuulamine Parema Kasutajakogemuse Nimel

Service Workerid on võimas tehnoloogia, mis võimaldab teil võrgupäringuid pealt kuulata, ressursse vahemällu salvestada ja veebirakendustele võrguühenduseta funktsionaalsust pakkuda. Üks mõjukamaid võimekusi on lehe laadimise päringute pealtkuulamine, mis võimaldab teil jõudlust ja kasutajakogemust dramaatiliselt parandada. See postitus uurib, kuidas Service Workerid navigatsioonipäringuid käsitlevad, pakkudes arendajatele praktilisi näiteid ja rakendatavaid teadmisi.

Navigatsioonipäringute Mõistmine

Enne koodi süvenemist defineerime, mis on "navigatsioonipäring" Service Workerite kontekstis. Navigatsioonipäring on päring, mille algatab kasutaja, navigeerides uuele lehele või värskendades praegust lehte. Need päringud käivitatakse tavaliselt:

• Lingile klõpsates (<a> silt)
• URL-i sisestades aadressiribale
• Lehte värskendades
• Kasutades brauseri tagasi- või edasinuppe

Service Workeritel on võime neid navigatsioonipäringuid pealt kuulata ja määrata, kuidas neid käsitletakse. See avab võimalused keerukate vahemällu salvestamise strateegiate rakendamiseks, sisu serveerimiseks vahemälust, kui kasutaja on võrguühenduseta, ja isegi lehtede dünaamiliseks genereerimiseks kliendi poolel.

Service Worker'i Registreerimine

Esimene samm on Service Worker'i registreerimine. Seda tehakse tavaliselt teie peamises JavaScripti failis:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

See kood kontrollib, kas brauser toetab Service Workereid ja kui jah, siis registreerib faili /service-worker.js. Veenduge, et see JavaScript jookseks turvalises kontekstis (HTTPS) tootmiskeskkondades.

Navigatsioonipäringute Pealtkuulamine Service Worker'is

Oma service-worker.js faili sees saate kuulata sündmust fetch. See sündmus käivitatakse iga teie rakenduse tehtud võrgupäringu puhul, sealhulgas navigatsioonipäringute puhul. Saame neid päringuid filtreerida, et spetsiifiliselt käsitleda navigatsioonipäringuid.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        // Always try the network first.
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetching the HTML file fails, look for a fallback.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse || createErrorResponse(); // Fallback if offline page unavailable
      }
    });
  }
});

            

              
                Copy
              
            
          

Vaatame selle koodi lähemalt:

• event.request.mode === 'navigate': See tingimus kontrollib, kas päring on navigatsioonipäring.
• event.respondWith(): See meetod ütleb brauserile, kuidas päringut käsitleda. See võtab vastu lubaduse (promise), mis laheneb Response objektiks.
• event.preloadResponse: See on mehhanism nimega Navigation Preload. Kui see on lubatud, võimaldab see brauseril alustada navigatsioonipäringu toomist enne, kui Service Worker on täielikult aktiivne. See pakub kiiruseparandust, kattudes Service Worker'i käivitusaja võrgupäringuga.
• fetch(event.request): See toob ressursi võrgust. Kui võrk on saadaval, laaditakse leht serverist nagu tavaliselt.
• caches.open(CACHE_NAME): See avab vahemälu määratud nimega (CACHE_NAME peab olema defineeritud mujal teie Service Worker'i failis).
• cache.match(OFFLINE_URL): See otsib vahemälust vastet, mis sobib OFFLINE_URL-iga (nt võrguühenduseta leht).
• createErrorResponse(): See on kohandatud funktsioon, mis tagastab veavastuse. Saate seda funktsiooni kohandada, et pakkuda kasutajasõbralikku võrguühenduseta kogemust.

Vahemällu Salvestamise Strateegiad Navigatsioonipäringute Jaoks

Eelmine näide demonstreerib põhilist võrk-esmalt strateegiat. Siiski saate rakendada keerukamaid vahemällu salvestamise strateegiaid sõltuvalt teie rakenduse nõuetest.

Võrk Esmalt, Varundades Vahemäluga

See on strateegia, mida näidati eelmises näites. See üritab ressurssi kõigepealt võrgust tuua. Kui võrgupäring ebaõnnestub (nt kasutaja on võrguühenduseta), langeb see tagasi vahemälule. See on hea strateegia sisu jaoks, mida sageli uuendatakse.

Vahemälu Esmalt, Uuendades Taustal

See strateegia kontrollib kõigepealt vahemälu. Kui ressurss leitakse vahemälust, tagastatakse see kohe. Taustal uuendab Service Worker vahemälu ressursi uusima versiooniga võrgust. See tagab kiire esialgse laadimise ja kindlustab, et kasutajal on lõpuks alati kõige uuem sisu.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          if (cachedResponse) {
            // Update the cache in the background.
            event.waitUntil(
              fetch(event.request).then(response => {
                return caches.open(CACHE_NAME).then(cache => {
                  return cache.put(event.request, response.clone());
                });
              })
            );
            return cachedResponse;
          }

          // If not found in cache, fetch from network.
          return fetch(event.request);
        })
    );
  }
});

            

              
                Copy
              
            
          

Ainult Vahemälu

See strateegia serveerib sisu ainult vahemälust. Kui ressurssi ei leita vahemälust, ebaõnnestub päring. See sobib varadele, mis on teadaolevalt staatilised ja võrguühenduseta saadaval.

Stale-While-Revalidate

Sarnane Vahemälu Esmalt strateegiale, kuid selle asemel, et uuendada taustal event.waitUntil abil, tagastate kohe vahemälus oleva vastuse (kui see on saadaval) ja *alati* üritate tuua uusima versiooni võrgust ja uuendada vahemälu. See lähenemine pakub väga kiiret esialgset laadimist, kuna kasutaja saab vahemälus oleva versiooni koheselt, kuid see tagab, et vahemälu uuendatakse lõpuks kõige värskemate andmetega, mis on valmis järgmiseks päringuks. See on suurepärane mitte-kriitiliste ressursside või olukordade jaoks, kus veidi aegunud teabe lühiajaline näitamine on kiiruse nimel vastuvõetav.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.open(CACHE_NAME).then(cache => {
        return cache.match(event.request).then(cachedResponse => {
          const fetchedResponse = fetch(event.request).then(networkResponse => {
            cache.put(event.request, networkResponse.clone());

            return networkResponse;
          });

          // Return the cached response if we have it, otherwise wait
          // for the network. 
          return cachedResponse || fetchedResponse;
        });
      })
    );
  }
});

            

              
                Copy
              
            
          

Navigatsiooni Eel-laadimine (Navigation Preload)

Navigation Preload on funktsioon, mis võimaldab brauseril alustada ressursi toomist enne, kui Service Worker on täielikult aktiivne. See võib oluliselt parandada navigatsioonipäringute jõudlust, eriti teie saidi esmakordsel külastusel.

Navigation Preload'i lubamiseks peate:

1. Luba see oma Service Worker'i activate sündmuses.
2. Kontrolli preloadResponse olemasolu fetch sündmuses.

            
// In the activate event:
self.addEventListener('activate', event => {
  event.waitUntil(self.registration.navigationPreload.enable());
});

// In the fetch event (as shown in the initial example):
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      const preloadResponse = await event.preloadResponse;
      if (preloadResponse) {
        return preloadResponse;
      }

      // ... rest of your fetch logic ...
    });
  }
});

            

              
                Copy
              
            
          

Võrguühenduseta Olukordade Käsitsemine

Üks peamisi Service Workerite kasutamise eeliseid on võime pakkuda võrguühenduseta funktsionaalsust. Kui kasutaja on võrguühenduseta, saate serveerida oma rakenduse vahemälus olevat versiooni või kuvada kohandatud võrguühenduseta lehte.

Võrguühenduseta stsenaariumide käsitlemiseks peate:

1. Salvestage vajalikud varad vahemällu, sealhulgas teie HTML, CSS, JavaScript ja pildid.
2. fetch sündmuses püüdke kinni kõik võrguvead ja serveerige vahemälus olevat võrguühenduseta lehte.

            
// Define the offline page URL and cache name
const OFFLINE_URL = '/offline.html';
const CACHE_NAME = 'my-app-cache-v1';

// Install event: cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/app.js',
        OFFLINE_URL // Cache the offline page
      ]);
    })
  );
  self.skipWaiting(); // Immediately activate the service worker
});

// Fetch event: handle navigation requests and offline fallback
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        // Always try the network first.
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetching the HTML file fails, look for a fallback.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse || createErrorResponse(); // Fallback if offline page unavailable
      }
    });
  }
});

function createErrorResponse() {
    return new Response(
        `
Offline
You are currently offline. Please check your internet connection.
`, {
            headers: { 'Content-Type': 'text/html' }
        }
    );
}

            

              
                Copy
              
            
          

See kood salvestab offline.html lehe vahemällu install sündmuse ajal. Seejärel, fetch sündmuses, kui võrgupäring ebaõnnestub (catch plokk käivitatakse), kontrollib see vahemälust offline.html lehte ja tagastab selle brauserile.

Täpsemad Tehnikad ja Kaalutlused

Cache Storage API Otsene Kasutamine

caches objekt pakub võimsat API-d vahemälus olevate vastuste haldamiseks. Saate kasutada meetodeid nagu cache.put(), cache.match() ja cache.delete(), et vahemälu otse manipuleerida. See annab teile peeneteralise kontrolli selle üle, kuidas ressursse vahemällu salvestatakse ja sealt kätte saadakse.

Dünaamiline Vahemällu Salvestamine

Lisaks staatiliste varade vahemällu salvestamisele saate vahemällu salvestada ka dünaamilist sisu, näiteks API vastuseid. See võib oluliselt parandada teie rakenduse jõudlust, eriti aeglase või ebausaldusväärse internetiühendusega kasutajate jaoks.

Vahemälu Versioonimine

On oluline oma vahemälu versioonida, et saaksite vahemällu salvestatud ressursse uuendada, kui teie rakendus muutub. Levinud lähenemine on lisada versiooninumber CACHE_NAME-i. Kui oma rakendust uuendate, saate versiooninumbrit suurendada, mis sunnib brauserit uusi ressursse alla laadima.

            
const CACHE_NAME = 'my-app-cache-v2'; // Increment the version number

            

              
                Copy
              
            
          

Samuti peate vanad vahemälud eemaldama, et vältida nende kogunemist ja salvestusruumi raiskamist. Saate seda teha activate sündmuses.

            
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

Taustasünkroonimine (Background Sync)

Service Workerid pakuvad ka Background Sync API-d, mis võimaldab teil ülesandeid edasi lükata, kuni kasutajal on stabiilne internetiühendus. See on kasulik stsenaariumide jaoks, nagu vormide esitamine või failide üleslaadimine, kui kasutaja on võrguühenduseta.

Tõuketeavitused (Push Notifications)

Service Workereid saab kasutada ka tõuketeavituste rakendamiseks, mis võimaldavad teil saata sõnumeid oma kasutajatele isegi siis, kui nad teie rakendust aktiivselt ei kasuta. Seda saab kasutada kasutajate teavitamiseks uuest sisust, uuendustest või olulistest sündmustest.

Rahvusvahelistamise (i18n) ja Lokaliseerimise (L10n) Kaalutlused

Globaalses rakenduses Service Workerite rakendamisel on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (L10n). Siin on mõned põhiaspektid:

• Keele Tuvastamine: Rakendage mehhanism kasutaja eelistatud keele tuvastamiseks. See võib hõlmata Accept-Language HTTP päise kasutamist, kasutaja seadistust või brauseri API-sid.
• Lokaliseeritud Sisu: Salvestage oma võrguühenduseta lehtede ja muu vahemällu salvestatud sisu lokaliseeritud versioonid. Kasutage tuvastatud keelt sobiva versiooni serveerimiseks. Näiteks võiks teil olla eraldi võrguühenduseta lehed inglise (/offline.en.html), hispaania (/offline.es.html) ja prantsuse (/offline.fr.html) keele jaoks. Teie Service Worker valiks seejärel dünaamiliselt õige faili, mida vahemällu salvestada ja serveerida, lähtudes kasutaja keelest.
• Kuupäeva ja Kellaaja Vormindamine: Veenduge, et kõik teie võrguühenduseta lehtedel kuvatavad kuupäevad ja kellaajad oleksid vormindatud vastavalt kasutaja lokaadile. Kasutage selleks JavaScripti Intl API-d.
• Valuuta Vormindamine: Kui teie rakendus kuvab valuutaväärtusi, vormindage need vastavalt kasutaja lokaadile ja valuutale. Jällegi, kasutage valuuta vormindamiseks Intl API-d.
• Teksti Suund: Arvestage keeltega, mida loetakse paremalt vasakule (RTL), näiteks araabia ja heebrea keel. Teie võrguühenduseta lehed ja vahemällu salvestatud sisu peaksid toetama RTL-tekstisuunda CSS-i abil.
• Ressursside Laadimine: Laadige dünaamiliselt lokaliseeritud ressursse (nt pilte, fonte) vastavalt kasutaja keelele.

Näide: Lokaliseeritud Võrguühenduseta Lehe Valik

            
// Function to get the user's preferred language
function getPreferredLanguage() {
  // This is a simplified example.  In a real application,
  // you would use a more robust language detection mechanism.
  return navigator.language || navigator.userLanguage || 'en';
}

// Define a mapping of languages to offline page URLs
const offlinePageUrls = {
  'en': '/offline.en.html',
  'es': '/offline.es.html',
  'fr': '/offline.fr.html'
};

// Get the user's preferred language
const preferredLanguage = getPreferredLanguage();

// Determine the offline page URL based on the preferred language
let offlineUrl = offlinePageUrls[preferredLanguage] || offlinePageUrls['en']; // Default to English if no match

// ... rest of your service worker code, using offlineUrl to cache and serve the appropriate offline page ...

            

              
                Copy
              
            
          

Testimine ja Silumine

Service Workerite testimine ja silumine võib olla keeruline. Siin on mõned näpunäited:

• Kasutage Chrome DevTools'i: Chrome DevTools pakub spetsiaalset paneeli Service Workerite kontrollimiseks. Saate seda paneeli kasutada oma Service Worker'i oleku vaatamiseks, vahemällu salvestatud ressursside kontrollimiseks ja võrgupäringute silumiseks.
• Kasutage 'Update on reload': Chrome DevTools -> Application -> Service Workers all saate märkida valiku "Update on reload", et sundida service workerit igal lehe uuesti laadimisel uuendama. See on arenduse ajal äärmiselt kasulik.
• Tühjendage Salvestusruum: Mõnikord võib Service Worker sattuda halba olekusse. Brauseri salvestusruumi (sealhulgas vahemälu) tühjendamine võib aidata neid probleeme lahendada.
• Kasutage Service Worker'i Testimise Teeki: Saadaval on mitmeid teeke, mis aitavad teil oma Service Workereid testida, näiteks Workbox.
• Testige Päris Seadmetel: Kuigi saate Service Workereid testida lauaarvuti brauseris, on oluline testida päris mobiilseadmetel, et tagada nende korrektne toimimine erinevates võrgutingimustes.

Kokkuvõte

Lehe laadimise päringute pealtkuulamine Service Workeritega on võimas tehnika veebirakenduste kasutajakogemuse parandamiseks. Rakendades vahemällu salvestamise strateegiaid, pakkudes võrguühenduseta funktsionaalsust ja optimeerides võrgupäringuid, saate oluliselt parandada jõudlust ja kaasatust. Ärge unustage globaalsele publikule arendades arvestada rahvusvahelistamisega, et tagada kõigile ühtlane ja kasutajasõbralik kogemus.

See juhend pakub kindla aluse Service Worker'i navigatsiooni pealtkuulamise mõistmiseks ja rakendamiseks. Selle tehnoloogia edasisel uurimisel avastate veelgi rohkem võimalusi selle võimekuse ärakasutamiseks, et luua erakordseid veebikogemusi.