How to run offline "Progressive Web Apps"?

Question

I am new in progressive Webs Apps development. I want to implement progressive webs app. So I have implemented one demo page and this page working fine with net connection but without network(In Offline) it is not working.

I want to open my progressive website without any internet connection(offline). I have seen one link https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/. And I have implemented service worker javascript file.

I will explain step by step:

First Step:

I am using web server chrome:

Second Step: index.html

  // Register the service worker if available.
  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service-worker.js').then(function(reg) {
  console.log('Successfully registered service worker', reg);
  }).catch(function(err) {
  console.warn('Error whilst registering service worker', err);
  });
  }

  window.addEventListener('online', function(e) {
  // Resync data with server.
  console.log("You are online");
  Page.hideOfflineWarning();
  Arrivals.loadData();
  }, false);

  window.addEventListener('offline', function(e) {
  // Queue up events for server.
  console.log("You are offline");
  Page.showOfflineWarning();
  }, false);

  // Check if the user is connected.
  if (navigator.onLine) {
  Arrivals.loadData();
  } else {
  // Show offline message
  Page.showOfflineWarning();
  }

  // Set Knockout view model bindings.
  ko.applyBindings(Page.vm);

Service-worker.js

// Use a cacheName for cache versioning
  var cacheName = 'v1:static';

  // During the installation phase, you'll usually want to cache static assets.
  self.addEventListener('install', function(e) {
  // Once the service worker is installed, go ahead and fetch the resources to make this work offline.
  e.waitUntil(
  caches.open(cacheName).then(function(cache) {
  return cache.addAll([
  './index.html',
  './screen.css',
  './script.js',
  './styles/app.css',
  './styles/font.css',
  './styles/header.css',
  './styles/hidden.css',
  './styles/list.css',
  './styles/page.css',
  './styles/suggest.css',
  './styles/tags.css', 

  ]).then(function() {
  self.skipWaiting();
  });
  })
  );
  });

  // when the browser fetches a URL…
  self.addEventListener('fetch', function(event) {
  // … either respond with the cached object or go ahead and fetch the actual URL
  event.respondWith(
  caches.match(event.request).then(function(response) {
  if (response) {
  // retrieve from cache
  return response;
  }
  // fetch as normal
  return fetch(event.request);
  })
  );
  });

Third Step Check in Network:

Check in Application:
Service-worker.js file working fine you can see in screen shot:

But when I clicked on offline check box my website is not working. If all these things did right way then its have to open in offline.

If anything missing then please let me know. Please don't decline this question. If anybody has an idea then please share.

If anybody has doubt then see this link https://pwa.rocks/. You can open this link in chrome and after then without internet connection it will open.

If explanation need then please ask from me.

Answer 1

You need an extra condition for the root request / when handling the fetch event:

self.addEventListener('fetch', function(event) {
    // … either respond with the cached object or go ahead and fetch the actual URL
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }

            // if not found in cache, return default offline content (only if this is a navigation request)
            if (event.request.mode === 'navigate') {
                return caches.match('./index.html');
            }

            // fetch as normal
            return fetch(event.request);
        })
    );
});