How to enable PWA on React + AEM SPA? (404 error)

[carbenav]

I am following this tutorial: https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/...

and haven't found a way to install a service worker. 

I did try by:

1. Creating a service-worker.js file in the react-app/scr folder.
2. Importing and registering it on the index.js file
   [ So far, just as any regular react app]
3. Adding the reference to service-worker file in the clientlib.config.js file in the libs:assets:js array
   
   libs: {

       ...

       assets: {

       js: [

          "build/static/**/*.js",

          "build/service-worker.js"

       ],

   That got the service-worker.js from the react-app/build to the ui.apps/... /clientlibs/react-app/js/service-worker.js

   but when running the aem instance I got an 404 error on the service-worker.js file request.

   

[Suraj_Kamdi]

@carbenav  Please go through https://blogs.perficient.com/2019/09/17/creating-your-first-custom-aem-component-using-react-part-1/

I hope this will help you to resolve your issue.

[carbenav]

Hi @Suraj_Kamdi, It seems your post is about creating a custom component, but my question is about issues with a service-worker.js file.

[Suraj_Kamdi · Accepted solution]

@carbenav  See this repo https://github.com/PerficientDigital/my-aem-project/blob/master/my-aem-react-app/src/serviceWorker.j... from my blog.

Hope this will resolve your issue.