The target of Progressive Web Apps(PWA) is to provide awesome experiences like native Apps. There are three main points for PWA.
- Reliable: they should load fast and even work if you're offline
- Fast: it should be able to access device features in an intuitive way
- Engaging: Feel like a native App on mobile devices
This article notes the initialization of PWA on the React App.
- Use the following command to create a React app
- Use the following command to show hidden folders
npm run eject
- The config folder will show
Change the last line from
- 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
- 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
- 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.
- Progressive Web Apps (PWA) - The Complete Guide
- 三步驟客製化 Create React App 的 Service Worker
- Create-react-app service worker not functioning
There are some of my articles. Feel free to check if you like!