Progressive Web App

[michaelbull]

Specification

Each implementation must include:

• [x] Views: Hacker News Top Stories, New, Show, Ask, Jobs & threaded Comments
  • [x] Each of these should use routing to enable sharability. For reference, see the PreactHN implementation.
• [x] App must display 30 items per-page for story list views
• [ ] App must be a Progressive Web App (checklist)
• [ ] 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.
• [x] App must use the Application Shell pattern to instantly load the skeleton of the UI on repeat visits
• [x] 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 dhttps://github.com/tastejs/hacker-news-pwasoes 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

• Official real-time Hacker News API powered by Firebase
• Unofficial Hacker News API by cheeaun

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.

[michaelbull]

Progressive Web App Checklist

Baseline Progressive Web App Checklist

• [x] Site is served over HTTPS
• [x] Pages are responsive on tablets & mobile devices
• [ ] All app URLs load while offline
• [ ] Metadata provided for Add to Home screen
• [ ] First load fast even on 3G
• [ ] Site works cross-browser
• [ ] Page transitions don't feel like they block on the network
• [ ] Each page has a URL

Exemplary Progressive Web App Checklist

Indexability & social

• [ ] Site's content is indexed by Google
• [ ] Schema.org metadata is provided where appropriate
• [ ] Social metadata is provided where appropriate
• [ ] Canonical URLs are provided when necessary
• [x] Pages use the History API

User experience

• [ ] Content doesn't jump as the page loads
• [ ] Pressing back from a detail page retains scroll position on the previous list page
• [ ] When tapped, inputs aren't obscured by the on screen keyboard
• [ ] Content is easily shareable from standalone or full screen mode
• [x] Site is responsive across phone, tablet and desktop screen sizes
• [ ] Any app install prompts are not used excessively
• [ ] The Add to Home Screen prompt is intercepted

Performance

• [ ] First load very fast even on 3G

Caching

• [ ] Site uses cache-first networking
• [ ] Site appropriately informs the user when they're offline

Push notifications

• [ ] Provide context to the user about how notifications will be used
• [ ] UI encouraging users to turn on Push Notifications must not be overly aggressive.
• [ ] Site dims the screen when permission request is showing
• [ ] Push notifications must be timely, precise and relevant
• [ ] Provides controls to enable and disable notifications

Additional features

• [ ] User is logged in across devices via Credential Management API
• [ ] User can pay easily via native UI from Payment Request API.

---

Examples:

• https://github.com/codebusking/vue-hnpwa-guide-app
• https://github.com/kristoferbaxter/preact-hn
• https://github.com/sveltejs/svelte-hackernews
• https://github.com/davideast/hnpwa-firebase
• https://github.com/nuxt/hackernews

Options for hosting:

• Firebase
• Heroku
• Google App Engine