Be instant and engaging on the mobile web - Google Mobile for India

Slide 1

Slide 1 text

Be Instant and Engaging with the Mobile Web

Slide 2

Slide 2 text

paulkinlan@google.com

Slide 3

Slide 3 text

“Mobile is massive” - Me, 2012

Slide 4

Slide 4 text

“We can’t apply the same desktop rules to the web.” - Me, 2012

Slide 5

Slide 5 text

Links are clickable

Slide 6

Slide 6 text

You don’t want to read our content right now WAIT 3 MINUTES AND INSTALL OUR APP BAD!

Slide 7

Slide 7 text

Inline Native App install Good!

Slide 8

Slide 8 text

I came to India. I learnt a lot!

Slide 9

Slide 9 text

6 million new mobile users per month

Slide 10

Slide 10 text

“I need my app to be installed. The Web can’t do that” - Every Tech Business in India*, August 2015

Slide 11

Slide 11 text

“I need notifications for engagement. The Web can’t do that” - Every Tech Business in India*, August 2015

Slide 12

Slide 12 text

“Network is terrible in India. I need to be fast. The Web can’t do that” - Every Tech Business in India*, August 2015

Slide 13

Slide 13 text

“Deep access to hardware is why I need an app. The Web can’t do that” - Every Tech Business in India*, August 2015

Slide 14

Slide 14 text

1. Installability 2. Engagement 3. Performance 4. Capabilities

Slide 15

Slide 15 text

The Web is dead Engaged user Go native

Slide 16

Slide 16 text

The Web can’t do that

Slide 17

Slide 17 text

The Web can do that

Slide 18

Slide 18 text

Engaged user on the web Engaged user on native Upgrade to

Slide 19

Slide 19 text

“Make an engaged user on the web and keep them there.” - Me, just now

Slide 20

Slide 20 text

“Paul you’re talking rubbish. .... Prove it!” - Everyone in the room, just now

Slide 21

Slide 21 text

Let’s build a product

Slide 22

Slide 22 text

Native or Web. The goal is the same People use your service

Slide 23

Slide 23 text

https://airhorner.com

Slide 24

Slide 24 text

You get traffic from many sources TV Ads Newspaper Ads Social + Search

Slide 25

Slide 25 text

Use Use Mobile Native Mobile Web

Slide 26

Slide 26 text

Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use

Slide 27

Slide 27 text

Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use Use Instant access

Slide 28

Slide 28 text

In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you 20% of users. http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Slide 29

Slide 29 text

Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use Use 800 640 512 410 328 262 1000 Users Inferred from blog.gaborcselle.com Hypothetical numbers Inferred from blog.gaborcselle.com

Slide 30

Slide 30 text

Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use Use 800 640 512 410 328 262 800 1000 Users Hypothetical numbers Inferred from blog.gaborcselle.com

Slide 31

Slide 31 text

“But native has more engaged users?” - Everyone in the room, just now

Slide 32

Slide 32 text

“262 engaged users is better than 800 unengaged users” - Everyone in the room, just now

Slide 33

Slide 33 text

Use Use 262 800 Mobile Native Mobile Web Why Web? Reach

Slide 34

Slide 34 text

Use Use 262 800 Mobile Native Mobile Web Why app? Reach Performance Engagement Capabilities Installability

Slide 35

Slide 35 text

Trade Reach for Engagement...

Slide 36

Slide 36 text

But... Can we get both?

Slide 37

Slide 37 text

Ideal solution The Web? Reach + Engagement Performance Capabilities Installability

Slide 38

Slide 38 text

“The web has amazing reach and now with deep engagement” - Me, just now

Slide 39

Slide 39 text

How?

Slide 40

Slide 40 text

1. Focus on Performance 2. Installability 3. Engagement 4. Service Worker

Slide 41

Slide 41 text

“The most important web technology since the link” - Me, just now

Slide 42

Slide 42 text

Service workers are generic, event-driven, time-limited script contexts that run at an origin. What the spec says https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ Service Worker

Slide 43

Slide 43 text

Service worker is a background script that sits between the browser and the networkOS What I say Service Worker

Slide 44

Slide 44 text

Installed Activated Idle Error Terminated Active Pages now have an app-like lifecycle Service Worker

Slide 45

Slide 45 text

Does all its work in the background

Slide 46

Slide 46 text

Installed Activated Idle Error Terminated Active It tries to use no resource Service Worker

Slide 47

Slide 47 text

Installed Activated Idle Error Terminated Active Can work when the browser is closed Service Worker

Slide 48

Slide 48 text

Installed Activated Idle Error Terminated Active sw.js Register Service Worker Service Worker

Slide 49

Slide 49 text

Registering a Service Worker self.addEventListener('install', function(e) {}); self.addEventListener('activate', function(e) {}); self.addEventListener('fetch', function(e) {}); navigator.serviceWorker.register('sw.js') .then(function(reg) { // Service Worker Registered }); Service Worker sw.js Web Page

Slide 50

Slide 50 text

Installed Activated Idle Error Terminated Active You can “install” content for later use Service Worker

Slide 51

Slide 51 text

Installed Activated Idle Error Terminate d Active onfetch onmessage onnotificationclick more Service Worker Lots of new engagement API’ s

Slide 52

Slide 52 text

Installability

Slide 53

Slide 53 text

1. Get on the homescreen 2. Load instantly

Slide 54

Slide 54 text

Users ● Expect apps to be on the homescreen ● Expect apps to be in the app switcher Installability

Slide 55

Slide 55 text

How to get on the homescreen ● Uses a service worker ● Use HTTPS ● Have a manifest declared Installability

Slide 56

Slide 56 text

HTML { "short_name": "Airhorner", "name": "Airhorner", "start_url": "/", "display": "standalone", "background_color": "#2196F3", "theme_color": "#2196F3", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }], "orientation": "portrait" } JSON Manifest Installability

Slide 57

Slide 57 text

Installed Activated Idle Error Terminated Active You can “install” content for later use Installability

Slide 58

Slide 58 text

self.addEventListener('install', function(e) { e.waitUntil( caches.open('airhorner').then(function(cache) { return cache.addAll([ '/', '/index.html', '/styles/main.css', '/scripts/main.min.js', '/sounds/airhorn.mp3' ]); }) ); }); Installability

Slide 59

Slide 59 text

Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You own the network Installability

Slide 60

Slide 60 text

You are offline. To continue searching please check your wifi and mobile data are turned on. Indicative Example SW Local If stored locally or get from internet Web Server Installability

Slide 61

Slide 61 text

self.addEventListener('fetch', function(event) { console.log(event.request.url); event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); }); Installability

Slide 62

Slide 62 text

Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔

Slide 63

Slide 63 text

Engagement

Slide 64

Slide 64 text

1. Deeper ties into the OS 2. Notifications

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Installability

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle push messages Engagement

Slide 69

Slide 69 text

SW Your server GCM server Client Server Engagement

Slide 70

Slide 70 text

self.addEventListener('push', function(event) { var title = 'New message from Paul'; var body = 'What\'s happening today?'; var icon = '/images/paul.png'; var tag = 'simple-push-demo-notification-tag'; var data = { url: 'https://paul.kinlan.me' }; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag, data: data }) ); }); Engagement

Slide 71

Slide 71 text

Engagement

Slide 72

Slide 72 text

SW Your server GCM server Client Server Local Engagement

Slide 73

Slide 73 text

self.addEventListener('push', function(event) { var title = 'Yay a message.'; var body = 'We have received a push message.'; var icon = '/images/icon-192x192.png'; var tag = 'simple-push-demo-notification-tag'; var data = { url: 'https://paul.kinlan.me' }; Cache.add( url ); event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag, data: data }) ); }); Engagement

Slide 74

Slide 74 text

Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle notifications Engagement

Slide 75

Slide 75 text

SW Opens a web page User clicks Engagement

Slide 76

Slide 76 text

self.addEventListener('notificationclick', function(event) { var data = event.notification.data; clients.openWindow(data.url); }); Engagement

Slide 77

Slide 77 text

Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔

Slide 78

Slide 78 text

Performance

Slide 79

Slide 79 text

It’s not an Infrastructure problem

Slide 80

Slide 80 text

If it is... App’s won’t save you!

Slide 81

Slide 81 text

Page Load Time

Slide 82

Slide 82 text

Time to first render

Slide 83

Slide 83 text

First Render < 1s

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

There are simple things we can do to speed up our sites

Slide 86

Slide 86 text

Critical Render Path

Slide 87

Slide 87 text

Find and remove Render Blocking Assets

Slide 88

Slide 88 text

Prioritize Visible content

Slide 89

Slide 89 text

Visible content Content that is likely to be visible in the top area

Slide 90

Slide 90 text

What would first render look like ● No Web Font’s ● No Images inline ● No plugins ● Just the CSS for the page

Slide 91

Slide 91 text

CSS before JS

Slide 92

Slide 92 text

Inline page required CSS then Async load the rest

Slide 93

Slide 93 text

prioritize_critical_css original First render @ 4.1 First render @ 1.3 s

Slide 94

Slide 94 text

Compress Everything

Slide 95

Slide 95 text

Reduce Requests DNS Lookup Initial Conn SSL Negotiation Socket set-up Time to first byte (HTTP Request) Data delivery . . .

Slide 96

Slide 96 text

Pre-connect

Slide 97

Slide 97 text

Remove Redirects no more www.site.com -> m.site.com DNS Lookup Initial Conn SSL Negotiation Socket set-up Time to first byte (HTTP Request) Data delivery . . .

Slide 98

Slide 98 text

Stop using 3rd party plugins window.addEventListener("load", function() { var iframes = document.getElementsByTagName("iframe"); for(var i = 0; i < iframes.length; i++) { var ifr = iframes[i]; if(ifr.hasAttribute("data-src")) { var src = ifr.getAttribute("data-src"); ifr.setAttribute("src", src); } } });

Slide 99

Slide 99 text

Plan for http/2

Slide 100

Slide 100 text

Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔ ✔

Slide 101

Slide 101 text

Capabilities

Slide 102

Slide 102 text

Most apps just want Notifications

Slide 103

Slide 103 text

Camera exp.bartekdrozdz.com/app/webfilter/ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video'); if (navigator.getUserMedia) { navigator.getUserMedia({ video: true }, function(stream) { video.src = window.URL.createObjectURL(stream); } , errorCallback); } Capabilities

Slide 104

Slide 104 text

Microphone voice-memos.appspot.com/ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video'); if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true }, function(stream) { audio.src = window.URL.createObjectURL(stream); } , errorCallback); } Capabilities

Slide 105

Slide 105 text

Battery Status var batterySuccess = function(battery) { updateState(battery); // Monitor further updates battery.addEventListener("levelchange", function() { /* battery.level changed */ }); battery.addEventListener("chargingchange", function() { /* battery.charging changed */ }); battery.addEventListener("dischargingtimechange", function() { }); battery.addEventListener("chargingtimechange", function() { }); }; navigator.getBattery().then(batterySuccess); Capabilities

Slide 106

Slide 106 text

Permissions navigator.permissions.query({name:'geolocation'}) .then(function(permStatus) { // geo permission is permStatus.status permStatus.onchange = function() { // geo permission changed to this.status); }; }); Capabilities

Slide 107

Slide 107 text

Bluetooth navigator.bluetooth.requestDevice( { filters: [{ services: ['battery_service'] }] }) .then(device => { // Human-readable name of the device. console.log(device.name); // Indicates whether or not the device is paired with the system console.log(device.paired); // Filtered UUIDs of GATT services the website origin has access console.log(device.uuids); // Attempts to connect to remote GATT Server. return device.connectGATT(); }) Capabilities

Slide 108

Slide 108 text

Net Info function changeHandler(e) { // Handle change to connection here. connEl.innerText = navigator.connection.type; speed = navigator.connection.downlinkMax; } navigator.connection.addEventListener( 'typechange', changeHandler); Capabilities

Slide 109

Slide 109 text

Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more There is a lot more coming...

Slide 110

Slide 110 text

Background Sync self.addEventListener('sync', function(event) { event.waitUntil(sendEverythingInTheOutbox()); });

Slide 111

Slide 111 text

Periodic Background Sync self.addEventListener('periodicsync', function(e) { e.waitUntil(checkforNewsArticle()); }); navigator.serviceWorker.ready.then(function(reg) { reg.periodicSync.register({ minPeriod: 12 * 60 * 60 * 1000,// 12 hours powerState: 'avoid-draining', // default: 'auto' networkState: 'avoid-cellular' // default: 'online' }).then(function(periodicSyncReg) { }) }); Service Worker Web Page

Slide 112

Slide 112 text

Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔ ✔ ✔

Slide 113

Slide 113 text

Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔ ✔ ✔ Payments :’(

Slide 114

Slide 114 text

The Web is dead Engaged native user Move to

Slide 115

Slide 115 text

Make an engaged user on the web Engaged native user Upgrade to

Slide 116

Slide 116 text

“Build engaging experiences. Your site is the first touch point to do that” - Me, forever

Slide 117

Slide 117 text

developers.google.com/web/fundamentals

Slide 118

Slide 118 text

developers.google.com/web/updates

Slide 119

Slide 119 text

chromiumdev-slack.herokuapp.com

Slide 120

Slide 120 text

“Thank you” - Me, always paulkinlan@google.com @paul_kinlan