Testing Modern PWA - Clear Cache between apps

Scripture App Builder
1

The Modern PWA uses web caching for certain resources like images and styles. When testing the Modern PWA with the Run PWA button in the toolbar, SAB builds the PWA and then starts a development web server to run it. The web server runs on localhost at port 4173.

If you test multiple Modern PWAs, the resources from the previous run will be used. When you start a new Modern PWA, you will need to clear the cache for that host and port. I have not figured out how to do that programmatically from SAB (I would love to know). Here is how you can do this if you are using the Chrome browser.

Clear application data

  1. right-click on the browser and select “Inspect”
  2. select the Application tab at the top of the DevTools windows
  3. select the Storage entry under the Application category at the top
  4. click the Clear site data button at the right
  5. refresh the browser page

Clear Site Data extension

  1. Install the Clear Site Data extension on the chrome web store. You can pin the extension to your toolbar.
  2. when you have browse to the Modern PWA, run the Clear Site Data extension and clear the site data for the current website
  3. refresh the browser page
2

Someone asked how this can be done with the Edge browser. Most of the browsers have a right-click > inspect menu to get the DevTools for the browser.

Edge is based on Chromium. Here is the toolbar for the DevTools with the application tab highlighted with a red box:

image

Clicking on that icon displays the same UI as Chrome:

image
image603×442 40.3 KB

3

With Firefox, it is a little different. You still right-click and inspect, but there isn’t a way to clear all the storage. You really only need to clear the cache storage.

image
image999×260 58.8 KB

4

On Safari, you have to:

  1. Go to Safari preferences
  2. Go to the adavanced tab
  3. Enable ‘Show features for web developers’
  4. In the Develop menu (that was just added), select “Empty Caches”