Simple demo of progressive web app. This demo will display the news of technology from API provided by https://newsapi.org/
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:
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