/hacker-news-pwas

HNPWA - Hacker News readers as Progressive Web Apps 📱

Primary LanguageCSS

Hacker News readers as Progressive Web Apps. A spiritual successor to TodoMVC.

Build Status

Implementations

See our site or the site/apps directory for the current list of implementations.

Specification

Each implementation must include:

  • Views: Hacker News Top Stories, New, Show, Ask, Jobs & threaded Comments
    • Each of these should use routing to enable sharability. For reference, see the PreactHN implementation.
  • App must display 30 items per-page for story list views
  • App must be a Progressive Web App
  • App must score over a 90/100 using Lighthouse
  • App must aim to be interactive in under 5 seconds on a Moto G4 over 3G. Use WebPageTest using the auto-selected Moto G4 + Faster 3G setting to validate "Time to interactive"
    • We look at numeric Lighthouse scores for TTI as well as a manual inspection of the application's Timeline "trace" and Filmstrip as a sanity check.
  • App must use the Application Shell pattern to instantly load the skeleton of the UI on repeat visits
  • App is responsive on desktop and mobile, making best use of available screen real-estate. See Vue HN as an example.
  • App must do its best to work cross-browser

Optionally:

  • App supports offline caching of HN data (e.g similar to the 'Offline Mode' in ReactHN)
  • App may use server-side rendering so displaying content is resilient to JS not loading on the network

User interface:

  • At this time, HNPWA does not prescribe a specific stylesheet or theme for implementations. We will be aiming to provide this in the near future similar to how we do with TodoMVC.

Data sources

If using the Firebase powered API please use 30 stories per-page to ensure consistency between implementations using the Unofficial API as well as the actual Hacker News website

Network settings

  • Emerging Markets: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency. Tested with WebPageTest using the auto-selected Moto G4 + Emerging Markets setting.
  • Faster 3G: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 1.6 Mbps 3G connection with 300ms of latency. Tested with WebPageTest using the auto-selected Moto G4 + Faster 3G setting.
  • Time to Interactive readings taken from linked Lighthouse results in WebPageTest.

License

Each implementation preserves the license noted in the linked to applications.