Օֆլայն աշխատելու օրինակ

Service Worker-ի ամենակարևոր հնարավորություններից մեկը կայքի հասանելիությունն է նույնիսկ առանց ինտերնետի։ Օֆլայն ռեժիմն աշխատեցնում ենք՝ քեշավորելով հիմնական ֆայլերը և ապահովելով fallback էջ, երբ ցանցը անհասանելի է։

Քեշավորում ենք fallback էջը՝ install event-ում

  
const CACHE_NAME = 'offline-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/offline.html',
  '/styles.css',
  '/main.js',
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(urlsToCache);
    })
  );
});
  

Օգտագործում ենք fallback էջը՝ fetch event-ում

  
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request).then(response => {
        return response || caches.match('/offline.html');
      });
    })
  );
});
  

Այս օրինակում՝ եթե ցանցային հարցումը ձախողվում է (օրինակ՝ օգտատերը օֆլայն է), բրաուզերը կփորձի ստանալ հարցվող ֆայլը քեշից։ Եթե այն քեշում չկա, ապա ցույց կտա offline.html էջը։

Սա շատ օգտակար է օգտատերերին լավ փորձ ապահովելու համար՝ հատկապես ճանապարհորդելու, ցածր կապի կամ ցանցային խնդիրների ժամանակ։