Skip to content
Hacker News as a PWA built with Elm
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist added link in head to crossorigin preconnection Oct 21, 2017
elm-stuff added pagination Oct 20, 2017
report added lighthouse report Oct 1, 2017
sw minor changes Oct 12, 2017
Hnpwa.elm added LICENSE Oct 1, 2017
elm-package.json added elm-paginate to elm packages Oct 4, 2017

Elm Hacker News Progressive Web App

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

Available on


  • 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

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



You can’t perform that action at this time.