javascript - Firebase Cloud Messaging - Error when registering service working (...ServiceWorker script evaluation failed) - Sta

admin管理员组

文章数量:1318991

I'm trying to setup up web notifications with FCM and I get error messages when trying to register the service worker.

My structure is as follows:

domain/notification/index.html

domain/notification/test-worker.js

Index.html:

function registerServiceWorker() 
{
    console.log('start register');
    return navigator.serviceWorker.register('/notification/test-worker.js')
    .then(function(registration) 
        {
            console.log('Service worker successfully registered.');
            askPermission();
            return registration;
        })
    .catch(function(err) 
        {
            console.error('Unable to register service worker.', err);
        });
    console.log('end register');
}

test-worker.js

 import { initializeApp } from ".6.1/firebase-app.js";
 import { getAnalytics } from ".6.1/firebase-analytics.js";

 const messaging = getMessaging();
 onBackgroundMessage(messaging, (payload) => {
   console.log(' Received background message ', payload);
   // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
   body: 'Background Message body.'
 };

  self.registration.showNotification(notificationTitle,
   notificationOptions);
});

The errors I get are:

Uncaught SyntaxError: Cannot use import statement outside a module
Unable to register service worker. TypeError: Failed to register a ServiceWorker for scope ('/') with script ('.js'): ServiceWorker script evaluation failed

I understand that import cannot be used outside of a module but how can I specify that the service worker should be a module? I have seen many examples of service workers using import so I guess it should be possible to use import. Or should I use a different method?

Thanks

I'm trying to setup up web notifications with FCM and I get error messages when trying to register the service worker.

My structure is as follows:

domain./notification/index.html

domain./notification/test-worker.js

Index.html:

function registerServiceWorker() 
{
    console.log('start register');
    return navigator.serviceWorker.register('/notification/test-worker.js')
    .then(function(registration) 
        {
            console.log('Service worker successfully registered.');
            askPermission();
            return registration;
        })
    .catch(function(err) 
        {
            console.error('Unable to register service worker.', err);
        });
    console.log('end register');
}

test-worker.js

 import { initializeApp } from "https://www.gstatic./firebasejs/9.6.1/firebase-app.js";
 import { getAnalytics } from "https://www.gstatic./firebasejs/9.6.1/firebase-analytics.js";

 const messaging = getMessaging();
 onBackgroundMessage(messaging, (payload) => {
   console.log(' Received background message ', payload);
   // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
   body: 'Background Message body.'
 };

  self.registration.showNotification(notificationTitle,
   notificationOptions);
});

The errors I get are:

Uncaught SyntaxError: Cannot use import statement outside a module
Unable to register service worker. TypeError: Failed to register a ServiceWorker for scope ('https://example./notification/') with script ('https://example./notification/test-worker.js'): ServiceWorker script evaluation failed

I understand that import cannot be used outside of a module but how can I specify that the service worker should be a module? I have seen many examples of service workers using import so I guess it should be possible to use import. Or should I use a different method?

Thanks

• javascript
• firebase-cloud-messaging
• service-worker

Share Improve this question Follow edited Dec 23, 2021 at 7:41 Laurent asked Dec 22, 2021 at 21:59 LaurentLaurent 1,56322 gold badges2222 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I fought with this same issue for a while. Lots of searching, trial and error later. I figured out that you have to register your service worker as a module.

navigator.serviceWorker.register('/firebase-messaging-sw.js', { type: 'module' });

After that you should be able to call the import from your file.

This is something very weird for me too. I tried chasing MIME type of service worker also but no luck. It looks there are no more good resources to use version 9 with service workers. I have to migrate a project to latest version, but I still have to keep pact libraries.

However, there is a method to load SW as a module, it is not safe for production level. Hope someone will answer this thread.

本文标签：