Estoy tratando de configurar las notificaciones web con FCM y recibo mensajes de error cuando intento registrar al trabajador del servicio.
Mi estructura es la siguiente:
dominio.com/notificación/index.html
dominio.com/notificación/test-worker.js
Índice.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'); }trabajador de prueba.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); // Customize notification here const notificationTitle = 'Background Message Title'; const notificationOptions = { body: 'Background Message body.' }; 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 failedEntiendo que la importación no se puede usar fuera de un módulo, pero ¿cómo puedo especificar que el trabajador del servicio debe ser un módulo? He visto muchos ejemplos de trabajadores de servicios que usan import, así que supongo que debería ser posible usar import. ¿O debería usar un método diferente?
Gracias
Luché con este mismo problema por un tiempo. Mucha búsqueda, prueba y error después. Descubrí que debe registrar su trabajador de servicio como un módulo.
navigator.serviceWorker.register('/firebase-messaging-sw.js', { type: 'module' });Después de eso, debería poder llamar a la importación desde su archivo.
Esto es algo muy extraño para mí también. Intenté perseguir el tipo de trabajador de servicio MIME también, pero no tuve suerte. Parece que no hay más buenos recursos para usar la versión 9 con trabajadores de servicio. Tengo que migrar un proyecto a la última versión, pero aún debo mantener bibliotecas compactas.
Sin embargo, existe un método para cargar SW como un módulo, no es seguro para el nivel de producción. Espero que alguien responda este hilo.