Progressive Web App

Reliable

Fast

Engagement

Declaration

Manifest

{
  "name": "NTCH Map",
  "icons": [{
    "src": "/app-icon.png",
    "sizes": "1024x1024",
    "type": "image/png"
  }],
  "start_url": "/index.html?source=pwa",
  "display": "standalone",
  "background_color": "#3F312C"
}

App Icon & LaunchScreen

<!-- RWD -->
<meta name='viewport' content='initial-scale=1, maximum-scale=1' /> 

<!-- PWA Manifest -->
<link ref="manifest" href="manifest.json" />

<!-- iOS Only -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" sizes="1024x1024" href="app-icon.png" />
<link rel="apple-touch-startup-image" sizes="1125x2436" href="launch-screen-iphonex.png" />

Service Worker

Install

Activate

Fetch Data

Hijack Fetch Request

HTTPS Only

Isolate Scope (thread)

Event-based API

Cache Policy

Workbox

Cache tool from Google

<!-- Before Request -->
<script>
  if (navigator.serviceWorker) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>

Set Cache Policy

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');

if (workbox) {
  workbox.routing.registerRoute(
    /bundle\.js/,
    workbox.strategies.networkFirst(),
  );

  workbox.routing.registerRoute(
    /.*mapbox-gl\.(css|js)/,
    workbox.strategies.cacheFirst(),
  );
}

Working with Webpack

rules: [{
  test: /\.jsx?$/,
  use: [
    'babel-loader',
  ],
  include: [
    __dirname,
  ],
}, {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [{
    loader: 'file-loader',
    options: {
      hash: 'sha512',
      digest: 'hex',
      name: 'map_[hash].[ext]', // Prefix Filename
    },
  }],
  include: /static/,
}],

Add Cache Icons

workbox.routing.registerRoute(
  /map.*\.png/,
  workbox.strategies.cacheFirst(),
);

Demo

Progressive Web App

Declaration

Service Worker

Progressive Web App

More from Chia Yu Pai