{"id":15910585,"url":"https://github.com/davidnguyen11/create-react-progressive-web-app","last_synced_at":"2025-03-22T08:30:49.631Z","repository":{"id":105842752,"uuid":"80435523","full_name":"davidnguyen11/create-react-progressive-web-app","owner":"davidnguyen11","description":"Simple demo of progressive web app. This demo will display the news of technology from API provided by https://newsapi.org/","archived":false,"fork":false,"pushed_at":"2017-06-28T10:46:59.000Z","size":4594,"stargazers_count":60,"open_issues_count":1,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T14:37:42.628Z","etag":null,"topics":["create-react-app","demo","material-ui","offline-js","progressive-web-app","react","react-router","redux","redux-saga","sw-toolbox"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidnguyen11.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-30T15:46:04.000Z","updated_at":"2023-06-26T15:36:26.000Z","dependencies_parsed_at":"2023-06-14T10:30:17.793Z","dependency_job_id":null,"html_url":"https://github.com/davidnguyen11/create-react-progressive-web-app","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"cfc38305f5e66f839ffdfbf327760dc745fa1fc4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidnguyen11%2Fcreate-react-progressive-web-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidnguyen11%2Fcreate-react-progressive-web-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidnguyen11%2Fcreate-react-progressive-web-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidnguyen11%2Fcreate-react-progressive-web-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidnguyen11","download_url":"https://codeload.github.com/davidnguyen11/create-react-progressive-web-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244198362,"owners_count":20414442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","demo","material-ui","offline-js","progressive-web-app","react","react-router","redux","redux-saga","sw-toolbox"],"created_at":"2024-10-06T15:09:58.733Z","updated_at":"2025-03-22T08:30:49.626Z","avatar_url":"https://github.com/davidnguyen11.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What's this project?\n\nThis is a demo of PWA (Progressive Web App) based on [react-create-app](https://github.com/facebookincubator/create-react-app) and [create-react-pwa](https://github.com/jeffposnick/create-react-pwa). I made a simple demo about web app display technology news using API from [https://newsapi.org/](https://newsapi.org/).\n\n# Development\n\nThis project I have included: redux, reactjs, redux-saga, react-router \u0026 material-ui.\n\ncd to directory contains ```package.json``` and run commands below:\n```\nnpm i\n```\n\n```\nnpm start\n```\n\nAnd then go to [http://localhost:3000/](http://localhost:3000/)\n\n## Learn more\n\n - [redux](https://github.com/reactjs/redux)\n - [redux-saga](https://github.com/redux-saga/redux-saga)\n - [react-router](https://github.com/ReactTraining/react-router)\n - [material-ui](http://www.material-ui.com/#/)\n - [offline-js](http://github.hubspot.com/offline/docs/welcome/)\n\n### Description\n\n- `redux \u0026 redux-saga`: To handle data flow\n- `react-router`: To handle routing\n- `material-ui`: To handle UI\n- `offline-js`: To detect when user is in offline mode to display snackbar \u0026 change color of UI to gray color.\n\n## Add to home screen\n\nIn this mode, you should get:\n- **address bar**: disappear when you use your web app\n- **touch icon**: you will see the icon of your web app on your home screen (on phone only)\n\n### iOS\n\nOne 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 `\u003chead\u003e`. You can follow this url to make one: \n\n[https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)\n\n### Android\n\nAndroid will use the `manifest.json` to handle `Add to home screen` mode. You can follow this url make one:\n\n[https://developer.mozilla.org/en-US/docs/Web/Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)\n\n# Production\n\ncd to directory contains ```package.json``` and run commands below:\n```\nnpm run build\n```\n\n```\npushstate-server build\n```\n\nAnd then go to [http://localhost:9000/](http://localhost:9000/)\n\n# Demo\n\n## Demo 1\n\n[https://www.youtube.com/watch?v=U35B31dBvBk](https://www.youtube.com/watch?v=U35B31dBvBk)\n\n[![Progressive web app demo](http://i.imgur.com/wmYg8pX.png)](https://www.youtube.com/watch?v=U35B31dBvBk \"Progressive web app demo\")\n\n## Demo 2\nColor change when web app is in offline mode\n\n![img](docs/demo/demo2.gif)\n\n## Demo 3\nTouch icon in `Add to home screen` mode\n\n![img](docs/demo/demo3.gif)\n\n# References\n\n- [create-react-app](https://github.com/facebookincubator/create-react-app)\n\n- [create-react-pwa](https://github.com/jeffposnick/create-react-pwa)\n\n- [sw-toolbox](https://github.com/GoogleChrome/sw-toolbox)\n\n- [redux-saga](https://redux-saga.github.io/redux-saga/docs/introduction/BeginnerTutorial.html)\n\n- [https://jakearchibald.com/2014/offline-cookbook/#network-only](https://jakearchibald.com/2014/offline-cookbook/#network-only)\n\n- [https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Basic_architecture](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Basic_architecture)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidnguyen11%2Fcreate-react-progressive-web-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidnguyen11%2Fcreate-react-progressive-web-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidnguyen11%2Fcreate-react-progressive-web-app/lists"}