Skip to content

Simple demo of progressive web app. This demo will display the news of technology from API provided by https://newsapi.org/

Notifications You must be signed in to change notification settings

davidnguyen11/create-react-progressive-web-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What's this project?

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/.

Development

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/

Learn more

Description

  • redux & redux-saga: To handle data flow
  • react-router: To handle routing
  • material-ui: To handle UI
  • offline-js: To detect when user is in offline mode to display snackbar & change color of UI to gray color.

Add to home screen

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)

iOS

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:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Android

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

Production

cd to directory contains package.json and run commands below:

npm run build
pushstate-server build

And then go to http://localhost:9000/

Demo

Demo 1

https://www.youtube.com/watch?v=U35B31dBvBk

Progressive web app demo

Demo 2

Color change when web app is in offline mode

img

Demo 3

Touch icon in Add to home screen mode

img

References

Releases

No releases published

Packages

No packages published