Service Worker selects a request from the cache, so the page is not updated from the new data

Question

I am trying to implement a service worker in my AngularJS project with the goal that if the server (nginx in my case) is restarted, then a standalone page should be displayed for this period, but I'm stuck in another case.

I have a page where I enumerate elements using a GET request, it receives a response from the server (for the 1st time), the response data is stored in the cache, but my page is updated at regular intervals, so using this technique, new data not displayed immediately.

What is wrong with this approach, kindly suggest a better way.

Folder structure

. ├── app ├── assets ├── favicon.ico ├── index.html ├── libs ├── offline.html └── sw.js 

below is the code of my service working file

sw.js

 'use strict'; let appCaches = [{ name: 'static', urls: [ '/app/', '/' ] }, { name: 'offline', urls: [ '/offline.html' ] }]; let cacheNames = appCaches.map((cache) => cache.name); self.addEventListener("install", (event) => { // console.log('installing'); event.waitUntil( caches.keys() .then((keys) => { return Promise.all(appCaches.map((appCache) => { console.log(`cache Name:: ${appCache.name}`); console.log(`keys:: ${keys}`); if (keys.indexOf(appCache.name) === -1) { caches.open(appCache.name).then((cache) => { console.log(`caching ${appCache.name}`); return cache.addAll(appCache.urls); }); } else { console.log(`found ${appCache.name}`); return Promise.resolve(true); } })).then(function() { // At this point everything has been cached return self.skipWaiting(); }); })); }); //Adding `activate` event listener self.addEventListener('activate', (event) => { // console.info('Event: Activate'); //Remove old and unwanted caches event.waitUntil( caches.keys().then((keys) => { return Promise.all(keys.map((key) => { console.log(`activation checking key ${key}`); if (cacheNames.indexOf(key) === -1) { console.log(`deleting ${key}`); return caches.delete(key); } })); }) ); }); //------------------------------------------------------------------- function addToCache(cacheKey, request, response) { console.log("addToCache", arguments); if (response.ok) { var copy = response.clone(); caches.open(cacheKey).then((cache) => { cache.put(request, copy); }); return response; } } function fetchFromCache(event) { console.log("fetchFromCache", arguments); return caches.match(event.request).then((response) => { if (!response) { // A synchronous error that will kick off the catch handler throw Error('${event.request.url} not found in cache'); } return response; }); } function offlineResponse(resourceType) { console.log("%c offlineResponse::resourceType::" + resourceType, 'color:green'); if (resourceType === 'content') { return caches.match('/offline.html'); } return undefined; } self.addEventListener('fetch', (event) => { var request = event.request; var url = new URL(request.url); console.log("%curl=>" + url, 'color:red'); var acceptHeader = request.headers.get('Accept'); var resourceType = 'static'; var cacheKey; if (acceptHeader.indexOf('text/html') !== -1) { resourceType = 'content'; } else if (acceptHeader.indexOf('image') !== -1) { resourceType = 'image'; } // {String} [static|image|content] cacheKey = resourceType; if (request.method !== 'GET') { return; } else { console.log("resourceType=>", cacheKey); if (resourceType === 'content') { // Use a network-first strategy. console.info("Use a network-first strategy."); event.respondWith( fetch(request) .then((response) => addToCache(cacheKey, request, response)) .catch(() => fetchFromCache(event)) .catch(() => offlineResponse(resourceType)) ); } else { // Use a cache-first strategy. console.info("Use a cache-first strategy."); event.respondWith( fetchFromCache(event) .catch(() => fetch(request)) .then((response) => addToCache(cacheKey, request, response)) .catch(() => offlineResponse(resourceType)) ); } } }); 

Answer 1

Your key resource is for the resource in the request cache (since you use cache.put(request, copy) in addToCache ), but you retrieve it using url (e.g. /offline.html in offlineResponse )). You must match request in cache .