Hacker News Progressive Web Apps
At Google I/O this year, we introduced HNPWA (Hacker News Readers as PWAs) — a project aiming to demonstrate Progressive Web Apps can be implemented with popular JavaScript frameworks. Implementations follow a short specification but ultimately must demonstrate they can perform well on metrics like how soon a user can interact with the apps.
This is validated using Lighthouse on average mobile hardware (a Moto G4) using WebPageTest’s Faster 3G and Emerging Market 3G profiles.
We started off with apps written in Polymer, Vue, Preact, React, Svelte and Angular and thanks to the community have grown to 22 applications.
Implementations make use of architecture patterns like PRPL and route-based code-splitting. They also use Web Platform primitives like <link rel=preload> and HTTP/2 Server Push.
The latest suite of apps to ship on HNPWA include StencilJS, Glimmer, React with create-react-app, vanilla JavaScript, Zuix and Next.js:
While HNPWA is not a benchmark, similar to our predecessor TodoMVC, the project tries to give developers open-source examples of how to build PWAs using their preferred JS stacks.
Our hope is that this educational material is useful and gives developers insight into what frameworks meet a decent bar on real mobile devices.
Focusing on user-centric metrics
One of the useful things about Lighthouse is that its metrics highlight key moments during the user’s loading journey, like is it useful? (First meaningful paint) and is it usable? (First Interactive and Consistently Interactive).
These specifically look at when an implementation can first respond to user input and when the network is idle and the main thread can consistently accept user input.
Our hope is that HNPWA can give you a rough feel for how much headroom for your own application logic different frameworks can offer you on mobile.
With many frameworks now including PWA support out of the box, including Polymer (App Toolbox), React (create-react-app), Preact (preact-cli) and Vue (template), passing the baseline Lighthouse PWA audits has become a little more straight-forward. This shifts over the focus to getting performance right and has encouraged implementations to carefully think about how to efficiently load content.
Only load code the user needs
We mentioned many apps use code-splitting to only deliver the minimal code needed for each route, lazy-loading the rest in. This is great technique for improving how quickly a route is interactive.
Some apps (like PreactHN) even do differential serving based on browser support, such as using babel-preset-env to serve each browser a JS bundle based on the ES2015+ features available:
Prioritize resources that are important
Other apps take advantage of <link rel=preload>, a declarative instruction to load late-discovered resources at a higher priority, to make sure their critical JavaScript bundles get fetched as soon as possible.
In the Vue HN app, critical Webpack chunks are loaded sooner using <link rel=preload> while “lazy” chunks needed for future navigations to other routes are <link rel=prefetch>’d. This is a low-priority hint to the browser to start loading resources that aren’t important for the current page in advance.
To check out the source behind any HNPWA app, click the “Source Code” button in our listings.
Why Hacker News apps?
HN has open API that is free to use, been around for a number of years, offers multiple “views” and is relatively stable to build on. It also has solid community abstraction APIs build on top of it, such as the excellent node-hnapi (by Lim Chee Aun) used by many HNPWA apps.
There are of course, several other open data sources if HN isn’t your thing, such as Wikipedia’s API. We welcome any efforts to create similar projects to HNPWA using other data sources.
What’s next?
We’re always looking to expand the catalog of implementations on HNPWA and welcome contributions. At the same time, we also exploring how we can improve backend latency of using HN as a data-source through our new HNPWA API project. David East from Firebase will be joining us on the blog next time with some details of how you can try that today.
Thank you.
This project would simply not be possible without our community of contributors. A huge thank you to everyone that’s written an implementation and helped us keep the site going. You are all awesome.
Until next time, check out the HN apps, but maybe don’t read the comments ;)
~Addy and the HNPWA team.
