10
  • I am trying to build a PWA with an offline first policy.
    • The server for the source files is a NodeJS server.
    • I am currently testing this on a localhost node server (not sure it has an impact ?).
    • Service worker + caching seems fine, but in offline mode I only get the Chrome Offline Page.

Let's get into details :

The page which is served (through the http://localhost:8080/place/test url) has some client side JS, in which I register a Service Worker :

client.js

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
                 .register(rootPath+'/js/service-worker.js')
                 .then(function() { console.log('Service Worker Registered'); });
    }

service-worker.js (based on the Google PWA tutorial)

var cacheName = 'myCacheVersion';
var filesToCache = [
    '../',
    '../place/test',
    '../js/client.js',
    '../js/service-worker.js',
    "../css/style.css"
];


self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

In the Dev Tools Console, everything seems fine :

  • The SW is registered
  • The cache contains the elements I wanted to cache

But when I check the Offline mode checkbox and refresh my page url : http://localhost:8080/place/test , I only get the Google Chrome Offline Web Page.

=> What am I missing there ? (does it have to do with nodeJs ? with the localhost environment ? with my implementation ?)

I've been struggling with this one for a little while now...

I have checked in the "Application" tab and my service worker shows up as activated and is running.

Note : If found a similar question here, but no satisfying answer over there : Service worker not run in offline mode using nodejs server

Ed.
  • 1,992
  • 1
  • 13
  • 30
B. B.
  • 131
  • 1
  • 8
  • You say the SW is registered; (as in a comment on the other question you link to) does it show up in the "Application" tab? – Ed. Aug 27 '17 at 17:52
  • 1
    Yes, it show up as "activated and is running" – B. B. Aug 27 '17 at 18:07

1 Answers1

12

Fundamentally this is the same problem as answered here: Service worker is caching files but fetch event is never fired

If you look in your console, you'll see that while the install, activate, caching, and registration all happen, the "fetch" won't. This is because you located the service worker under js, so for security reasons Chrome (etc) won't use it for any URLs except those in the same directory or below.

If you place your client.js and service-worker.js at the same level rather than in a js subdirectory, it will all start working. That will necessitate updating the contents of the files, which I will show below for reference.

One tiny caveat: I foolishly used IIS on a Windows box to work on this, and between that and Chrome they clung like grim death to the cached HTML files with outdated JS-file locations. I had to copy them into a subdirectory, making fresh URLs, to test the solution.

index.html:

<head>
<script src="client.js"></script>
</head>
<body>
<a href="cachetest.html">link to ct</a>
</body>

cachetest.html:

<head>
<script src="client.js"></script>
</head>
<body>cachetest</body>

client.js:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
}

serviceworker.js:

var cacheName = 'myCacheVersion';
var filesToCache = [
    '',
    'cachetest.html',
    'client.js',
    'service-worker.js',
//    "css/style.css"
];


self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});
Ed.
  • 1,992
  • 1
  • 13
  • 30
  • 4
    You nailed it ! I just had to **move my service-worker.js to my root** and make a few changes to the file paths + cache file list paths to have is work... Note for later : keep in mind service-worker only has access to its level or below... Many thanks ! (I upvoted your answer, but being new here, it doesn't display yet...) – B. B. Aug 27 '17 at 20:18
  • Thanks! Good luck with your other stuff. I'm going to see if this is also the answer to the other problem. – Ed. Aug 27 '17 at 20:30
  • Or, you can! :-) – Ed. Aug 27 '17 at 21:01
  • 1
    I also added my service worker to the root of my application /service-worker.js and things started working. Thanks! – Clifford Fajardo May 02 '18 at 06:44
  • 1
    Thank you, placing registering sw and actual service worker fix the problem. – Gesha May 19 '19 at 21:07