1

I'm desperately trying to generate a serviceworker with Gulp and the Workbox generateSW library to serve an "offline.html" page when there is no connection.

I tried to use the advanced recipe "offline page only" given in the workbox documentation, but without success (https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offline_page_only).

The idea is to write with the Gulp Workbox generateSW library, an equivalent of this vanilla function:

   this.addEventListener('fetch', event => {
  // request.mode = navigate isn't supported in all browsers
  // so include a check for Accept: text/html header.
  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

I've no problem to use the lib to cache the offline page, but i couldn't find the syntax to generate the fetch part.

Could someone help me? Thank you very much.

Colir
  • 35
  • 7
  • Running into similar lack of documentation in Workbox on how to setup GenerateSW with an offline fallback page. I have a similar question here where I was not using navigateFallback correctly to try and accomplish this. https://stackoverflow.com/questions/67375367/why-is-my-workbox-generatesw-showing-my-offline-page-while-connected/67377460#67377460 – Adam Youngers May 04 '21 at 01:42

0 Answers0