https://github.com/icelam/hk-top-news

A PWA app for fetching top news in Hong Kong
https://github.com/icelam/hk-top-news

create-react-app material-ui progressive-web-app pwa react reactjs

Last synced: 8 days ago
JSON representation

A PWA app for fetching top news in Hong Kong

• Host: GitHub
• URL: https://github.com/icelam/hk-top-news
• Owner: icelam
• License: mit
• Created: 2019-07-21T06:08:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-01T09:50:59.000Z (about 1 year ago)
• Last Synced: 2024-11-06T18:53:00.676Z (about 2 months ago)
• Topics: create-react-app, material-ui, progressive-web-app, pwa, react, reactjs
• Language: JavaScript
• Homepage: https://icelam.github.io/project-details/hk-top-news
• Size: 5.33 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



Hong Kong Top News PWA



    A Progressive Web Application to fetch Top News in Hong Kong. News results are from News API.





    

    

    

    

    

    

    

    

    

    



## Development Notees ##

### Workbox ###

To cache third party responses and image assets, `workbox-build` was useed to override the default service worker generated by `create-react-app`, which will be run when building for production environment. In other words, service worker does not work in development mode. Please build the project to test.

### API and API Key ###

* A simple PHP wrapper is written to secure the API key from frontend

* The PHP wrapper can be found inside `public/api` folder

* You will need to register a News API key and add it to `.env` file's `NEWS_API_KEY` variable

### Node version ###

* Developed using Node.js 12.16

### Development ###

* `npm start`

### Build production ###

* `npm run build`

### Ideas ###

* Background sync

* Notification when there is update after background sync ([Reference](https://pwa-workshop.js.org/5-background-sync/#background-synchronization))

* Detect for device offline and inform user they are reading cached results

* Bookmark function (i.e. Local Storage)