Introduction
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.
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
- Daily learning: https://daily-learning.herokuapp.com/
Top comments (0)