Elm Hacker News Progressive Web App

Sample of HNPWA built with Elm version 0.18, using the official Hacker-News API

Available on hnpwa.skingrapher.com

Progressive

• 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

Reliable

• 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

Responsive

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)

Accessible

• 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

Versions

0.11

stable release without pagination

TODO

• testing background sync
• lazy loading for very extensive comments

Build elm.js howto

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

Resources

• 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

Credits

• github icon from Entypo
• original elm SVG logo here
• SVG loader by Sam Herbert