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)
• Detect for device offline and inform user they are reading cached results
• Bookmark function (i.e. Local Storage)