https://github.com/hankolsen/enfo-world-news
An experiment trying to create some kind of a PWA using plain vanilla javascript
https://github.com/hankolsen/enfo-world-news
intersection-observer lazy-loading lighthouse pwa service-worker vanilla-javascript
Last synced: 11 months ago
JSON representation
An experiment trying to create some kind of a PWA using plain vanilla javascript
- Host: GitHub
- URL: https://github.com/hankolsen/enfo-world-news
- Owner: hankolsen
- Created: 2017-11-29T11:09:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-30T13:57:47.000Z (over 8 years ago)
- Last Synced: 2025-03-02T20:32:48.659Z (over 1 year ago)
- Topics: intersection-observer, lazy-loading, lighthouse, pwa, service-worker, vanilla-javascript
- Language: CSS
- Homepage:
- Size: 91.8 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Enfo World News
An experiment trying to create some kind of a PWA using plain vanilla javascript. The app loads a list of news articles
from an external API and renders the result.
[Demo - https://enfoworldnews.com/](https://enfoworldnews.com/)
* Tested in Chrome, Firefox and Edge.
* Uses service-worker to cache static content.
* Lazy loading images using Intersection Observer.
### Lighthouse score
Since some images are loaded from an external source I can't get performance much higher, unfortunately.
[](https://googlechrome.github.io/lighthouse/viewer/?gist=8c9318bbbbaae88bf34040b23b631bdd)
### Development setup
There are a few (optional) npm development dependencies, just for eslint and to create a local http dev server.
Run `npm install` to install the dependencies.
Start the http server with `npm start`.
### Future improvements
* Inline critical css styles
* Uglify css and js
* Versioning of static files for service worker to invalidate old cache
* Gulp build process
* Auto-complete suggestions for the search field
* A better search field expansion toggling