This is a demo of PWA (Progressive Web App) based on react-create-app and create-react-pwa. I made a simple demo about web app display technology news using API from https://newsapi.org/.
This project I have included: redux, reactjs, redux-saga, react-router & material-ui.
cd to directory contains package.json and run commands below:
npm i
npm start
And then go to http://localhost:3000/
redux & redux-saga: To handle data flowreact-router: To handle routingmaterial-ui: To handle UIoffline-js: To detect when user is in offline mode to display snackbar & change color of UI to gray color.
In this mode, you should get:
- address bar: disappear when you use your web app
- touch icon: you will see the icon of your web app on your home screen (on phone only)
One note that. If you wish to have Add to home screen mode at iOS. You have to put the meta tags defined by Apple to you <head>. You can follow this url to make one:
Android will use the manifest.json to handle Add to home screen mode. You can follow this url make one:
https://developer.mozilla.org/en-US/docs/Web/Manifest
cd to directory contains package.json and run commands below:
npm run build
pushstate-server build
And then go to http://localhost:9000/
https://www.youtube.com/watch?v=U35B31dBvBk
Color change when web app is in offline mode
Touch icon in Add to home screen mode
