Very basic Hacker News Progressive Web App client made with Polymer 2.
- Uses Service Worker to cache data and work offline
- App Manifest for installing to homescreen
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.
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 provides easy http2-enabled static hosting, a real-time database, server functions, and edge-caching all over the globe.
-
Install polymer-cli globally
npm install -g polymer-cli -
Install the dependencies
npm install -
Serve the development version
polymer serve -
(Optional) Enable firebase function based HN API proxy
- Edit
sw-precache-config.js - Edit
src/hn-app.html
- Edit
-
Build
polymer build -
Test deployment
polymer serve build/es5-bundled -
Deploy after setting up a firebase project
firebase deploy
- 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
BSD-3-Clause