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
- Make sites work faster and/or offline with caching and network interception
- As a basis for other background features like push messaging and background synchronization
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