Background sync doesn't refresh page when back online

Question

recently I started learning about service workers, background syncs... I implemented service worker and in install step I cached some files I want to show when offline.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => {
        return cache.addAll([navigationIcon, offlineImage, offlineFallbackPage]);
      })
  );
});

I am listening to fetch event to catch when there is no internet connection so I can show offline page when then.

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate' || (event.request.method === 'GET'
    && event.request.headers.get('accept')
      .includes('text/html'))) {
    event.respondWith(
      fetch(event.request.url)
        .catch(() => {
          // Return the offline page
          return caches.match(offlineFallbackPage);
        })
    );
  } else {
    event.respondWith(caches.match(event.request)
      .then((response) => {
        return response || fetch(event.request);
      }));
  }
});

I also added background sync, so I can go back online when there is internet connection.

After registering service worker I added:

  .then(swRegistration => swRegistration.sync.register('backOnline'))

And I listen to sync event in my service worker.

When I'm offline and go back online nothing happens. BUT when I delete my fetch event (don't show previously cached offline page) then page goes back online by itself (which I want to do when I have fetch event)

Does anyone know what should I add so my page can go back online by itself?

Answer 1

You can use navigator, Include it in your main js file that is cached or in your service-worker js file, just ensure it's cached

let onlineStatus = locate => { 
  if(navigator.onLine){
    location.replace(locate)
  }
}
let isOfflinePage = window.location.pathname == offlineFallbackPage ? true : false;

// kindly edit isOfflinePage to return true if it's offline page

if(isOfflinePage){
  onlineStatus('index.html')
}

You can simply use location.reload() instead