router.navigate(url) 未通过 Service Worker 获取事件

Question

Our platform is old angular (v4) and we use plain JavaScript file (sw.js) to register Service worker in index html page. I see install and activate are working fine. Just simple events [for testing]

self.addEventListener('install', function(event) {
    event.waitUntil(self.skipWaiting()); // Activate worker immediately
});

self.addEventListener('activate', function(event) {
    event.waitUntil(self.clients.claim()); // Become available to all pages
});

Then Angular component routes to our main page via router.navigate('pagename') and browser even routes to that page, but service worker fetch event is not triggered..

self.addEventListener('fetch', event => event.respondWith(onFetch(event)));

Any idea how to fix this issue? Thank you.

Answer 1

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});