Progressive Web Apps

Ryan Hayes

TriJS

6/13/2017

Make an app checklist

  • Buy a Mac (ok, fine, or rent one in the cloud)
  • Get an Apple Developer License
  • Get an Android/Google Play Developer License
  • Get a Windows Store Developer License
  • Write your Apple App
  • Write your Android App
  • React Native? Your existing stuff React/Redux?
  • Xamarin?
  • NativeScript?
  • Cordova?

Why a web app?

  • Hardware acceleration and GPU access
  • It's the tech stack your team knows
  • Likely already an investment/snowball
  • Install base
  • Wide range of devices
  • Web Standars feature rate
  • Browsers are Evergreen*

Graceful

Degradation

vs

Progressive Enhancement

Progressive

Web ==> Apps

App-like Web Features

  • Location
  • Camera/Audio
  • Push Notifications
  • Bluetooth, Motion, Vibration
  • Payments
  • Battery and Wifi
  • Offline capabilities
  • More...

3 PWA Requirements

  • Service Workers
  • Manifest
  • HTTPS

Service Workers

  • Evolution of AppCache Manifest
  • Event-Driven worker .JS file
  • Registered against origin and path
  • Controls web site/page by intercepting and modifying network requests
  • Runs in a worker context (separate thread)
  • Can't use syncronous APIs (XHR, localStorage, etc)

Register a Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
  .then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

The Service Worker will intercept requests under scope only

PWA Manifest

<link rel="manifest" href="/manifest.json">

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

PWA App-like Features

  • Granular Offline Capabilities and Control
  • Unified App Manifest
  • Unified Icons and chrome
  • Installable (as opposed to pinnable)

Let's look at some PWAs!

Questions?

Ask!

@RyannosaurusRex on Twitter, Insta

https://ryanhayes.net

slides.com/ryanhayes