The future of the web on mobile? - Coldfront conf

Slide 1

Slide 1 text

The future of the web on mobile

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Links are clickable

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

In 5 years you won’ t know you’re using a browser

Slide 6

Slide 6 text

I went to India. This is the only photo I took.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

6 million new mobile users per month

Slide 9

Slide 9 text

Screw the web Engaged user Go native

Slide 10

Slide 10 text

1. Performance 2. Engagement 3. Offline access 4. Capabilities

Slide 11

Slide 11 text

Dev’s and Biz think they can’t do this on the web

Slide 12

Slide 12 text

Designed 1822 ish

Slide 13

Slide 13 text

"Analytical Machine Babbage London" by Bruno Barral (ByB). Licensed under CC BY-SA 2.5 via Wikimedia Commons goo.gl/Ry8Odk NEVER BUILT

Slide 14

Slide 14 text

60’s - Mid 80’s

Slide 15

Slide 15 text

Invented Peak Demise 1977 1980s ?

Slide 16

Slide 16 text

Invented Peak Demise 1976 1980s ?

Slide 17

Slide 17 text

Invented Peak Demise 1982 2005?

Slide 18

Slide 18 text

Invented Peak Demise 1988 1998 2009

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Far less capable Massively better delivery model

Slide 21

Slide 21 text

Friction was removed

Slide 22

Slide 22 text

SLICE paul.kinlan.me/slice-the-web/

Slide 23

Slide 23 text

Secure

Slide 24

Slide 24 text

Linkable

Slide 25

Slide 25 text

Indexable

Slide 26

Slide 26 text

Composable

Slide 27

Slide 27 text

Ephemeral Site takes up no resources once you leave Lives and dies with the tab

Slide 28

Slide 28 text

SLUICE Updateable? https://commons.wikimedia.org/wiki/File:MagomeSluice.jpg

Slide 29

Slide 29 text

Is this relevant on mobile?

Slide 30

Slide 30 text

Diskettes CD Web App Stores Mobilithic era Mobile era Chat + Others Pre internet DVD

Slide 31

Slide 31 text

Diskettes CD Web App Stores Mobilithic era Mobile era Chat + Others Pre internet DVD June 29, 2007 1.3 billion users 2 new billion users

Slide 32

Slide 32 text

Google Confidential and Proprietary 86% spent in apps 14% spent in the browser Smartphone users spend most of their time in apps Source: Flurry 2014

Slide 33

Slide 33 text

Google Confidential and Proprietary 86% spent in apps 14% spent in the browser Smartphone users spend most of their time in apps Source: Flurry 2014 ?% spent on web in apps

Slide 34

Slide 34 text

Many entry points

Slide 35

Slide 35 text

e-mail Messenger Social Notification WebView Beacons Search ?

Slide 36

Slide 36 text

Is the web under threat?

Slide 37

Slide 37 text

Web iOS Android Desktop Meta platform Host platform

Slide 38

Slide 38 text

Web iOS Android Desktop FB WeChat Messengers Line Meta platform Host platform Kakao

Slide 39

Slide 39 text

Web iOS Android Desktop FB WeChat Messengers Line Meta platform Host platform Kakao

Slide 40

Slide 40 text

Web Android Desktop FB WeChat Apple News iOS Line Meta platform Host platform Kakao Instant Articles Content platform Official Accounts Kakao Page

Slide 41

Slide 41 text

Web Android Desktop Performance FB WeChat Apple News Line iOS Meta platform Host platform Kakao Instant Articles Content platform Official Accounts Kakao Page

Slide 42

Slide 42 text

Web Android Desktop FB WeChat Apple News Line Meta platform iOS Host platform Kakao Content platform Performance Web? Instant Articles Official Accounts Kakao Page

Slide 43

Slide 43 text

Web iOS Android Desktop FB WeChat Messengers Line Meta platform Host platform Kakao

Slide 44

Slide 44 text

Web iOS Android Desktop FB WeChat Line Meta platform Host platform Kakao App platform FB WeChat Line Kakao

Slide 45

Slide 45 text

Web iOS Android Desktop FB WeChat Line Meta platform Host platform Kakao App platform FB WeChat Line Kakao Capabilities

Slide 46

Slide 46 text

Web iOS Android Desktop FB WeChat Line Meta platform Host platform Kakao App platform FB WeChat Line Kakao Web? Capabilities

Slide 47

Slide 47 text

Each app wants to be “the next browser”

Slide 48

Slide 48 text

We all want it to launch in the browser ● Simple ● Secure ● Apps lose the user ● Not branded Good The Bad

Slide 49

Slide 49 text

Apps want you in brand ● Keep user in app ● No context switch ● Value added services ● Hard to build ● Isolated Cookie stores ● Every URL can be tracked ● Features not implemented AKA. WebViews Good The Bad

Slide 50

Slide 50 text

Embeddable Browser ● Keep user in app and brand ● Performance optimizations ● No context switch ● Shared login across browser and app ● All browser features are available ● No URL tracking AKA. Chrome Custom Tabs SFSafariViewController

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Each platform intends to be “the next web”

Slide 53

Slide 53 text

React TODO: Trojan horse.

Slide 54

Slide 54 text

It’s pretty bleak for the web

Slide 55

Slide 55 text

3 “simple” steps to win with the web

Slide 56

Slide 56 text

3. Act Installed, Be Ephemeral

Slide 57

Slide 57 text

Web 2013 Web 2014 Web (2015) Native Deep Linking YES YES YES KINDA Single click install and launch YES YES YES NO Geo YES YES YES YES Gyro YES YES YES YES Offline KINDA KINDA YES YES Contacts NO NO NO YES Camera NO NO YES YES Push NO NO YES YES Auth NO NO NO YES Payments NO NO NO YES

Slide 58

Slide 58 text

Slide 59

Slide 59 text

1. Be in all the expected places 2. Always be available regardless of connectivity 3. No install required.

Slide 60

Slide 60 text

google.github.io/physical-web/

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Get on the homescreen ● The app uses a service worker ● The site is using HTTPS ● The app has a manifest declared ● The manifest has a short_name, 144 pixel icon

Slide 63

Slide 63 text

HTML { "short_name": "Airhorner", "name": "Airhorner", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait" } JSON Manifest

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 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/

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 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' ]); }) ); });

Slide 72

Slide 72 text

Installed Activated Idle Error Terminated Active You can work when the browser is closed

Slide 73

Slide 73 text

Installed Activated Idle Error Terminate d Active onfetch onmessage onnotificationclick more

Slide 74

Slide 74 text

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

Slide 75

Slide 75 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

Slide 76

Slide 76 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); }) ); });

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

SW Your server GCM server Client Server

Slide 79

Slide 79 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' }; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag, data: data }) ); });

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

SW Your server GCM server Client Server Local

Slide 82

Slide 82 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 }) ); });

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

SW Opens a web page User clicks

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

SW Open a web page SW Execute JS User clicks

Slide 87

Slide 87 text

self.addEventListener('notificationclick', function(event) { var data = event.notification.data; var action = event.notification.action; if(action == “like”) { // Do something. fetch() } else { clients.openWindow(data.url); } });

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 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 91

Slide 91 text

Beacons? self.addEventListener('beaconfound', function(event) { ... });

Slide 92

Slide 92 text

Future: geofence? self.addEventListener('entergeofence', function(event) { ... });

Slide 93

Slide 93 text

Does all it’s work in the background

Slide 94

Slide 94 text

2. Build for a richer platform

Slide 95

Slide 95 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); }

Slide 96

Slide 96 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); }

Slide 97

Slide 97 text

Battery Status googlechrome.github.io/samples/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);

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

Net Info jsbin.com/moturi/2 function changeHandler(e) { // Handle change to connection here. connEl.innerText = navigator.connection.type; } navigator.connection.addEventListener( 'typechange', changeHandler);

Slide 100

Slide 100 text

Web 2013 Web 2014 Web (2015) Native Deep Linking YES YES YES KINDA Single click install and launch YES YES YES NO Geo YES YES YES YES Gyro YES YES YES YES Offline KINDA KINDA YES YES Camera KINDA YES YES YES Push NO NO YES YES Contacts NO NO NO YES Auth NO NO NO YES Payments NO NO NO YES

Slide 101

Slide 101 text

How does the Web match the cadence of Native and Play Services?

Slide 102

Slide 102 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 103

Slide 103 text

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Slide 104

Slide 104 text

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html What happens to the web when native solves this?

Slide 105

Slide 105 text

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html Killer feature

Slide 106

Slide 106 text

1. Be Instant

Slide 107

Slide 107 text

1000ms to first paint (progressive rendering)

Slide 108

Slide 108 text

Follow the Critical Render Path The series of events that must take place to render the initial view of a webpage.

Slide 109

Slide 109 text

Aggressively Offline content

Slide 110

Slide 110 text

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html Give value immediately Optimize this