Vue Js register/update a ServiceWorker error - javascript

I trying to implement Firebase Push Notification into Vue Js and after doing watching this video https://www.youtube.com/watch?v=XdzXaW8IbBM I tried to implement it, but after writing below code in firebase-messaging-sw.js it is giving me error on service worker. Both I have provided below.
Code firebase-messaging-sw.js
importScripts('/__/firebase/3.8.0/firebase-app.js');
importScripts('/__/firebase/3.8.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');
firebase.messaging();
Error
Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/firebase-cloud-messaging-push-scope’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/firebase-messaging-sw.js’. Must be ‘text/javascript’, ‘application/x-javascript’, or ‘application/javascript’.
2nd Error
FirebaseError: Messaging: We are unable to register the default service worker.
The operation is insecure. (messaging/failed-serviceworker-registration).
Note: My application is on Vue Js + Nuxt Js
When I am trying to get the token on console I am getting below output.
Promise { <state>: "pending" }

Related

Browser loading unrelated (non-existent) file when registering a service worker in an extension

I'm registering a service worker in an extension, but getting a TypeError because the browser is trying to load my service worker file as a path of the website in addition to my extension's file.
Registering like:
navigator.serviceWorker.register('swerk.js', {scope: '.'})
along with a then and catch for the promise in a main.js (and swerk.js is included in the manifest content_scripts).
In swerk.js, I just have a print to indicate when the worker is loaded.
When the extension is loaded and the service worker is registered, the print does succeed. However, the browser also attempts to load /swerk.js, which of course doesn't exist because I don't own the host and swerk.js is in my extension, so I get a TypeError:
extension loaded main.js:2:13
sworker loaded! swerk.js:1:9
Service worker registration failed: TypeError: ServiceWorker script at <URL>/swerk.js for scope <URL> encountered an error during installation. main.js:8:21
and the promise's catch is called as expected because of the error. But why's <URL>/swerk.js being loaded?!
Using Firefox 109.0.
Are you sure you also have to include the swerk.js in the content-script? As it is already loaded by your sw registerer script.

FETCH ERROR : request to https://www.gstatic.com/firebasejs/releases.json failed, reason: unable to get local issuer certificate

I'm getting this error, while hosting my REACT-APP using firebase. Does anybody have an idea how to solve this issue?
I read somewhere about setting NODE_TLS_REJECT_UNAUTHORIZED to 0, but don't know exactly how to implement it.
Here's a snip of my terminal :-
Img-1
Img-2
I am using VS code, I'm getting this error while hosting my REACT app using firebase.

Firebase messaging in production

I have a project that works with FCM. On the localhost, every thing works fine and I get the token for FCM; but, in production, I get this error:
FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://myxdomain.com/firebase-cloud-messaging-push-scope') with script ('https://myxdomain/firebase-messaging-sw.js'): A bad HTTP response code (403) was received when fetching the script. (messaging/failed-service-worker-registration).
I'm deploying my app in an Apache server.
As mentioned here, you need to add firebase-messaging-sw.js file in correct folder. It may be something like this: /var/www/...

Failed to register service-worker TypeError - Expo Error

I have recently encountered the following error when I npm run start my expo app;
Uncaught DOMException: Failed to execute 'importScripts' on
'WorkerGlobalScope': The script at
'http://localhost:19006/service-worker.js' failed to load.
at http://localhost:19006/expo-service-worker.js:93:6
The script has an unsupported MIME type ('text/html').
This error has never occurred until of late, in which I pulled down the app source code onto a new machine, so I have a incline that this could be the issue.
When I used to Service Worker debugger using Chrome Dev Tools, the error flags up on the last line of the code in expo-service-worker.js (see screenshot)
I have literally done nothing different, I have seen other solutions stating I should modify some of the service-worker registration code, but this sits uncomfortable with me being as this is an automatic process when running the app.
The app boots-up fine, but it has trouble connecting to the external api linked to the app, because the service worker is not being registered.
One my other machine, the app launches, registers a service worker and connects to the api fine, just not on the machine currently.
Any suggestions?
Thanks.
A service worker importScripts() script must be served with a valid javascript content-type header. See:
https://w3c.github.io/ServiceWorker/#dfn-bad-import-script-response
In this case you are getting a content-type of text/html. One common way this can happen is if the server returns a 404 for the resource URL passed to importScripts.

Failed to register a ServiceWorker, script evaluation failed

I have created a service worker and I need to add an external JS library to it. According to this, I can use importScripts(URL) to do that. The first line of my sw.js is:
self.importScripts('https://cdn.scaledrone.com/scaledrone.min.js');
But when I register the Service worker I get this error with a reference to that line. (If I remove that line the error message is gone)
Uncaught null
TypeError: Failed to register a ServiceWorker for scope ('http://example.com/sw/')
with script ('http://example.com/sw/sw.js'): ServiceWorker script evaluation failed
What am I doing wrong? It seems to work for most people. (Here, here, here and here)

Categories