Offline, Push Notifications and more..

1. Offline, Push Notifications and more…
Progressive Web Applications
Bartek Igielski
Lead Front-end Developer at Snowdog
@igloczek

2. Distributing native software is hard

4. Web have great distribution model
Links are the Web superpower!

5. Do you use web
version of Google Maps
on your desktop or laptop
computer?

6. Do you use web
version of Google Maps
on your phone?

7. We use Web on mobile in
different way…
…but on desktop we used only native apps too and it changed!

10. We should focus on improving
user experience
It’s a good way to make loyal, returning visitors, who want to
leave money in your online store.
Especialy on mobile

11. What is the PWA?
Progressive Web Apps are experiences that combine the
best of the web and the best of apps.
They are useful to users from the very first visit in a browser
tab, no install required.

12. As the user progressively builds a relationship with the App
over time, it becomes more and more powerful.
It loads quickly, even on flaky networks, sends relevant push
notifications, has an icon on the home screen and loads as
a top-level, full screen experience.
What is the PWA?

13. 1. HTTPS
2. Web App manifest
3. Registered service worker
Minimum requirements of PWAs
https://github.com/GoogleChrome/samples/blob/gh-pages/
service-worker/custom-offline-page/service-worker.js

14. How to get save prompt?
The user has visited your site at least twice,
with at least five minutes between visits.
https://github.com/GoogleChrome/samples/tree/gh-pages/app-
install-banner/

15. Progressive Web Apps
vs
Progressive Enhancement
https://samthor.github.io/AlwaysBeProgressive/

17. Magento 2 weight
First load almost any page
Size: ~1.0MB +-100KB (BTW. 500KB JS)
Home page - Second load
Size: 10.3KB
Category view - Second load
Size: 35.9KB
Product view - Second load
Size: 37.5KB

18. > 50KB? So it’s fast to load!

19. > Unless you are offline
> 50KB? So it’s fast to load!

20. How to handle offline on Web?

21. Web server

22. Web server

23. Cache
Service worker
Client side proxy
Web server

24. SW network strategies
• networkFirst
• cacheFirst
• fastest
• cacheOnly
• networkOnly

25. SW capabilities
• fetch and edit any request
• push notifications or any other
background tasks
• intercept offline requests i.e. user will
make an order offline and SW sends
data when online again
• anything you can write in JS…

26. Case studies
AliExpress
• 104% for new users across
all browsers; 82% increase
in iOS conversion rate
• 2X more pages visited per
session per user across all
browsers
• 74% increase in time spent
per session across all
browsers
Flipkart (India’s largest e-commerce site)
• Users time on site with Flipkart lite
vs. previous mobile experience:
3.5 minutes vs 70 seconds.
• 3x more time spent on site
• 40% higher re-engagement rate
• 70% greater conversion rate
among those arriving via Add to
Homescreen
• 3x lower data usage
PS. Great app, totally worth to check!

27. Google I/O 2016 Progressive Web App
• More engagement than the native app
(4:06 min mobile web vs. Android's 2:40 min).
• 450ms faster first paint for return users thanks to service worker
caching
• 84% of visitors supported Service Worker
• Add to homescreen saves were up +900% compared to 2015.
• 3.8% users went offline but continued to generate
11k pageviews!
• 50% of signed in users enabled notifications.
• 536k notifications were sent to users (12% brought them back).
• 99% of users' browsers supported the web components polyfills

28. Q & A Time!
Let’s stay in touch
Twitter: @igloczek
Blog: iglo.tech
bartek.igielski@snow.dog

29. Thank you!

30. Sources
• Google for developers - Progressive Web Apps - https://
developers.google.com/web/progressive-web-apps/
• Your First Progressive Web App - https://developers.google.com/
web/fundamentals/getting-started/your-first-progressive-web-app/
• Opening Keynote (Progressive Web App Summit 2016) - https://
www.youtube.com/watch?v=9Jef9IluQw0
• The 2016 U.S. Mobile App Report - https://www.comscore.com/
Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile-
App-Report
• https://developers.google.com/web/updates/2015/03/increasing-
engagement-with-app-install-banners-in-chrome-for-android