Cross Platform Progressive Web Apps

Online Tutorial

Goal: Add Progressive Web App (PWA) features to a PhoneGap Todo app

 PWAs are websites that use recent web standards to allow for installation on a user’s computer or device, to deliver an app-like experience

PWA Characteristics

  • Installable (added to homescreen)

  • Offline-capable (via service worker caching)

  • Secure (served via https://)

  • App-like (customizable via manifest.json properties)

  • Easily Shareable (just a URL)

  • Re-engagable (via push notifications)

Web APIs are Catching Up!

(open from your device browser)

But not quite there yet... 

PhoneGap + PWA =

In the meantime... 

Manifest

A JSON file of metadata used to describe your app and how it should appear when it's installed to the home screen.

A Progressive Web App...

Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.

Service Worker

  • A script that stands between your website and the network
  • Runs in the background
  • Event driven
  • Allows you to add features that don't need user interaction
  • Ensures only one version of your site running at once

Service Worker Use Cases

 

Service Worker Lifecycle

App Shell Caching

On install event, cache dependencies

Network Fallback

On fetch event, check the cache for the resource, then fall back to network call

PhoneGap Service Worker Plugin

  • Service worker polyfill for iOS/Cordova
  • Originally created by Mobile Chrome Apps Team
  • PhoneGap team has forked and is updating (WIP)
  • More APIs will be implemented (push, background sync et)

PhoneGap Service Worker Plugin

  • Caches Cordova Assets by default via a config.xml pref
  • Runs the service worker with the filename specified in the config.xml file
<preference name="ServiceWorker" value="service-worker.js" />
<preference name="CacheCordovaAssets" value="true" />

Current Caveats

  • Doesn't work with the PhoneGap Developer App (yet)
  • Doesn't work with sw-precache generated service workers
  • Doesn't support IndexedDB

PhoneGap Service Worker Plugin...

Cross Platform Progressive Web Apps

By hollyschinsky

Cross Platform Progressive Web Apps

  • 1,719