The document discusses building progressive web apps (PWAs). PWAs are web applications that are fast, reliable and engaging like native mobile apps. The key aspects of PWAs discussed are: 1) They use technologies like service workers, web app manifests and push notifications to provide app-like capabilities and improve user experience and engagement on the web. 2) An example of Flipkart, an Indian e-commerce site, is provided which saw 3x time spent and 40% returning visitors with their PWA implementation. 3) Core features discussed that make PWAs engaging include fast loading, adding to homescreen for app-like launching, handling flaky networks well, instant reloading and

1. Building a
Progressive
Web App

2. +Ido Green
@greenido

3. Source: xkcd.com

4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engagement is low
Top 1000 mobile apps vs. top 1000 mobile web properties
10.9
Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9
201.8

5. 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

6. Covering today
● Progressive Web App by
example (Flipkart)
● Foundations:
○ Service Worker
○ Web App Manifests
○ Push notifications
● Progressive Web App features

7. Flipkart Example

8. Time Spent on Flipkart Lite
3x
70 seconds 210 seconds

9. Returning Visitors week over week
40%

10. ...users loving it
App

11. Enabling app-like capabilities
Service 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"
}

12. 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

13. Avoid the dreaded white screen
Similar to apps, always
show basic splash screen
experience while your
content loads

14. Load site quickly with app shell caching

15. Show content when on flaky networks

16. 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

17. 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

18. 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

19. 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

20. Send Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed

21. Push Notifications

22. Why web push notifications are powerful
26%increase in average spend
per visit by members arriving
via a push notification
72%increase in time spent for users
visiting via a push notification

23. 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

24. Voice Memos Air Horner

26. Go Build Something Amazing!

27. Thank you!
+Ido Green
@greenido