Cross Platform Progressive Web Apps

Holly Schinsky

@devgirlfl

http://devgirl.org

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!

https://whatwebcando.today

https://caniuse.com

(open from your device browser)

But not quite there yet... 

https://github.com/phonegap/phonegap-plugin-pwa

http://developer.telerik.com/topics/mobile-development/have-web-standards-on-mobile-caught-up-to-phonegap-in-2017/

PhoneGap + PWA =

In the meantime... 

Lesson 1: Project Setup

Manifest

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

Lesson 2: Add Manifest

A Progressive Web App...

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

https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/

Lesson 3: Add Cross Browser Support

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

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

Lesson 4: Network Interception

App Shell Caching

On install event, cache dependencies

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#on-install-as-dependency

Network Fallback

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

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network

Lesson 5: Add Offline Support

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

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...

Lesson 6: PhoneGap Service Worker Plugin