A progressive Hacker News client built with Angular
:zap: Fast: Service Worker App Shell + Dynamic Content model to achieve faster load times with and without a network.
:iphone: Responsive: Completely responsive UI that can be installed to your mobile home screen to provide a native feel.
:rocket: Progressive: Lighthouse score of 100/100.
This app uses a Service Worker to load quickly and work offline.
sw-precacheis used to serve local static resources (App Shell) cache first.
sw-toolboxis used to handle requests using the
networkFirststrategy. If a request fails, the app will fulfill the request from the cache. This means previously loaded pages will now work offline.
With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN includes a Web App Manifest that allows you to install to your homescreen.
Built in theme engine!
- Black (AMOLED)
More to come!
Possible areas of improvement
- Realtime updating
- Server side rendering (Angular Universal?)
- Clone or download the repo
- If you don't have Angular CLI installed:
npm install -g [email protected]
nfor each file to not overwrite any file changes
ng servewill kick off the server at
http://localhost:4200/. Any changes you do to the source files should automatically reload the app
ng serve --prod --aotwill kick off a production build with uglifying, tree-shaking and Ahead-of-Time compilation
Click here to see a full list of what you can do with Angular CLI.
Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:
ng build --prod --aotto kick off a fresh build and update the
npm run precacheto generate the service worker file
npm run static-serveto load the application along with the service worker asset using live-server
A million thanks to some awesome people :)