Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building a
Progressive
Web App
+Ido Green
@greenido
Source: xkcd.com
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engagement is low
Top 1000 mobi...
Progressive Web Apps
● Fast loading
● One click away from accessing content
● Smooth animations and navigations
● Re-engag...
Covering today
● Progressive Web App by
example (Flipkart)
● Foundations:
○ Service Worker
○ Web App Manifests
○ Push noti...
Flipkart Example
Time Spent on Flipkart Lite
3x
70 seconds 210 seconds
Returning Visitors week over week
40%
...users loving it
App
Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript
● Access device capabilities to al...
Add to Homescreen
...and launch in full-
screen mode
User who visits 2x in a
within two weeks will be
prompted with “add t...
Avoid the dreaded white screen
Similar to apps, always
show basic splash screen
experience while your
content loads
Load site quickly with app shell caching
Show content when on flaky networks
Instant loading and smooth navigation
● For first-time visitors, load pages in <10s on
3G connections
● For repeat visitor...
PWAs can work across browsers
● Using standard progressive enhancement techniques, PWAs can be
made to work across all mod...
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%...
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)
Cana...
Send Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send n...
Push Notifications
Why web push notifications are powerful
26%increase in average spend
per visit by members arriving
via a push notification...
Baseline implementation for PWA engagement
Required Recommended
HTTPS + Service Worker
Web App Manifest
Push notifications...
Voice Memos Air Horner
Go Build Something Amazing!
Thank you!
+Ido Green
@greenido
Building a  Progressive Web App
Upcoming SlideShare
Loading in …5
×

Building a Progressive Web App

6,136 views

Published on

We have today on the web capabilities to create web apps that feel and act like native application.
We can have offline first, push notification and add to home screen. These three features bring us to a point where we can give users our content and features with one click and with all the benefits of the web.
What is this new monster you ask?
Well, go over these slides to learn more.

Published in: Internet

Building a Progressive Web App

  1. 1. Building a Progressive Web App
  2. 2. +Ido Green @greenido
  3. 3. Source: xkcd.com
  4. 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. 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. 6. Covering today ● Progressive Web App by example (Flipkart) ● Foundations: ○ Service Worker ○ Web App Manifests ○ Push notifications ● Progressive Web App features
  7. 7. Flipkart Example
  8. 8. Time Spent on Flipkart Lite 3x 70 seconds 210 seconds
  9. 9. Returning Visitors week over week 40%
  10. 10. ...users loving it App
  11. 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. 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. 13. Avoid the dreaded white screen Similar to apps, always show basic splash screen experience while your content loads
  14. 14. Load site quickly with app shell caching
  15. 15. Show content when on flaky networks
  16. 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. 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. 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. 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. 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. 21. Push Notifications
  22. 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. 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. 24. Voice Memos Air Horner
  25. 25. Go Build Something Amazing!
  26. 26. Thank you! +Ido Green @greenido

×