Deploy PWA problems

Question

I have been reading all the threads on here regarding PWA deployment and none of the fixes are working.

I have a Python web app hosted on python anywhere and would like to deploy it as a PWA.

When I add my manifest.json to my root folder and reference this in the index.html file with the below:

<link rel="manifest" href="./manifest.json" />

i get the following error:

manifest error

If I then move my Manifest file to my /assets folder and update my href in my index.html to:

<link rel="manifest" href="/assets/manifest.json" />

my manifest starts working - then I get an error of service worker not being matched:

Service worker error in Manifest

I tested my service worker in my root folder, same issue as the manifest above, I have moved my service worker to my /assets/ folder and set my index.html file to read this:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', ()=> {
      navigator
      .serviceWorker
      .register('/assets/sw01.js')
      .then(()=>console.log("Ready."))
      .catch(()=>console.log("Err..."));
    });
  }
</script>

My service worker shows it is running in chrome:

Service Worker running

However my manifest shows no matching service worker.

additional information:

• My Start URL in my manifest is set to "https://app.mywebsite.com/"
• I do not have a scope, I have tested multiple scopes with no luck ".", "/", "https://app.mywebsite.com/"
• I have tested my Manifest href as "manifest.json", "/manifest.json", "./manifest.json", "/%PUBLIC_URL%/manifest.json" the manifest only works when distributed into a folder not on my root folder, same thing with my service worker

Any assistance would be greatly appreciated!

Answer 1

This is a service worker scope issue, along the lines of Understanding Service Worker scope.

If you serve you service worker from /assets/sw01.js, it can't control /. You should move your service worker to the top-level, like /sw01.js.