Usamos gatsby-plugin-offline para obtener un trabajador de servicio generado automáticamente. Funciona bien ya que todas las páginas están disponibles sin conexión ahora. Con el siguiente código en gatsby-config.js, se puede agregar código adicional al trabajador del servicio.
{ resolve: `gatsby-plugin-offline`, options: { appendScript: 'src/custom-sw-code.js', }, }, Dentro de custom-sw-code.js no pudimos importar ningún paquete npm hasta ahora. Si usamos import o require encima del archivo, los navegadores se quejan de que el código del trabajador de servicio no funciona (después de construir y servir la aplicación).
¿Sabes cómo importar paquetes en el serviceworker?
Si desea incorporar scripts externos a un trabajador de servicio, importScripts() le ayudará. (Otra opción es usar importaciones de módulos ES estáticos , pero no son compatibles con todos los navegadores a partir de este escrito).
Para cada URL de secuencia de comandos que pase, importScripts() descargará y ejecutará el código de forma sincrónica dentro del contexto del ServiceWorkerGlobalScope actual. El trabajador del servicio también se encargará de almacenar automáticamente en caché las secuencias de comandos, por lo que no necesita agregar manualmente esas URL a un caché, y la solicitud de esas secuencias de comandos no activará los detectores de eventos de fetch de su trabajador del servicio.
Si está cargando código desde npm desde una CDN, asegúrese de que está solicitando un paquete UMD o IIFE , y tome nota de cuáles son los símbolos globales exportados, ya que eso es lo que terminará expuesto en ServiceWorkerGlobalScope .