Question

23

Best practices for detecting offline state in a service worker

rated 0 times [ 27] [ 4] / answers: 1 / hits: 29642 / 7 Years ago, mon, september 4, 2017, 12:00:00

I have a service worker that is supposed to cache an offline.html page that is displayed if the client has no network connection. However, it sometimes believes the navigator is offline even when it is not. That is, navigator.onLine === false. This means the user may get offline.html instead of the actual content even when online, which is obviously something I'd like to avoid.

This is how I register the service worker in my main.js:

// Install service worker for offline use and caching

if ('serviceWorker' in navigator) {

  navigator.serviceWorker.register('/service-worker.js', {scope: '/'});

}

My current service-worker.js:

const OFFLINE_URL = '/mysite/offline';

const CACHE_NAME = 'mysite-static-v1';



self.addEventListener('install', (event) => {

  event.waitUntil(

    // Cache the offline page when installing the service worker

    fetch(OFFLINE_URL, { credentials: 'include' }).then(response =>

      caches.open(CACHE_NAME).then(cache => cache.put(OFFLINE_URL, response)),

    ),

  );

});



self.addEventListener('fetch', (event) => {

  const requestURL = new URL(event.request.url);



  if (requestURL.origin === location.origin) {

    // Load static assets from cache if network is down

    if (/.(css|js|woff|woff2|ttf|eot|svg)$/.test(requestURL.pathname)) {

      event.respondWith(

        caches.open(CACHE_NAME).then(cache =>

          caches.match(event.request).then((result) => {

            if (navigator.onLine === false) {

              // We are offline so return the cached version immediately, null or not.

              return result;

            }

            // We are online so let's run the request to make sure our content

            // is up-to-date.

            return fetch(event.request).then((response) => {

              // Save the result to cache for later use.

              cache.put(event.request, response.clone());

              return response;

            });

          }),

        ),

      );

      return;

    }

  }



  if (event.request.mode === 'navigate' && navigator.onLine === false) {

    // Uh-oh, we navigated to a page while offline. Let's show our default page.

    event.respondWith(caches.match(OFFLINE_URL));

    return;

  }



  // Passthrough for everything else

  event.respondWith(fetch(event.request));

});

What am I doing wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jillalanisg

Add To Favorites

Follow

Total Points: 484

Total Questions: 98

Total Answers: 89

Location: Vanuatu

Member since Wed, Oct 14, 2020

4 Years ago

answered 7 Years ago kaleyv · Accepted Answer

navigator.onLine and the related events can be useful when you want to update your UI to indicate that you're offline and, for instance, only show content that exists in a cache.

But I'd avoid writing service worker logic that relies on checking navigator.onLine. Instead, attempt to make a fetch() unconditionally, and if it fails, provide a backup response. This will ensure that your web app behaves as expected regardless of whether the fetch() fails due to being offline, due to lie-fi, or due to your web server experiencing issues.

// Other fetch handler code...



if (event.request.mode === 'navigate') {

  return event.respondWith(

    fetch(event.request).catch(() => caches.match(OFFLINE_URL))

  );

}



// Other fetch handler code...