gitmyhub

hacker-news-pwas

HTML ★ 14 updated 7y ago ⑂ fork

HNPWA - Hacker News readers as Progressive Web Apps 📱

What This Repository Does

This is a collection of Hacker News reader apps built as Progressive Web Apps—a modern way to create apps that work on both phones and computers, right in the web browser. Instead of downloading an app from the App Store, you visit a website and get an app-like experience with fast loading, offline support, and the ability to add it to your home screen.

The repository is less about one specific product and more about a *showcase and benchmark*. It's similar to TodoMVC, a famous project that shows how different web frameworks handle the same task. Here, different developers and frameworks create Hacker News readers to demonstrate best practices for building fast, reliable Progressive Web Apps. The site at hnpwa.com displays all the working implementations side by side so you can see how various technologies approach the same problem.

How It Works

Each implementation pulls real Hacker News stories from the official Hacker News API and displays them in a readable interface. You can browse the top stories, new posts, job listings, and threaded comments, with each view having its own shareable URL. The key requirement is that each app must load quickly—aiming to be interactive within 5 seconds even on older phones on slow 3G networks—and must score high on Lighthouse, Google's automated testing tool that measures performance and best practices.

The apps use a technique called the "App Shell" pattern: the first time you visit, the app loads and caches its shell (the basic layout and structure). On future visits, that shell loads instantly from your device's storage, and the app just fetches the latest stories. Many implementations also support offline browsing so you can read cached articles even without internet.

Who Uses This and Why

This project appeals to developers learning Progressive Web App development, framework creators wanting to showcase their tools, and anyone curious about how modern web apps can feel native without being installed from an app store. It's a practical playground: you can see how Preact, Vue, React, or other frameworks each tackle the same design challenge, compare their performance, and learn what fast, responsive web development looks like.