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.
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
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
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
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/
27.
28.
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
31.
32.
33.
34. Browser Support
Chrome, Firefox, Opera, Samsung Internet
Microsoft Edge is in development
Safari hinted toward a 5 year plan
Android
iOS
Windows Phone
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 :)
