Building Progressive Web Apps using CFML

by Miles Rausch


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


Twitter Lite (case study)

Forbes (case study)


(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


  • 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


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