/wwwid-pwa-wc

This is an example of a PWA built using Vanilla Webcomponent, Webpack and some other modules for WWWID Performance Challenge

Primary LanguageJavaScriptMIT LicenseMIT

Vanilla Webcomponent WWWID PWA Example

See this application live at: https://idpwa-wc.firebaseapp.com

This is an example of a PWA built using Vanilla Webcomponent, Webpack, Redux and some other modules for WWWID Performance Challenge

Made with love 💔

Installation

  1. Install yarn
  2. Install firebase tools
    • npm install -g firebase-tools
  3. Install Yarn Dependencies
    • yarn install
  4. Deploy Firebase function
    • firebase deploy
  5. Run Locally
    • yarn start (chrome only)

Features

  • Webcomponent with es6 modules including the polyfill
  • Redux for state management
  • Redux thunk for async fetch
  • Lightweight unfetch for fetch polyfill
  • Intersection Observer API for lazy loading image not in viewport
  • Firebase function for API manipulation through RSS feeds
  • Firebase preload setting for server push resources
  • Workbox to generate the service worker
  • Lot of bugs

Performance Score

Tested with www.webpagetest.org with Mobile Slow 3G and Run Lighthouse Audit enable.

From: Dulles, VA - Moto G4 - Chrome - 3GSlow

Mar 7, 2018, 11:35 AM GMT+7

Score Link: score

Lighthouse Link: lighthouse

Lighthouse First meaningful paint: 2,210 ms

Lighthouse First Interactive (beta): 2,210 ms

Lighthouse PWA Score: 91/100 (webpagetest pwa score seems to be broken the https redirect #2363)

~