Polymer Hacker News client

Very basic Hacker News Progressive Web App client made with Polymer 2.

Try the Demo!

Performance

• Lighthouse 92/100
• Interactive (Emerging Markets) 2.7s
• Interactive (Faster 3G) 2.0s

Features

Progressive Web App

• Uses Service Worker to cache data and work offline
• App Manifest for installing to homescreen

Polymer CLI

hn-polymer-2 was created by using the Polymer CLI, a collection of tools to make building Web Components and Polymer apps easier.

Using Polymer Starter Kit template provided by the CLI made following the PRPL pattern easy from the start.

PRPL pattern

The PRPL pattern, in a nutshell:

• Push components required for the initial route using http2 and Server Push
• Render initial route ASAP
• Pre-cache components for remaining routes using Service Worker
• Lazy-load and progressively upgrade next routes on-demand

Firebase

Firebase provides easy http2-enabled static hosting, a real-time database, server functions, and edge-caching all over the globe.

Setup

1. Install polymer-cli globally

   npm install -g polymer-cli
   

2. Install the dependencies

   npm install
   

3. Serve the development version

   polymer serve
   

4. (Optional) Enable firebase function based HN API proxy

   • Edit sw-precache-config.js
   • Edit src/hn-app.html

5. Build

   polymer build
   

6. Test deployment

   polymer serve build/es5-bundled
   

7. Deploy after setting up a firebase project

   firebase deploy
   

TODOs

• use firebase functions to differentially serve for polyfills
• use firebase functions to push route data for all pages, not just main routes
• use official HackerNews Firebase API to support realtime updates
• Automate using firebase function API proxy when deploying

License

BSD-3-Clause