Basic Ionic PWA:
Progressive Web Apps

Intro
Benefits
Limitations
Requirements
iPhone Kludge
Debugging
Resources
Q & A

PWA Intro

NiemanLab, March 7, 2017
"… Forbes on Tuesday is beginning the public roll out of its new mobile site, which it says loads in 0.8 seconds — down from anywhere from 3 to 12 seconds on its current mobile site."

Xactware Xample
Cut (secondary) app load from 479K to 6K, 21s to 2s (3G)

PWA Benefits

FAST - repeat visits are sub-second
Fullscreen - no browser navigation on top or bottom
Discoverability - quick to try a new app
Auto install - user is prompted to add to their homescreen
Samsung browser prompts for fingerprint, if supported
Session persistence - user stays logged in
NOTIFICATIONS - Number One user engagement feature!

PWA Limitations

Android Chrome/Samsung browser
Must launch from homescreen icon for fullscreen
No benefit for apps packaged for the app stores (except shared code base)

Benefits outweigh limitations: add PWA to your mobile website!

PWA Requirements

https
manifest.json - defines your app
service-worker.js - file cache list, cache code, notification code, etc.
icon(s)
"mobile-friendly" - responsive, reasonably quick

iPhone Kludge (not PWA)

Fullscreen + icons
State is lost when you relaunch or switch apps (fixed w/JWT?)
Use only for prototypes or stateless apps & websites

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">

<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">

PWA Debugging

Lighthouse - Google PWA analyzer, Chrome extension
Chrome Dev Tools - Application tab (& Network tab)

PWA Resources

Demo project repo: https://github.com/Diuda/PWA
NiemanLab Forbes website: http://www.niemanlab.org/2017/03/forbes-rebuilt-its-new-mobile-website-as-a-progressive-web-app/
Ionic PWA Announcement: http://blog.ionic.io/announcing-pwa-support-in-ionic-2/
Ionic PWA Docs: https://ionicframework.com/docs/v2/resources/progressive-web-apps/
Google PWA Docs: https://developers.google.com/web/progressive-web-apps/
- PWA Checklist: includes advanced site recommendations
Lighthouse analyzer: https://developers.google.com/web/tools/lighthouse/
Remote debugging Android in Chrome (Mac/Win): https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Mobile Web Weekly newsletter: http://mobilewebweekly.co/issues
Benefits of PWA: http://webagility.com/posts/how-progressive-web-apps-make-the-web-great-again
PWA Builder (preview/beta): http://preview.pwabuilder.com/

Basic Ionic PWA: Progressive Web Apps

Intro

Benefits

Limitations

Requirements

iPhone Kludge

Debugging

Resources

Q & A

PWA Intro

NiemanLab, March 7, 2017 "… Forbes on Tuesday is beginning the public roll out of its new mobile site, which it says loads in 0.8 seconds — down from anywhere from 3 to 12 seconds on its current mobile site."

Xactware Xample Cut (secondary) app load from 479K to 6K, 21s to 2s (3G)

PWA Benefits

FAST - repeat visits are sub-second

Fullscreen - no browser navigation on top or bottom

Discoverability - quick to try a new app

Auto install - user is prompted to add to their homescreen

Samsung browser prompts for fingerprint, if supported

Session persistence - user stays logged in

NOTIFICATIONS - Number One user engagement feature!

PWA Limitations

Android Chrome/Samsung browser

Must launch from homescreen icon for fullscreen

No benefit for apps packaged for the app stores (except shared code base)

Benefits outweigh limitations: add PWA to your mobile website!

PWA Requirements

https

manifest.json - defines your app

service-worker.js - file cache list, cache code, notification code, etc.

icon(s)

"mobile-friendly" - responsive, reasonably quick

iPhone Kludge (not PWA)

Fullscreen + icons

State is lost when you relaunch or switch apps (fixed w/JWT?)

Use only for prototypes or stateless apps & websites

PWA Debugging

Lighthouse - Google PWA analyzer, Chrome extension

Chrome Dev Tools - Application tab (& Network tab)

PWA Resources

Q & A

Ionic PWA Basics

More from Todd Hale

Basic Ionic PWA:
Progressive Web Apps

NiemanLab, March 7, 2017
"… Forbes on Tuesday is beginning the public roll out of its new mobile site, which it says loads in 0.8 seconds — down from anywhere from 3 to 12 seconds on its current mobile site."

Xactware Xample
Cut (secondary) app load from 479K to 6K, 21s to 2s (3G)