building a progressive web app
TRANSCRIPT
![Page 1: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/1.jpg)
Building a Progressive
Web App
![Page 2: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/2.jpg)
+Ido Green@greenido
![Page 4: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/4.jpg)
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engagement is lowTop 1000 mobile apps vs. top 1000 mobile web properties
10.9
Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9201.8
![Page 5: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/5.jpg)
Progressive Web Apps
● Fast loading
● One click away from accessing content
● Smooth animations and navigations
● Re-engages with push notifications
● Good experience on flaky network connections
● Consistent experience across browsers
1
![Page 6: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/6.jpg)
Covering today
● Progressive Web App by
example (Flipkart)
● Foundations:
○ Service Worker
○ Web App Manifests
○ Push notifications
● Progressive Web App features1
![Page 8: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/8.jpg)
Time Spent on Flipkart Lite
3x
70 seconds 210 seconds
![Page 9: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/9.jpg)
Returning Visitors week over week
40%
![Page 10: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/10.jpg)
...users loving it
App
![Page 11: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/11.jpg)
Enabling app-like capabilitiesService Worker
● Client-side proxy written in JavaScript● Access device capabilities to allow your site
to be “app like”
Web App Manifest File
● Rich presence on user’s Android homescreen● Launch in full-screen mode on Android● Control the screen orientation for optimal viewing● Define “splash screen” launch, theme color for site
{"short_name": "My Cool App", "name": "My Totally Cool Application", "icons": [{"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}, {"src": "launcher-splash.png", "sizes": "512x512", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape"}
![Page 12: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/12.jpg)
Add to Homescreen
...and launch in full-
screen mode
User who visits 2x in a
within two weeks will be
prompted with “add to
homescreen”
One tap to add to
homescreen
3
![Page 13: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/13.jpg)
Avoid the dreaded white screen
6 Similar to apps, always
show basic splash screen
experience while your
content loads
![Page 14: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/14.jpg)
Load site quickly with app shell caching
2
![Page 15: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/15.jpg)
Show content when on flaky networks
6
![Page 16: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/16.jpg)
Instant loading and smooth navigation
● For first-time visitors, load pages in <10s on
3G connections
● For repeat visitors, instant loading of page in
<500 milliseconds
● Always scrolling at 60 frames/second
● Content shouldn’t jump as images are loaded
4
![Page 17: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/17.jpg)
PWAs can work across browsers
● Using standard progressive enhancement techniques, PWAs can be made to work across all modern browsers
● Service Worker available in Chrome and Opera and soon Firefox; Microsoft is interested, Safari and UC Web exploring.
7
![Page 18: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/18.jpg)
Europe Mobile Browser Share in 2015
Europe 50% (up 11% YoY)
27%(down 4% YoY)
13%(down 8% YoY)
4%(up 1% YoY)
Germany 51% (up 7% YoY)
25% (down 3% YoY)
15% (down 10% YoY)
3% (up 1% YoY)
UK 37% (up 7% YoY)
48% (down 6% YoY)
6% (down 5% YoY)
3% (same YoY)
France 47% (up 4% YoY)
32% (down 2% YoY)
11% (down 6% YoY)
4% (same YoY)
Source: StatsCounter Global Stats
![Page 19: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/19.jpg)
North America Mobile Browser Share in 2015
Other
US 41% (up 6% YoY)
50% (up 2% YoY)
5% (down 7% YoY)
1% (down 1% YoY)
Canada 37% (up4% YoY)
51% (down 1% YoY)
6% (down 5% YoY)
3% (same YoY)
Source: StatsCounter Global Stats
![Page 20: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/20.jpg)
Send Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed
![Page 21: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/21.jpg)
Push Notifications
![Page 22: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/22.jpg)
Why web push notifications are powerful
26%increase in average spend
per visit by members arrivingvia a push notification
72%increase in time spent for users visiting via a push notification
![Page 23: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/23.jpg)
Baseline implementation for PWA engagement
Required Recommended
HTTPS + Service Worker
Web App Manifest
Push notifications
Advanced Offline Support
App shell caching
Splash screen
Smooth navigation
“Progressive enhancement” with cross browser support
5
6
![Page 24: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/24.jpg)
Voice Memos Air Horner
![Page 25: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/25.jpg)
![Page 26: Building a Progressive Web App](https://reader033.vdocuments.us/reader033/viewer/2022051521/586e8c271a28aba0038b8347/html5/thumbnails/26.jpg)
Go Build Something Amazing!