Progressive web apps (PWAs) close the gap and blur the lines between native apps and web apps. Daniel will introduce PWAs, including service workers, push notifications, app icons, offline capabilities, the app manifest, and browser support. He will also discuss practical applications and case studies to give business insight into this newer technology.

1. Progressive Web Apps
Daniel Black
Android Developer, Carsforsale.com

2. Introduction
What are Progressive Web Apps
Service Workers
Add to Homescreen
Push Notifications
Browser Support
The Future

3. Stats

4. What are Progressive Web Apps
Progressive web apps are…
...user experiences that have the reach of the web, and are:
Reliable - Load instantly and never show the downasaur*, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.
https://developers.google.com/web/progressive-web-apps/

5. PWAs are...
Progressive - browser independent
Responsive - works on any form factor
Connectivity Independent - enhanced with service workers to work offline
App-like - feels like an app
Fresh - service workers help cache and update data

6. PWAs are also...
...like good old web sites but better. In a modern browser they exhibit super–powers and become…
Network Independent
Progressive
Re-engageable
Responsive
Discoverable
Installable
Linkable
Safe
https://developer.mozilla.org/en-US/Apps/Progressive

7. High Level Implementation
Mobile-first web app design
Strategic caching
Caching of web app frame and data
Offline accessible
Manifest file for ‘Add to homescreen’

8. Criteria (Baseline)
Https
Responsive on tablets & mobile
Start URL loads offline (at least)
Metadata for Add to Homescreen
First load fast on 3G
Cross-browser support
Page transitions don’t feel like they
block the network
Each page has a URL
https://developers.google.com/web/p
rogressive-web-apps/checklist

9. Lighthouse
Website performance and quality tool by Google
Includes a subset of PWA checklist

11. Twitter Lite - Case Study
65% increase in pages per session
75% increase in Tweets sent
20% decrease in bounce rate

12. Twitter Lite - Case Study
“The web app rivals the performance of our native apps but requires less than 3% of the device storage
space compared to Twitter for Android.”
-Nicolas Gallagher, the Engineering Lead for Twitter Lite

13. Twitter Lite - Case Study
Progressive web app = 600KB
Android app = 23.5MB installed
50% reduction in 99th percentile time-to-
interactive latency
Logged in users have a 30% reduction in average
load time

14. Service Workers
Background service that listens for events
Runs in the browser
Supported by Chrome, Opera, and Firefox
MS Edge is in development

15. Service Workers (events)
Install
Activate
Fetch
Push
NotificationClick
Sync

20. app.js
service-worker.js

21. App Manifest
Appear on mobile homescreens
Launch in fullscreen mode without a URL bar
Define a “splash screen” experience and app theme color
Track home screen vs URL launch
Only supported for Chrome and Opera Mobile browsers

22. manifest.json
short_name
background_color
theme_color
icons
start_url
description
dir
display
lang
orientation
prefer_related_application
related_applications
scope

25. manifest.json
https://w3c.github.io/manifest/
https://developer.mozilla.org/en-US/docs/Web/Manifest

26. App Install Banner
Criteria is that the site has…
A manifest.json with
● A short_name (homescreen)
● A name (banner)
● A 144x144 png icon
● A start_url that loads
A service worker registered with the site
https://addyosmani.com/blog/gett
ing-started-with-progressive-
web-apps/

29. Native App Install Banner
Criteria is that the site has…
A manifest.json with
● A short_name (homescreen)
● A name (banner)
● A 144x144 png icon
● A related_applications object with app info
Is served over HTTPs

30. Push Notifications
Check if supported (PushManager)
Register service worker and call getSubscription on its pushManager
Use pushManager to subscribe
Listen for push events on the service worker

34. Browser Support
Chrome, Firefox, Opera, Samsung Internet
Microsoft Edge is in development
Safari hinted toward a 5 year plan
Android
iOS
Windows Phone

35. Native Hardware
User location
Recording audio
Camera
Orientation and motion

38. Drawbacks
Browser support is not comprehensive yet
No bluetooth or NFC access right now

39. Future
Web Bluetooth
Web USB
Web Share
Share Target
Image Capture
Media Session
getInstalledRelatedApps
Background Fetch
Generic Sensors API
Budget API
Wake Lock
Improved Quota
Foreign Fetch
Shape Detection
Face Detection
etc...

40. What Now?
Pick a feature or side project and go code!
Fire all your native developers, they are no longer needed :)

41. Resources
https://developers.google.com/web/fundamentals/getting-
started/codelabs/your-first-pwapp/
https://developers.google.com/web/progressive-web-apps/
https://developer.mozilla.org/en-US/docs/Web/Manifest
https://dblackker.github.com/pwa-google-example
https://www.youtube.com/watch?v=m-sCdS0sQO8 (Google I/O 2017 PWAs)