PWA cache #9072

1 Answer(s)

• 

  0

  enisn created 6 days ago

  Support Team .NET Developer

  Hi,

  Whenever the file name is exactly same, the service-worker and browser do not download it again. In this scenario, people uses v parameter in the querystring with the file hash or actual version like main.js?v=1f129b3...daab834 or main.js?v=1.0.2 etc.

  Whenever the file path is changed even with querystring, it's considered as a new file and re-downloaded.

  ABP startup templates already has this unique file hash as a version in the templates:
  
  

  When you execute abp bundle command to update bundles, it'll update the hashes in the file links too.

  ---

  If you face a problem with *.dll files, here you can follow this workaround.

  1. Add id="global-script" to your <script> tag in App.razor file.

  <script id="global-script" src="global.js?_v=638524142774706627"></script>
  

  2. Go to service-worker.published.js file and create a function to store this version and check it:

  
  function isVersionMismatch() {
      const globalScript = document.getElementById('global-script');
      const version = globalScript.getAttribute('src').split('?')[1];
      const cacheVersion = localStorage.getItem('abp.assets.version');
  
      // Update the cache version
      localStorage.setItem('abp.assets.version', version);
      return version !== cacheVersion;
  }
  

  3. Find onFetch function in the same file and append the check right at the begginning of the function to check version mismatch:

  async function onFetch(event) {
      if (isVersionMismatch()) {
          return fetch(event.request);
      }
  
      // ... rest of the codes
  }
  

  Save Cancel