0

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!

Devin Smith
  • 63
  • 8

1 Answers1

0

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.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Hi Jeff, thanks for getting back to me, I have now moved my sw01.js to my root folder however it is just showing redundant and the manifest still can't find it, I see on this link someone said I can have the service worked in any directory however I need to add a service-worker-allowed custom header, do you know where this should be added? – Devin Smith Aug 05 '21 at 11:09
  • You shouldn't have to add that header. Moving the service worker to the top-level directory like you've already done should be sufficient. If it's showing up as redundant it might be due to a programming error in the code—if it throws an exception during `install`, that's one reason why it would be redundant. – Jeff Posnick Aug 05 '21 at 14:26
  • Thanks Jeff, i have now seen in the chrome console I am getting an error `The script has an unsupported MIME type ('text/html').` I am assuming this is the reason for the redundant service worker, my service worker registration in the HTML – Devin Smith Aug 05 '21 at 18:42
  • Hi Jeff, just an FYI - i am starting over again and following the get started on Workbox, I have placed the `console.log('Hello from service-worker.js');` in a service-worker.js and added the JS in my HTML body and I get the same error: `Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://app.mywebsite.com/') with script ('https://app.mywebsite.com/service-worker.js'): The script has an unsupported MIME type ('text/html').` – Devin Smith Aug 05 '21 at 19:21
  • That means your web server is sending HTML (likely the HTML associated with a custom 404/Not Found page) instead of the actual JavaScript for your `service-worker.js` file. You would need to check out your web server config to figure out why that is. – Jeff Posnick Aug 05 '21 at 21:56
  • Thanks Jeff, I decided to move my Service worker and Manifest into my assets folder and handle the redirect via the webserver which works like a charm – Devin Smith Aug 06 '21 at 18:58