Website not updating when content changes in Cache-First strategy

Question

I am using Cache-first strategy in my progressive web app that i want to support offline browsing. I have noted that offline browsing is working fine but when i update content on the website,it still showing the old stuff.I am not sure what is wrong with my code because i want it to check if there is an update before loading the offline content. I have manifest.json, Service-worker.js, Offlinepage.js and main.js.

Here is my service-worker.js code that i have used:

      //service worker configuration
      'use strict';

      const
        version = '1.0.0',
        CACHE = version + '::PWA',
        offlineURL = '/offline/',
        installFilesEssential = [
         '/',
          '/manifest.json',
          '/theme/pizza/css/style.css',
           '/theme/pizza/css/font-awesome/font-awesome.css',
          '/theme/pizza/javascript/script.js',
          '/theme/pizza/javascript/offlinepage.js',
          '/theme/pizza/logo.png',
          '/theme/pizza/icon.png'
        ].concat(offlineURL),
        installFilesDesirable = [
          '/favicon.ico',
         '/theme/pizza/logo.png',
          '/theme/pizza/icon.png'
        ];

      // install static assets
      function installStaticFiles() {

        return caches.open(CACHE)
          .then(cache => {

            // cache desirable files
            cache.addAll(installFilesDesirable);

            // cache essential files
            return cache.addAll(installFilesEssential);

          });

      }
      // clear old caches
      function clearOldCaches() {

        return caches.keys()
          .then(keylist => {

            return Promise.all(
              keylist
                .filter(key => key !== CACHE)
                .map(key => caches.delete(key))
            );

          });

      }

      // application installation
      self.addEventListener('install', event => {

        console.log('service worker: install');

        // cache core files
        event.waitUntil(
          installStaticFiles()
          .then(() => self.skipWaiting())
        );

      });

      // application activated
      self.addEventListener('activate', event => {

        console.log('service worker: activate');

        // delete old caches
        event.waitUntil(
          clearOldCaches()
          .then(() => self.clients.claim())
        );

      });

      // is image URL?
      let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
      function isImage(url) {

        return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);

      }


      // return offline asset
      function offlineAsset(url) {

        if (isImage(url)) {

          // return image
          return new Response(
            '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
            { headers: {
              'Content-Type': 'image/svg+xml',
              'Cache-Control': 'no-store'
            }}
          );

        }
        else {

          // return page
          return caches.match(offlineURL);

        }

      }

      // application fetch network data
      self.addEventListener('fetch', event => {

        // abandon non-GET requests
        if (event.request.method !== 'GET') return;

        let url = event.request.url;

        event.respondWith(

          caches.open(CACHE)
            .then(cache => {

              return cache.match(event.request)
                .then(response => {

                  if (response) {
                    // return cached file
                    console.log('cache fetch: ' + url);
                    return response;
                  }

                  // make network request
                  return fetch(event.request)
                    .then(newreq => {

                      console.log('network fetch: ' + url);
                      if (newreq.ok) cache.put(event.request, newreq.clone());
                      return newreq;

                    })
                    // app is offline
                    .catch(() => offlineAsset(url));

                });

            })

        );

      });

It looks like you serve pages from the cache even when the user is online. I would only apply the solution to users which are offline. Hence, when they go online again, we can clear cache and serve valid pages. — Dmytro Nesteriuk, Jun 15 '17 at 06:34
@DmitriyNesteryuk you are right. I am really looking for a way to ensure all users get most recent data and ensure that pages load faster — Elated Coder, Jun 15 '17 at 06:46

score 1 · Answer 1 · answered Jun 14 '17 at 13:48

1

Add a ?[VERSION] to the src of your link.

For instance:

<script type="text/javascript" src="your_file.js?1500"></script>

and every time you update your code just add a number to your version.

Actually this is duplicate question look here for other solutions.

answered Jun 14 '17 at 13:48

Mr.Sun

129
4

This one has no effect. The updated content will only update only if i delete old cache and reload the page. Reloading without first clearing the cache ensures that old stuff are shown. Maybe it is a weakness with service workers. Although i could be wrong. – Elated Coder Jun 14 '17 at 18:26
do you test it in other browser? – Mr.Sun Jun 15 '17 at 09:44
Yes i have. and does ther ?[Version ] work if i attach it on CSS link? – Elated Coder Jun 15 '17 at 09:51
yes it work.I cant figure it out why it not work. when a link change even you add of remove a letter that's become new to browser and browser download it again. – Mr.Sun Jun 15 '17 at 10:45

score 1 · Accepted Answer · answered Jun 16 '17 at 01:42

I solved the issue as shown below: i.e if user is offline fetch from cache else load from network

// application fetch network data
self.addEventListener('fetch', event => {

  // abandon non-GET requests
  if (event.request.method !== 'GET') return;

  let url = event.request.url;

  event.respondWith(

    caches.open(CACHE)
      .then(cache => {

        return cache.match(event.request)
          .then(response => {

            if (response && !navigator.onLine) {
                // return cached file
                console.log('cache fetch: ' + url);
                return response;
              }
               // make network request
              return fetch(event.request)
                .then(newreq => {

                  console.log('network fetch: ' + url);
                  if (newreq.ok) cache.put(event.request, newreq.clone());
                  return newreq;

                })
                // app is offline
                .catch(() => offlineAsset(url));



          });

      })

  );

});

score 0 · Answer 3 · answered Mar 08 '19 at 12:27

0

If you want to delete all caches

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

if you know the file name just

caches.delete(name);

answered Mar 08 '19 at 12:27

Alberto Perez

1,019
15
17

Website not updating when content changes in Cache-First strategy

3 Answers3