Facing issue to load updated content in PWA

Ionic Framework ionic-v3
1

Hello , I have developed the PWA using ionic 2 … When I am trying to compile the code to upload it on the server and enabling the service worker in index.html file.

My problem is that the changes are not reflected in when I browse the application in my device . How would I get the updated content after compiling the code ?

Please help me .

Regards
Surjan

2

Sometimes the browser use the cached Version of your page.

So first try to refresh your page in the broeser (F5) or clear your browser cach.

3

I think it is because of the service worker … not because of browser cache . I am accessing the application in mobile browser .

I am no getting a way to deliver fresh content on each compilation …

Do you have any idea how to do the versioning ?

Regards
Surjan

4

Depending on when you started your app, the service worker might still use the self.toolbox.cacheFirst strategy. If that’s the case, change it to self.toolbox.fastest. See this PR and the forum posts linked there for further discussion.

5

Chrome allows you to inspect service workers and offload then. Somewhere in dev tools

6

My service worker looks like this, after making the changes . Let me know what need be changed …

/**
 * Check out https://googlechrome.github.io/sw-toolbox/ for
 * more info on how to use sw-toolbox to custom configure your service worker.
 */


'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache-v1'
};

// pre-cache our key assets
self.toolbox.precache(
  [
    './build/main.js',
    './build/vendor.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

// dynamically cache any other local assets
//self.toolbox.router.any('/*', self.toolbox.cacheFirst);
self.toolbox.router.any('/*', self.toolbox.fastest);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
7

Also, this can be due to the CDN that you are using.
When deploying SPAs, it’s a well-known issue how do you tell the CDN to update the contents after a new version has been uploaded.
There are mainly two ways of doing this:

  1. By evicting the cache of all servers in the CDN.
  2. By using a versioned file name in your deployment.

The most effective is the second, and for that there are several techniques, being the most convenient using a webpack plugin to instruct webpack to version the output files.

Here is a good example: https://www.alleyinteractive.com/news/smarter-webpack-versioning-with-webpack-git-hash/

I don’t know if there’s a way to include a webpack plugin in Ionic?

Carlos