github

tastejs / hacker-news-pwas

  • воскресенье, 21 мая 2017 г. в 03:11:53
https://github.com/tastejs/hacker-news-pwas

CSS
HNPWA - Hacker News readers as Progressive Web Apps 📱



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

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
  • App must be a Progressive Web App
  • App must score over a 90/100 using Lighthouse
  • App must become 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 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

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.