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

Introduction

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.

Steps

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

serviceWorker.unregister();

to

serviceWorker.register();

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

6.Validations

  • 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!

References

Articles

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

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh

@jenhsuan

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.

Discussion

markdown guide