Offline, Push Notifications and more…Progressive Web Applications

Bartek Igielski Lead Front-end Developer at Snowdog @igloczek

Distributing native software is hard

Web have great distribution model

Links are the Web superpower!

Do you use webversion of Google Maps

on your desktop or laptop computer?

Do you use webversion of Google Maps

on your phone?

We use Web on mobile in different way…

…but on desktop we used only native apps too and it changed!

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

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.

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?

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

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/

Progressive Web Apps vs

Progressive Enhancement

https://samthor.github.io/AlwaysBeProgressive/

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

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

> Unless you are offline

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

How to handle offline on Web?

Web server

Web server

Cache

Service worker Client side proxy Web server

SW network strategies

• networkFirst • cacheFirst • fastest • cacheOnly • networkOnly

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…

Case studiesAliExpress • 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!

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

Q & A Time!

Let’s stay in touch Twitter: @igloczek

Blog: iglo.tech bartek.igielski@snow.dog

Thank you!

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