Cómo personalizar a los trabajadores del servicio con create-react-app

Este es un seguimiento de mi publicación anterior sobre la creación de una PWA con create-react-app (CRA). En la publicación vinculada, hablé de cómo podríamos construir un Service Worker (SW) personalizado mientras permanecíamos dentro del shell create-react-app.

Si siguió la publicación (y con suerte lo hizo funcionar), habría notado un defecto crítico. Todavía es extremadamente difícil desarrollar un software en un entorno de desarrollo. Esencialmente, tendría que modificar su código SW, ejecutar un proceso de compilación, probarlo, solucionar cualquier error, actualizar y repetir. Hablando por experiencia, es un proceso agotador.

Sigamos adelante y averigüemos cómo resolver ese problema.

Trabajar en modo de desarrollo

Bien, entonces, ¿cómo hacemos que un SW se ejecute en modo dev, para que podamos escribir rápidamente un código incorrecto y averiguar qué funciona y qué no?

Primero, averigüemos por qué no funciona en modo dev. Cree un nuevo proyecto de CRA y abra el registerServiceWorker.jsdebajo del srcdirectorio.

En la esencia anterior, solo tengo el código relevante. Notarás un cheque condicional process.env.NODE_ENV === 'production'. Esto es para verificar si está ejecutando una compilación de producción. Si no está ejecutando una compilación de producción, el software será reemplazado por un archivo sin operación.

El razonamiento detrás de esta decisión se proporciona en este número de GitHub.

Primero, intente ejecutar yarn startsu aplicación y busque un archivo SW en la ventana de la barra de herramientas. Si hace clic en el service-worker.jsenlace de la barra de herramientas, se le mostrará el siguiente archivo:

Afortunadamente, existe una solución sencilla para esto. Es un proceso sencillo de dos pasos.

Primero, dentro del registerServiceWorker.jsarchivo, busque la window.addEventListener('load')llamada a la función. La primera línea es una declaración swUrlque dice:

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

Cambie el nombre de la service-workerparte con cualquier otra cosa. Voy a nombrar el mío service-worker-custom.js.

En segundo lugar, cree un archivo dentro de su directorio público con exactamente el mismo nombre que el nombre personalizado que acaba de crear. Entonces, crearía un archivo llamado service-worker-custom.jsdentro del directorio público.

Ahora, dentro del service-worker-custom.js, coloque una declaración de registro simple. Algo así como: console.log('My custom service worker').

Ahora, ejecute su aplicación nuevamente con yarn starty debería ver aparecer la declaración de registro en la consola de su navegador. Es posible que deba cancelar el registro de un trabajador de servicio anterior si alguna vez ejecutó yarn start antes de esto.

Así que ahí lo tienes. Un trabajador de servicio personalizado que puede ejecutar de forma segura dentro del modo de desarrollo.

Nota: No es aconsejable probar un trabajador de servicio en un entorno de desarrollo fuera del modo de navegación privada en su navegador. Además, siempre asegúrese de que Update On Reload esté marcado dentro de la ventana de herramientas de desarrollo cuando realice pruebas en modo de desarrollo.

Combinando Dev y Prod

Ahora, hemos descubierto cómo probar un software en modo dev. Sin embargo, también necesitamos encontrar una manera de inyectar nuestro código personalizado en el software generado por CRA en una compilación de producción.

Si mantiene todo como está con las configuraciones que hemos realizado hasta ahora y ejecuta un proceso de compilación y verifica la compilación en su navegador, notará que el archivo SW generado es el personalizado que creamos. Esto es un problema, porque queremos poder combinar las bondades de lo que CRA tiene para ofrecernos con nuestro propio código.

Podemos hacer esto con la sw-precachebiblioteca. Presenté esta biblioteca en mi publicación anterior. Aquí está el enlace de GitHub a la sw-precachebiblioteca.

Instale la biblioteca con yarn add sw-precache. Una vez que haya hecho eso, cree un sw-precache-config.jsarchivo en su directorio raíz. Aquí está mi archivo:

Presenté la mayor parte de este archivo en la publicación anterior. La única novedad es la importScriptsopción. Esto se explica por sí mismo, simplemente importa el archivo especificado por la ruta y estamos intentando importar nuestro archivo SW personalizado.

Notará que la ruta del archivo carece del ./publicprefijo, a pesar de que el archivo está presente en nuestro publicdirectorio. Explicaré esto en un momento.

Ahora, actualice su package.jsonarchivo con una modificación al buildcomando. Haga su buildcomando lo siguiente:

react-scripts build && sw-precache --config=sw-precache-config.js

Ahora, volvamos a la ruta del archivo que proporcionamos a la opción importScripts. Si lo nota, sw-precacheesencialmente se está ejecutando como un proceso de compilación posterior. Ahora, si simplemente ejecuta un proceso de compilación y abre el directorio de compilación que se crea, notará su archivo de trabajador de servicio personalizado en la carpeta de compilación. Cuando proporcionamos una ruta a la importScriptsopción, la proporcionamos en relación con el directorio de compilación.

Una vez que haya hecho todo eso, continúe y ejecute la versión de compilación de su aplicación, y notará que la declaración de registro aparece una vez más en la consola de su navegador.

¡Bueno, ahí lo tienes! ¡Ahora puede inyectar código SW personalizado en el SW predeterminado generado por CRA!