skrypte / Elm Hn Pwa
Licence: gpl-3.0
Hacker News as a PWA built with Elm
Stars: ✭ 43
Programming Languages
Projects that are alternatives of or similar to Elm Hn Pwa
Productivity Frontend
Productivity Application - Kanban Style Productivity Management Application with Customizable Boards, Lists and Cards to Make You More Productive.
Stars: ✭ 234 (+444.19%)
Mutual labels: pwa, spa, service-worker
Pwatter
Angular Progressive Web App using Workbox
Stars: ✭ 167 (+288.37%)
Mutual labels: pwa, service-worker, workbox
Next Offline
make your Next.js application work offline using service workers via Google's workbox
Stars: ✭ 1,306 (+2937.21%)
Mutual labels: pwa, service-worker, workbox
Next Pwa
Zero config PWA plugin for Next.js, with workbox 🧰
Stars: ✭ 909 (+2013.95%)
Mutual labels: pwa, service-worker, workbox
badaso
The API & platform builder, build your apps 10x faster even more, it's open source & 100% free !
Stars: ✭ 650 (+1411.63%)
Mutual labels: spa, pwa, service-worker
Hnpwa Vanilla
Hacker News PWA implemented using no framework just javascript
Stars: ✭ 245 (+469.77%)
Mutual labels: hacker-news, pwa, service-worker
Pwafire
Progressive Web Apps API of APIs
Stars: ✭ 137 (+218.6%)
Mutual labels: pwa, service-worker, workbox
jekyll-pwa-workbox
A Jekyll plugin using Workbox to make your PWA / Website available offline.
Stars: ✭ 22 (-48.84%)
Mutual labels: pwa, service-worker, workbox
Android Pwa Wrapper
Android Wrapper to create native Android Apps from offline-capable Progressive Web Apps
Stars: ✭ 265 (+516.28%)
Mutual labels: pwa, spa, service-worker
Vue Wordpress Pwa
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
Stars: ✭ 665 (+1446.51%)
Mutual labels: pwa, spa, service-worker
Pwa Wp
WordPress feature plugin to bring Progressive Web Apps (PWA) to Core
Stars: ✭ 445 (+934.88%)
Mutual labels: pwa, service-worker
Pwa Bugs
🚔 List of PWA Bugs and workarounds
Stars: ✭ 444 (+932.56%)
Mutual labels: pwa, service-worker
Preact Starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
Stars: ✭ 384 (+793.02%)
Mutual labels: pwa, spa
Pwa Theme Woocommerce
E-commerce Progressive Web App Theme (React & Redux)
Stars: ✭ 382 (+788.37%)
Mutual labels: pwa, service-worker
Falcon
DEITY Falcon - Progressive Web App library for any type of website. Fully Open Source, Platform Agnostic and headless. OSL3.0. Supports Magento 2 PWA storefront, Wordpress PWA and BigCommerce PWA Storefront. Built with ReactJS, NodeJS and GraphQL. Join our community and become a contributor at https://slack.deity.io
Stars: ✭ 501 (+1065.12%)
Mutual labels: pwa, spa
Offline Plugin
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Stars: ✭ 4,444 (+10234.88%)
Mutual labels: pwa, service-worker
Upup
✈️ Easily create sites that work offline as well as online
Stars: ✭ 4,777 (+11009.3%)
Mutual labels: pwa, service-worker
Redux Bundler
Compose a Redux store out of smaller bundles of functionality.
Stars: ✭ 579 (+1246.51%)
Mutual labels: pwa, spa
Awes Io
Awes.io // boilerplate based on Vue, Nuxt, TailwindCSS plus Laravel as a backend. 🤟
Stars: ✭ 599 (+1293.02%)
Mutual labels: pwa, spa
Angular Performance Checklist
⚡ Cheatsheet for developing lightning fast progressive Angular applications
Stars: ✭ 3,725 (+8562.79%)
Mutual labels: pwa, service-worker
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].