Android localhost: "Unknown error when fetching script." for Firebase Messaging ServiceWorker

Question

I am working on a web app with Ionic Angular framework that should be able to send across messages between the app served via the browser and its Android version. I am using Firebase Cloud Messaging, because my app otherwise uses Firebase already.

I followed this tutorial https://medium.com/@david.dalbusco/add-web-push-notifications-to-your-ionic-pwa-358f6ec53c6f, and also went through a recent follow-up of the post by the same author https://itnext.io/follow-up-web-push-notifications-and-pwa-in-2020-54d27fbc829a.

When testing locally on Firefox and Chrome, everything works as expected. Messages can be sent off and received.

The problem comes when I try to achieve the same on my Android test device. The ServiceWorker fails to register. The SW script ("firebase-messaging-sw.js") is placed in the src web root. I tediously went through all instructions, so also my angular.json file contains a reference with

"assets":
  [...
    "src/firebase-messaging-sw.js"
  ]

When running my app as debug package on Android, and connecting it to Chrome DevTools , the device inspection prints out following error:

TypeError: Failed to register a ServiceWorker for scope ('https://localhost/') with script ('https://localhost/firebase-messaging-sw.js'): An unknown error occurred when fetching the script.

But when I enter the given path https://localhost/firebase-messenging-sw.js in the address bar of the DevTools window, the file is found and its content is displayed.

The exact same problem happens when using http.

Now for Android, I added already the lines <preference name="Scheme" value="https" /> and <preference name="ResolveServiceWorkerRequests" value="true" /> to the config.xml. But as you can see, it doesn't help.

I went through the Firebase documentation, triple-checked the given guidelines and searched here on StackOverflow. There are similar references regarding the ServiceWorker returning 404, but none is related to the problem on Android.

Have I overlooked something Android-specific to make the ServiceWorker work from localhost on the device?

Answer 1

The problem could be that you are trying to access localhost on another device, try to replace it by actual server ip, https://dev.to/jha/how-to-test-ionic-react-pwa-on-an-actual-device-while-developing-you-should-36m