Who is caching my pwa app?

Ionic Framework
1

Hi,
I made a small change to my PWA app and rebuilt the files with “ionic build”, but without increasing the version number. I uploaded the new files to my app server. Then I uninstalled the app on my cell phone. I then re-entered the app address in the browser to reinstall the app. However, the installation manager keeps reinstalling the older files so that the change I made is not there. I am now asking myself: where do the old files still come from? Where can I switch off this “cashing”? Do I have to increase the version number in the angular.json file every time I make small changes so that the installation manager reloads all the files from the server?

2

In a Progressive Web App (PWA), caching is often managed by the service worker. The service worker is a script that your browser runs in the background, separate from a web page, and it can intercept and cache network requests. This is to enable offline functionality and improve performance by serving cached resources when available.

To ensure that your changes are reflected in the PWA after updating your app, you may need to follow these steps:

  1. Clear Browser Cache:
  • After updating your app files, make sure to clear the browser cache. This ensures that the browser fetches the latest files from the server.
  • You can do this manually through the browser settings or use a keyboard shortcut. The specific steps depend on the browser you are using.
  1. Update Service Worker:
  • Service workers often cache resources aggressively for performance reasons. Ensure that your service worker is configured to update the cache when there are changes.
  • One common approach is to version your cache names or use a cache-busting strategy. This can be done by appending a query parameter with a version number to your resource URLs.
  1. Increment Version Number:
  • When you make changes to your PWA, especially if they are significant, it’s a good practice to increment the version number in the service worker file. This will force the service worker to update and cache the new files.
  1. Check Service Worker Lifecycle Events:
  • Review the lifecycle events in your service worker, such as install and activate. Ensure that these events are handling the cache management correctly.

Example of a cache-busting strategy in a service worker:

const cacheName = 'my-app-v1';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
        // Add other files here
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

In this example, changing the cacheName variable will force the service worker to create a new cache, effectively bypassing the old cache.

2 Likes