How to enable PWA on React + AEM SPA? (404 error) | Community
Skip to main content
New Participant
Apr 6, 2020 6:44 AM UTC
Solved

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

I am following this tutorial: https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/react/chapter-3.html#help

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.
     
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Suraj_Kamdi
Suraj_KamdiAccepted solution
New Participant
Apr 7, 2020 8:13 AM UTC

3 replies

Suraj_Kamdi
Suraj_KamdiAccepted solution
New Participant
Apr 7, 2020 8:13 AM UTC

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

 

Hope this will resolve your issue.

Translate
Suraj_Kamdi
New Participant
Apr 6, 2020 7:52 AM UTC

@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.

Translate
carbenavAuthor
New Participant
Apr 7, 2020 1:36 AM UTC
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.
Translate