Sample of HNPWA built with Elm version 0.18, using the official Hacker-News API
Available on hnpwa.skingrapher.com
- 100 on lighthouse
- 91 on webpagetest for a slow 3G connection
- service worker partially generated by workbox for static files precache
- offline caching of HN data
- no server-side rendering actually
- interactive under 5 seconds on a Moto 4G over 3G (see webpagetest below)
- first interactive (emerging markets): 4.8s
- first interactive (faster 3G): 3.2s
CSS file:
- built with Sass
- inspired from Material Design Lite
- less than 4kb
- inlined in index.html for better performance
- style supported by all devices (smartphones, tablets and larger screens)
- 100 on lighthouse (see link to report below)
- valid accessibility according to WCAG 2.0 (level AAA) guidelines
- contrast level AAA between background and text for all colors
- new ARIA feed role with aria-posinset and aria-setsize attributes exists in WAI-ARIA 1.1
- no error according to a11y.css
- no bitmap pictures
- added noopener and noreferrer relations to links to prevent from target="_blank" vulnerability abuse
stable release without pagination
- testing background sync
- lazy loading for very extensive comments
elm make Hnpwa.elm --output elm.js
then the js file is minified and its code is incorporated as a part of the script in index.html
- about PWA: read on Google page for developers
- check the awesome PWA list
- elm tutorials for SPA: client elm by Fred Daoud, elm spa example by Richard Feldman, elmstagram by Ben Booth
- about service workers API: read on MDN
- github icon from Entypo
- original elm SVG logo here
- SVG loader by Sam Herbert