Building Progressive Web Apps using CFML

by Miles Rausch

http://milesrausch.com

Hyperlinks

Hey, there. I'm Miles.

Web Apps Have Problems

  • Networks are unreliable and slow
  • No background processing
  • No background communication
  • No installation

(cc) littledebbie11

PWAs Offer Solutions

  • Web technologies for a native application experience
  • Service Workers
  • CacheStorage API
  • Fetch API
  • Install to Device
  • Push Notifications

(cc) nogood

Why?

Twitter Lite (case study)

Forbes (case study)

Support?

(cc) mjmonty

(cc) jeepersmedia

(cc) missrogue

Service Workers

  • Background script for the browser
  • Decoupled from DOM and UI thread
  • Programmable network proxy
  • Uses Promises

(cc) davidmould

A Life in Service

  • Registration
  • Installation
  • Activation
  • Fetching/Messaging
  • Termination

(cc) catchesthelight

Requirements

  • HTTPS (or localhost)
  • Browser Support (Is ServiceWorker Ready?)
  • Chrome or Firefox Dev Tools for debugging and testing

(cc) justin_case

CacheStorage API

  • Backbone of offline capability
  • Create named caches for domain
  • Can add, delete, list keys and match
  • Fetch API for network
  • Built on Promises
  • You choose your strategy

(cc) joseluisbriz

Cache only

ServiceWorker serves from cache.

Useful for...

  • Static assets served quickly
  • Static assets are tied to app "version"

Network only

ServiceWorker passes request to network.

Useful for...

  • Non-GET request, like form POSTS
  • Analytics calls
  • Status pings

Cache, falling back to network

ServiceWorker tries cache and uses the network if needed.

Useful for...

  • Mixing "cache only" and "network only" requests in one block of code

Network, falling back to cache

ServiceWorker tries the network and uses cache if needed.

Useful for...

  • Frequently updating items like blogs, weather reports
  • "Cache, then network" is a preferred version of this

Cache, with network update

ServiceWorker displays the cached request but also calls the network. If the network succeeds, the cache is updated and so is the page.

Useful for...

  • Frequently updating items like blogs, weather reports
  • Displaying some sort of content, then prompting the user to load in the new content

Add to Homescreen (link)

  • Create manifest.json file to control splash screen, theme colors, start URL, etc.

Push Notifications (link)

  • Push content to your subscribers and notify them on their device similar to how native apps notify users

Install Banners (link)

  • Uses manifest to prompt users to install your PWA on their device (after several visits)

Demo Time

https://github.com/awayken/pwa-marketing-site

 

Simple ColdBox marketing website.

We want to turn it into a PWA.

 

master - original marketing website

pwa-1 - caching our resources

pwa-2 - caching external resources

pwa-3 - add manifest, Lighthouse

pwa-4 - send messages to Service Worker

Tools for Developing

Where can I learn more?

Lucee Happy Hour

Starting at 6 PM

At the Capitol City Brewing Company in Downtown DC

Join the Lucee members for beer and conversation!

The End

Building Progressive Web Apps using CFML

By Miles Rausch

Building Progressive Web Apps using CFML

Progressive Web Apps are more than just a UI fad, like parallax or scroll-triggered animations. PWAs are quickly becoming the best practice for creating reliable, fast and engaging user experiences. Like progressive enhancement, which treated JavaScript as an optional enhancement for a website, progressive web apps treat the network itself as an optional enhancement. By treating the network as untrustworthy, developers are forced to create better web apps that capitalize on modern browser features when they exist and fallback to traditional client-server communication when they don't. Learn more about Progressive Web Apps: https://developers.google.com/web/progressive-web-apps/ Learn more about Offline First: http://offlinefirst.org/

  • 5,497