Cover image for Day 37 of #100DaysOfCode: PWA + SPA: initialize PWA  on Create React App(CRA)

Day 37 of #100DaysOfCode: PWA + SPA: initialize PWA on Create React App(CRA)

jenhsuan profile image Jen-Hsuan Hsieh ・2 min read


The target of Progressive Web Apps(PWA) is to provide awesome experiences like native Apps. There are three main points for PWA.

  1. Reliable: they should load fast and even work if you're offline
  2. Fast: it should be able to access device features in an intuitive way
  3. Engaging: Feel like a native App on mobile devices

This article notes the initialization of PWA on the React App.


1. Create a React app

  • Use the following command to create a React app
create-react-app pwa-example

2. Show hidden configure files

  • Use the following command to show hidden folders
npm run eject
  • The config folder will show Alt Text

3. Edit src/index.js

Change the last line from




4. Generate files for production

  • Use the following command to build static files ad assets
npm run build
  • It will generate the build folder with filed including service-worker.js Alt Text

5. Create a temporarily server to render pages

  • Use the following command to install serve and execute it to listen the build folder
npm install -g serve
serve -s build
  • Serve will start to listen requests Alt Text


  • Open the browser and visit http://localhost:5000/
  • Open the developer tool and select Application/Service Workers
  • Check Offline and reload. The page should be rendered correctly. Alt Text

That's it!



There are some of my articles. Feel free to check if you like!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh


6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.


markdown guide