Embed Size (px)
Citation preview
Building a Progressive
Web App
+Ido Green@greenido
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
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
Covering today
● Progressive Web App by
example (Flipkart)
● Foundations:
○ Service Worker
○ Web App Manifests
○ Push notifications
● Progressive Web App features1
Time Spent on Flipkart Lite
3x
70 seconds 210 seconds
Returning Visitors week over week
40%
...users loving it
App
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"}
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
Avoid the dreaded white screen
6 Similar to apps, always
show basic splash screen
experience while your
content loads
Load site quickly with app shell caching
2
Show content when on flaky networks
6
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
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
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
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
Send Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed
Push Notifications
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
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
Voice Memos Air Horner
Go Build Something Amazing!
