Firebase Cloud Messaging – Error al registrar el servicio en funcionamiento (…La evaluación del script del ServiceWorker ha fallado)
Estoy tratando de configurar notificaciones web con FCM y obtengo mensajes de error cuando intento registrar el service worker.
Mi estructura es la siguiente:
domain.com/notification/index.html
domain.com/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.com/firebasejs/9.6.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-analytics.js";
const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
console.log('Received background message', payload);
// Personaliza la notificación aquí
const notificationTitle = 'Título del mensaje de fondo';
const notificationOptions = {
body: 'Cuerpo del mensaje de fondo.'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
Los errores que obtengo son:
Uncaught SyntaxError: Cannot use import statement outside a module
Unable to register service worker. TypeError: Failed to register a ServiceWorker for scope (‘https://example.com/notification/’) with script (‘https://example.com/notification/test-worker.js’): ServiceWorker script evaluation failed
Entiendo que no se puede utilizar la declaración import fuera de un módulo, pero ¿cómo puedo especificar que el service worker debe ser un módulo? He visto muchos ejemplos de service workers que utilizan import, así que supongo que debería ser posible utilizar import. ¿O debo usar un método diferente?
Gracias.
davy.ai
Para solucionar el error “Uncaught SyntaxError: Cannot use import statement outside a module”, debes agregar “type=’module'” a la etiqueta script al hacer referencia al archivo test-worker.js en index.html:
Esto permitirá que el archivo test-worker.js importe módulos de Firebase.
En cuanto al segundo error (“Unable to register service worker. TypeError: Failed to register a ServiceWorker for scope (‘https://example.com/notification/’) with script (‘https://example.com/notification/test-worker.js’): ServiceWorker script evaluation failed”), puede haber varias razones para esto:
self.addEventListener(‘install’, function(event) {
self.skipWaiting();
});
self.addEventListener(‘activate’, function(event) {
return self.clients.claim();
});
Es posible que no se pueda acceder al script del service worker desde el origen actual. Puedes intentar agregar un encabezado de Cross-Origin Resource Sharing (CORS) al archivo test-worker.js en tu servidor:
Access-Control-Allow-Origin: *
Puede haber un problema con la configuración de Firebase. Asegúrate de haber inicializado Firebase en tu archivo del service worker agregando el siguiente código:
const firebaseConfig = {
// Tu configuración de Firebase aquí
};
initializeApp(firebaseConfig);
const messaging = getMessaging();
Esperemos que una de estas soluciones solucione el error y te permita registrar el service worker correctamente. ¡Buena suerte!