HN PWA

Hacker News readers as Progressive Web Apps

A spiritual successor to TodoMVC

TodoMVC has helped thousands of developers select an MV* framework for their JavaScript applications. However, the web ecosystem has evolved in the past few years allowing us to build powerful applications using modern browser capabilities.

To provide developers with examples, we collected a list of unofficial Hacker News clients built with a number of popular JavaScript frameworks and libraries. Each implementation is a complete Progressive Web App that utilizes different progressive technologies to provide a fast, reliable and engaging experience.

Our implementations aim to follow a loose specification. They are primarily a learning tool and should not be used to compare the performance of one PWA to another. They can differ based on server infrastructure, performance patterns used and other factors.

React HN

kristoferbaxter/react-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
2.57s
Interactive (Faster 3G):
2.09s
Framework/UI libraries:
React, React Router
Module bundling:
Webpack
Service Worker:
Application Shell with OfflinePlugin
Performance patterns:
HTTP/2 with Server Push, Brotli and Zopfli static assets
Server-side rendering:
Yes
API:
In-memory cached Hacker News Firebase API
Hosting:
Webfaction + Cloudflare
Author:
Kristofer
React HN HN PWA running on a mobile phone

React HN

insin/react-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
6.2s
Interactive (Faster 3G):
4.0s
Framework/UI libraries:
React, React Router
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with Workbox
Performance patterns:
PRPL, route-based chunking
Server-side rendering:
Yes
API:
Hacker News Firebase API + Node-hnapi (unoffical)
Hosting:
Google App Engine
Other details:
Asynchronously loaded routes
Authors:
Jonny Addy
React HN HN PWA running on a mobile phone

Preact HN

kristoferbaxter/preact-hn

Lighthouse:
93/100
Interactive (Emerging Markets):
1.9s
Interactive (Faster 3G):
1.5s
Framework/UI libraries:
Preact
Module bundling:
Webpack
Service Worker:
Application Shell with SW Precache
Performance patterns:
HTTP/2 with Server Push, Brotli and Zopfli static assets
Server-side rendering:
Yes
API:
In-memory cached Hacker News Firebase API
Hosting:
Webfaction + Cloudflare
Author:
Kristofer
Preact HN HN PWA running on a mobile phone

Svelte Hacker News

sveltejs/svelte-hackernews

Lighthouse:
73/100
Interactive (Emerging Markets):
2.5s
Interactive (Faster 3G):
2.2s
Framework/UI libraries:
Svelte
Module bundling:
Rollup
Service Worker:
Application Shell + data caching
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now
Author:
Rich
Svelte Hacker News HN PWA running on a mobile phone

Vue Hacker News 2.0

vuejs/vue-hackernews-2.0

Lighthouse:
93/100
Interactive (Emerging Markets):
6.7s
Interactive (Faster 3G):
5.85s
Framework/UI libraries:
Vue, vue-router, Vuex
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with SWPrecachePlugin
Performance patterns:
Server-side data pre-fetching, preload/prefetch resources
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now
Other details:
Inlined CSS used by rendered components
Author:
Evan
Vue Hacker News 2.0 HN PWA running on a mobile phone

Angular HN

housseindjirdeh/angular2-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
6.0s
Interactive (Faster 3G):
4.4s
Framework/UI libraries:
Angular
Scaffolding:
Angular CLI
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with sw-precache
Performance patterns:
Lazy loaded modules
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase
Author:
Houssein
Angular HN HN PWA running on a mobile phone

Polymer HN

Polymer/hn-polymer-2

Lighthouse:
92/100
Interactive (Emerging Markets):
2.34s
Interactive (Faster 3G):
1.8s
Framework/UI libraries:
Polymer
Scaffolding:
Polymer CLI & Polymer Starter Kit
Module bundling:
Polymer-build with HTML Imports
Service Worker:
Application Shell + data caching with sw-precache
Performance patterns:
PRPL, code-splitting for granular loading
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase functions over HTTP/2 with Server Push + edge-caching
Other details:
Route-specific pushing
Authors:
Dan Kevin Steve
Polymer HN HN PWA running on a mobile phone

HackerNews.io

ivanvanderbyl/ember-hackernews-pwa

Lighthouse:
100/100
Interactive (Emerging Markets):
4.727s
Interactive (Faster 3G):
4.254s
Framework/UI libraries:
Ember.js, Ember Server Worker, Ember Web App, Ember Fetch
Module bundling:
Broccoli + Critical + HTMLMin + Imagemin + gzip
Service Worker:
Application Shell + data caching
Performance patterns:
Prefetch/Preload JS + DNS, Critical CSS, HTTP/2 Server Push
Server-side rendering:
None
API:
Node-hnapi (unofficial) + CloudFront
Hosting:
Cloudfront
Author:
Ivan
HackerNews.io HN PWA running on a mobile phone

Mithril HN

chimon2000/mithril-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
4.9s
Interactive (Faster 3G):
4.2s
Framework/UI libraries:
Mithril, typestyle
Module bundling:
fuse-box
Service Worker:
Application Shell
Performance patterns:
HTTP/2 with Server Push
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase functions over HTTP/2 with Server Push + edge-caching
Author:
Ryan
Mithril HN HN PWA running on a mobile phone

HNPWA with Vue.js

codebusking/vue-hn-pwa-guide-kit

Lighthouse:
91/100
Interactive (Emerging Markets):
5.1s
Interactive (Faster 3G):
3.9s
Framework/UI libraries:
Vue, vue-router, vue-pwa-boilerplate, firebase-hackernews
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with SWPrecachePlugin
Performance patterns:
Server-side data pre-fetching, preload/prefetch and lazy loading for rest of routes
Server-side rendering:
Yes
API:
Hacker News Firebase API via firebase-hackernews
Hosting:
Now
Author:
Jimmy
HNPWA with Vue.js HN PWA running on a mobile phone

HNPWA with Next.js

codebusking/next-hnpwa-guide-kit

Lighthouse:
91/100
Interactive (Emerging Markets):
3.3s
Interactive (Faster 3G):
3.0s
Framework/UI libraries:
Next.js, firebase-hackernews
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with Workbox
Performance patterns:
Server-side data pre-fetching, preload/prefetch
Server-side rendering:
Yes
API:
Hacker News Firebase API via firebase-hackernews running on service worker
Hosting:
Now
Author:
Jimmy
HNPWA with Next.js HN PWA running on a mobile phone

HNPWA with Nuxt.js

nuxt/hackernews

Lighthouse:
91/100
Interactive (Emerging Markets):
3.8s
Interactive (Faster 3G):
3.5s
Framework/UI libraries:
Vue, Nuxt, PWA Module
Module bundling:
Webpack
Service Worker:
Workbox
Performance patterns:
PRPL, Prefetch/Preload JS + DNS + Data, Critical Path CSS, Server Side Caching
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now + CloudFlare CDN
Authors:
Pooya Sebastien Alexandre
HNPWA with Nuxt.js HN PWA running on a mobile phone

HNPWA Vue

anubhav7495/hnpwa-vue

Lighthouse:
91/100
Interactive (Emerging Markets):
4.3s
Interactive (Faster 3G):
3.4s
Framework/UI libraries:
Vue, vue-router, vue-pwa-boilerplate
Module bundling:
Webpack
Service Worker:
Application Shell with SWPrecachePlugin
Performance patterns:
preload/prefetch resources, client-side data preload, lazy loaded routes, dns-prefetch
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Github Pages
Author:
Anubhav
HNPWA Vue HN PWA running on a mobile phone

HNPWA Firebase

davideast/hnpwa-firebase

Lighthouse:
98/100
Interactive (Emerging Markets):
1.3s
Interactive (Faster 3G):
0.7s
Framework/UI libraries:
HTML/CSS
Scaffolding:
Firebase CLI
Module bundling:
N/A
Service Worker:
Workboxjs
Performance patterns:
CDN Cache
Server-side rendering:
Yes
API:
hnpwa.com/api/v0
Hosting:
Firebase
Author:
David
HNPWA Firebase HN PWA running on a mobile phone

Angular Hacker News

sebastianm/angular-hacker-news

Lighthouse:
91/100
Interactive (Emerging Markets):
4.3s
Interactive (Faster 3G):
3.2s
Framework/UI libraries:
Angular, Angular Router, Angular HTTP
Module bundling:
Webpack
Service Worker:
Application Shell + sw-precache
Performance patterns:
Lazy loaded modules
Server-side rendering:
Angular Universal
API:
Firebase Hacker News API + Node-hnapi (unofficial)
Hosting:
Digitalocean
Author:
Sebastian
Angular Hacker News HN PWA running on a mobile phone

Next.js HN

chrisdwheatley/nextjs-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
5.75s
Interactive (Faster 3G):
4.83s
Framework/UI libraries:
Next.js, Preact
Module bundling:
Next.js with additional Webpack config
Service Worker:
Application & data caching with sw-precache
Performance patterns:
In memory LRU cache, DNS prefetch, preact-compat alias in production
Server-side rendering:
Yes
API:
Node-hnapi (unofficial)
Hosting:
Digital Ocean & Cloudflare
Author:
Chris
Next.js HN HN PWA running on a mobile phone

Zuix HN

genielabs/zuix-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
6.2s
Interactive (Faster 3G):
4.8s
Framework/UI libraries:
ZUIX
Module bundling:
zuix-bundler
Service Worker:
Application Shell + Workbox data caching
Performance patterns:
Lazy loaded components with caching
Server-side rendering:
None
API:
Hacker News Firebase API
Hosting:
Firebase
Author:
Gene
Zuix HN HN PWA running on a mobile phone

Glimmer HN

mhadaily/glimmer-hn-pwa

Lighthouse:
91/100
Interactive (Emerging Markets):
4.12s
Interactive (Faster 3G):
2.81s
Framework/UI libraries:
Glimmer.js
Scaffolding:
Ember CLI
Module bundling:
Broccoli
Service Worker:
Application Shell + data caching with ESW
Performance patterns:
Prefetch/Preload JS + DNS, Critical CSS, HTTP/2 Server Push
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase
Author:
Majid
Glimmer HN HN PWA running on a mobile phone

HNPWA with React

taehwanno/hnpwa-react

Lighthouse:
91/100
Interactive (Emerging Markets):
5.2s
Interactive (Faster 3G):
4.3s
Framework/UI libraries:
React, React Router, Redux, Immutable.js
Module bundling:
Webpack
Service Worker:
Application Shell + data caching and offline google analytics with Workbox
Performance patterns:
Server-side data pre-fetching, preload/prefetch resources
Server-side rendering:
Yes
API:
Node-hnapi (unofficial)
Hosting:
Firebase
Author:
Taehwan,
HNPWA with React HN PWA running on a mobile phone

Angular Hacker News

alfredoperez/ngx-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
5.5s
Interactive (Faster 3G):
4.5s
Framework/UI libraries:
Angular, ngu-pwa-tools
Scaffolding:
Angular CLI
Module bundling:
Angular CLI
Service Worker:
Application shell generated with ng-pwa-tools and service worker from @angular/service-worker
Performance patterns:
Lazy loaded modules
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase with HTTP/2 Server Push
Author:
Alfredo
Angular Hacker News HN PWA running on a mobile phone

React HN

stephenkingsley/hackerNews-pwa

Lighthouse:
91/100
Interactive (Emerging Markets):
3.1s
Interactive (Faster 3G):
2.41s
Framework/UI libraries:
React, React Router
Module bundling:
Webpack
Service Worker:
Application Shell
Server-side rendering:
No
API:
Node-hnapi (unoffical)
Hosting:
Firebase
Other details:
create-react-app
Author:
Stephen
React HN HN PWA running on a mobile phone

Ember HNPWA

mstewart6/hnpwa-ember

Lighthouse:
91/100
Interactive (Emerging Markets):
7.7s
Interactive (Faster 3G):
5.3s
Framework/UI libraries:
Ember
Scaffolding:
Ember CLI
Module bundling:
Broccoli
Service Worker:
Application Shell + data caching with sw-precache
Server-side rendering:
Ember Fastboot
API:
Node-hnapi (unofficial)
Hosting:
Heroku + Amazon S3
Author:
Michael
Ember HNPWA HN PWA running on a mobile phone

Next.js HN

kulshekhar/next-hnpwa

Lighthouse:
91/100
Interactive (Emerging Markets):
2.7s
Interactive (Faster 3G):
2.2s
Framework/UI libraries:
Next.js, Preact
Module bundling:
Next.js with additional Webpack config
Service Worker:
Application & data caching with sw-precache
Performance patterns:
In memory LRU cache, preact-compat alias in production, CDN cache
Server-side rendering:
Yes
API:
Official API (Firebase)
Hosting:
Firebase
Author:
Kulshekhar
Next.js HN HN PWA running on a mobile phone

Viper-news

WebReflection/viper-news

Lighthouse:
91/100
Interactive (Emerging Markets):
1.78s
Interactive (Faster 3G):
1.5s
Framework/UI libraries:
viperHTML
Module bundling:
Webpack
Service Worker:
Application Shell + data caching
Performance patterns:
Asynchronous Partial Outputs
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Google App Engine
Author:
Andrea
Viper-news HN PWA running on a mobile phone

Elm HN

rl-king/elm-hnpwa

Lighthouse:
100/100
Interactive (Emerging Markets):
3.5s
Interactive (Faster 3G):
3s
Framework/UI libraries:
Elm 0.19
Module bundling:
Elm
Service Worker:
Data caching with SWPrecachePlugin
Performance patterns:
Cache requested resources in session
Server-side rendering:
None
API:
api.hnpwa.com/v0
Hosting:
Firebase
Author:
Ruben
Elm HN HN PWA running on a mobile phone

Dojo 2

agubler/dojo-2-hn

Lighthouse:
100/100
Interactive (Emerging Markets):
2.8s
Interactive (Faster 3G):
2.0s
Module bundling:
Webpack
Service Worker:
Application Shell + Service Worker support via Dojo CLI build
Performance patterns:
HTTP/2 and Build time rendering
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase
Author:
Anthony
Dojo 2 HN PWA running on a mobile phone

Vanillia WebComponents

dsolimando/hnpwa-mobileelements

Lighthouse:
91/100
Interactive (Emerging Markets):
2.3s
Interactive (Faster 3G):
1.3s
Module bundling:
No module bundling
Service Worker:
Application Shell
Performance patterns:
HTTP/2, Gzip static assets, CDN
Server-side rendering:
yes
API:
Node-hnapi (unofficial)
Hosting:
Google Compute Engine
Author:
Damien
Vanillia WebComponents HN PWA running on a mobile phone

Preact Hacker News

malbernaz/preact-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
4.8s
Interactive (Faster 3G):
3.4s
Framework/UI libraries:
Preact
Module bundling:
Webpack
Service Worker:
Application Shell with custom worker-loader
Performance patterns:
HTTP/2, route based code splitting, resources preload, server-side data pre-fetch
Server-side rendering:
Yes
API:
Hacker News Firebase API on the server communicating with the client via socket
Hosting:
now.sh
Author:
malbernaz
Preact Hacker News HN PWA running on a mobile phone

AngularDart HNPWA

dart-lang/angular

Lighthouse:
100/100
Interactive (Emerging Markets):
4.1s
Interactive (Faster 3G):
2.1s
Framework/UI libraries:
AngularDart, AngularDart Router
Module bundling:
Dart2JS
Service Worker:
Worker generated from package:pwa
Performance patterns:
Lazy loaded modules
Server-side rendering:
None
API:
api.hnpwa.com/v0
Hosting:
Firebase
Authors:
Matan Leon kevmoo
AngularDart HNPWA HN PWA running on a mobile phone

Vanilla Web Components with Compost mixins

lamplightdev/compost-hn

Lighthouse:
100/100
Interactive (Emerging Markets):
2.9s
Interactive (Faster 3G):
2.1s
Module bundling:
Rollup
Service Worker:
Shell + data caching with Workbox
Performance patterns:
Local caching of API results, CDN cache
Server-side rendering:
no
API:
HNPWA API
Hosting:
Firebase
Author:
Chris
Vanilla Web Components with Compost mixins HN PWA running on a mobile phone

MobX TS HN

eugenkiss/hnclient

Lighthouse:
90/100
Interactive (Emerging Markets):
7.3s
Interactive (Faster 3G):
3.9s
Framework/UI libraries:
React/Inferno, MobX, TypeScript, Router5, emotion
Module bundling:
Webpack
Service Worker:
SWPrecache
Performance patterns:
Critical CSS, request caching
Server-side rendering:
None
API:
hnpwa.com/api/v0
Hosting:
Firebase
Author:
Eugen
MobX TS HN HN PWA running on a mobile phone

React Native Web

johanholmerin/rnw-hn

Lighthouse:
100/100
Interactive (Emerging Markets):
5.36s
Interactive (Faster 3G):
4.18s
Framework/UI libraries:
React Native
Module bundling:
Webpack
Service Worker:
Application Shell with SW Precache
Performance patterns:
HTTP/2, preconnect
Server-side rendering:
No
API:
hnpwa.com/api
Hosting:
Firebase
Author:
Johan
React Native Web HN PWA running on a mobile phone

HNPWA with Quasar Framework

quasarframework/quasar-hackernews

Lighthouse:
100/100
Interactive (Emerging Markets):
6.84s
Interactive (Faster 3G):
5.07s
Framework/UI libraries:
Quasar Framework, Vue, vue-router, Vuex
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with SWPrecachePlugin
Performance patterns:
Server-side data pre-fetching, preload/prefetch resources
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now
Other details:
Inlined CSS used by rendered components
Author:
Razvan
HNPWA with Quasar Framework HN PWA running on a mobile phone

Inferno HN

aretheregods/hackerinferno

Lighthouse:
91/100
Interactive (Emerging Markets):
2.7s
Interactive (Faster 3G):
2.17s
Framework/UI libraries:
Inferno
Scaffolding:
create-inferno-app
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with sw-precache
Performance patterns:
PRPL, code-splitting for granular loading
Server-side rendering:
None
API:
node_hnapi
Hosting:
Firebase
Other details:
Route-specific pushing
Author:
Naythan
Inferno HN HN PWA running on a mobile phone

React HN

surielmx/reacthnpwa

Lighthouse:
91/100
Interactive (Emerging Markets):
4.6s
Interactive (Faster 3G):
3.2s
Framework/UI libraries:
React, React Router
Module bundling:
Webpack
Service Worker:
Application Shell
Performance patterns:
HTTP/2, route based code splitting
Server-side rendering:
No
API:
api.hnpwa.com/v0
Hosting:
Firebase
Other details:
Asynchronously loaded routes
Author:
Suriel
React HN HN PWA running on a mobile phone

Vanilla Web Components HN

alexnoz/vanilla-wc-hnpwa

Lighthouse:
100/100
Interactive (Emerging Markets):
2.6s
Interactive (Faster 3G):
1.6s
Module bundling:
Webpack
Service Worker:
Application Shell + runtime caching with SWPrecachePlugin
Performance patterns:
2 bundles (ES2015+ and transpiled), route-level code splitting, preload/prefetch resources, CSS inlining
Server-side rendering:
No
API:
api.hnpwa.com/v0/
Hosting:
Firebase
Author:
Alex
Vanilla Web Components HN HN PWA running on a mobile phone

CxJS Hacker News

codaxy/cxjs-hackernews

Lighthouse:
91/100
Interactive (Emerging Markets):
4.5s
Interactive (Faster 3G):
3.7s
Framework/UI libraries:
CxJS, Preact
Scaffolding:
Cx CLI
Module bundling:
Webpack
Service Worker:
Application Shell + runtime data caching with sw-precache (sw-precache-webpack-plugin)
Performance patterns:
Code-splitting, CSS and JS inlining
Server-side rendering:
None
API:
Node-hnapi (unoffical)
Hosting:
Netlify
Author:
Marko
CxJS Hacker News HN PWA running on a mobile phone

Cycle HN

usm4n/cycle-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
5.29s
Interactive (Faster 3G):
2.46s
Framework/UI libraries:
CycleJS, cycle-onionify, switch-path, cyclejs-utils
Service Worker:
Application Shell + SWPrecache Webpack Plugin
Server-side rendering:
No
API:
HNPWA api
Hosting:
Firebase
Author:
Usman
Cycle HN HN PWA running on a mobile phone

Angular-HN

ashishdce/hn-pwa-angular

Lighthouse:
91/100
Interactive (Emerging Markets):
4.413s
Interactive (Faster 3G):
3.7s
Framework/UI libraries:
Angular, Service-Worker, firebase
Scaffolding:
Angular CLI
Module bundling:
Angular CLI
Service Worker:
Application shell generated with ng-pwa-tools and service worker from @angular/service-worker
Performance patterns:
Lazy loaded modules
Server-side rendering:
Yes
API:
Node-hnapi (unofficial)
Hosting:
Firebase with HTTP/2 server push
Authors:
Ashish
Angular-HN HN PWA running on a mobile phone

AppRun HN

yysun/apprun-hn

Lighthouse:
92/100
Interactive (Emerging Markets):
4.7s
Interactive (Faster 3G):
4.0s
Framework/UI libraries:
AppRun
Scaffolding:
AppRun CLI
Module bundling:
Webpack
Service Worker:
Workboxjs
Performance patterns:
Application Shell + data caching with sw-precache
Server-side rendering:
No
API:
Official API (Firebase)
Hosting:
GitHub
Author:
yysun
AppRun HN HN PWA running on a mobile phone

Submit your Hacker News Progressive Web App

If your Hacker News implementation meets the specifications, feel free to submit a summary of it here! HNPWA serves as a reference for building PWAs with different libraries so the more examples we have the better. Don't worry if there's already one with the same UI library or framework as yours.

SUBMIT