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

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

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

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

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.

That's it!

References

• Progressive Web Apps (PWA) - The Complete Guide
• 三步驟客製化 Create React App 的 Service Worker
• Create-react-app service worker not functioning

Articles

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

• My blog-posts for software developing: https://medium.com/a-layman
• My web resume: https://jenhsuan.github.io/ALayman/cover.html
• Facebook page: https://www.facebook.com/imalayman
• My website: https://www.alayman.io/