Miles Rausch
A writer for people, and a writer for computers.
Building Progressive Web Apps using CFML
by Miles Rausch
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
Chrome Dev Tools
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
Lighthouse
https://developers.google.com/web/tools/lighthouse/
WorkboxJS: https://workboxjs.org/
PWA Builder: https://www.pwabuilder.com/
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/
