Future of Mobile Web - Coldfront conf
-
Upload
paul-kinlan -
Category
Technology
-
view
407 -
download
4
Transcript of Future of Mobile Web - Coldfront conf
![Page 1: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/1.jpg)
The future of the web on mobile
![Page 2: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/2.jpg)
![Page 3: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/3.jpg)
Links are clickable
![Page 4: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/4.jpg)
You don’t want to read our content right now
WAIT 3 MINUTES AND INSTALL OUR
APP
![Page 5: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/5.jpg)
In 5 years you won’t know you’re
using a browser
![Page 6: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/6.jpg)
I went to India.
This is the only photo I took.
![Page 7: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/7.jpg)
![Page 8: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/8.jpg)
6 million new mobile users per month
![Page 9: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/9.jpg)
Screw the web
Engaged user
Go native
![Page 10: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/10.jpg)
1. Performance2. Engagement3. Offline access4. Capabilities
![Page 11: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/11.jpg)
Dev’s and Biz think they can’t do this on the web
![Page 12: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/12.jpg)
Designed 1822 ish
![Page 13: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/13.jpg)
"Analytical Machine Babbage London" by Bruno Barral (ByB). Licensed under CC BY-SA 2.5 via Wikimedia Commons
goo.gl/Ry8Odk
NEVER BUILT
![Page 14: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/14.jpg)
60’s - Mid 80’s
![Page 15: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/15.jpg)
Invented Peak Demise
1977 1980s ?
![Page 16: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/16.jpg)
Invented Peak Demise
1976 1980s ?
![Page 17: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/17.jpg)
Invented Peak Demise
1982 2005?
![Page 18: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/18.jpg)
Invented Peak Demise
1988 1998 2009
![Page 19: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/19.jpg)
![Page 20: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/20.jpg)
Far less capable
Massively better delivery model
![Page 21: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/21.jpg)
Friction was removed
![Page 22: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/22.jpg)
SLICEpaul.kinlan.me/slice-the-web/
![Page 23: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/23.jpg)
Secure
![Page 24: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/24.jpg)
Linkable
![Page 25: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/25.jpg)
Indexable
![Page 26: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/26.jpg)
Composable
![Page 27: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/27.jpg)
EphemeralSite takes up no resources once
you leave
Lives and dies with the tab
![Page 28: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/28.jpg)
SLUICE
Updateable?
https://commons.wikimedia.org/wiki/File:MagomeSluice.jpg
![Page 29: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/29.jpg)
Is this relevant on mobile?
![Page 30: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/30.jpg)
Diskettes
CD
Web
App Stores
Mobilithic era Mobile eraChat + Others
Pre internet
DVD
![Page 31: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/31.jpg)
Diskettes
CD
Web
App Stores
Mobilithic era Mobile eraChat + Others
Pre internet
DVD
June 29, 2007
1.3 billion users 2 new billion users
![Page 32: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/32.jpg)
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
![Page 33: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/33.jpg)
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
![Page 34: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/34.jpg)
Many entry points
![Page 35: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/35.jpg)
e-mail Messenger Social Notification
WebView Beacons Search ?
![Page 36: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/36.jpg)
Is the web under threat?
![Page 37: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/37.jpg)
Web
iOS Android Desktop
Meta platform
Host platform
![Page 38: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/38.jpg)
Web
iOS Android Desktop
FB WeChat
Messengers
LineMeta platform
Host platform
Kakao
![Page 39: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/39.jpg)
Web
iOS Android Desktop
FB WeChat
Messengers
LineMeta platform
Host platform
Kakao
![Page 40: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/40.jpg)
Web
Android Desktop
FB WeChat
Apple News
iOS
LineMeta platform
Host platform
Kakao
Instant Articles
Content platform
Official Accounts
Kakao Page
![Page 41: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/41.jpg)
Web
Android Desktop
Performance
FB WeChat
Apple News
Line
iOS
Meta platform
Host platform
Kakao
Instant Articles
Content platform
Official Accounts
Kakao Page
![Page 42: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/42.jpg)
Web
Android Desktop
FB WeChat
Apple News
LineMeta platform
iOSHost platform
Kakao
Content platform
Performance
Web? Instant Articles
Official Accounts
Kakao Page
![Page 43: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/43.jpg)
Web
iOS Android Desktop
FB WeChat
Messengers
LineMeta platform
Host platform
Kakao
![Page 44: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/44.jpg)
Web
iOS Android Desktop
FB WeChatLineMeta platform
Host platform
Kakao
App platform FB WeChatLine Kakao
![Page 45: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/45.jpg)
Web
iOS Android Desktop
FB WeChatLineMeta platform
Host platform
Kakao
App platform
FB WeChatLine KakaoCapabilities
![Page 46: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/46.jpg)
Web
iOS Android Desktop
FB WeChatLineMeta platform
Host platform
Kakao
App platform
FB WeChatLine KakaoWeb?Capabilities
![Page 47: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/47.jpg)
Each app wants to be
“the next browser”
![Page 48: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/48.jpg)
We all want it to launch in the browser
● Simple● Secure
● Apps lose the user
● Not branded
Good The Bad
![Page 49: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/49.jpg)
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
![Page 50: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/50.jpg)
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
![Page 51: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/51.jpg)
![Page 52: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/52.jpg)
Each platform intends to be
“the next web”
![Page 53: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/53.jpg)
React
TODO: Trojan horse.
![Page 54: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/54.jpg)
It’s pretty bleak for the web
![Page 55: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/55.jpg)
3 “simple” steps to win with the web
![Page 56: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/56.jpg)
3. Act Installed,Be Ephemeral
![Page 57: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/57.jpg)
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
![Page 58: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/58.jpg)
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
![Page 59: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/59.jpg)
1. Be in all the expected places
2. Always be available regardless of connectivity
3. No install required.
![Page 60: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/60.jpg)
google.github.io/physical-web/
![Page 61: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/61.jpg)
![Page 62: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/62.jpg)
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
![Page 63: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/63.jpg)
<link rel="manifest" href="manifest.json">
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
![Page 64: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/64.jpg)
<meta
name="theme-color"
content="#3f4348">
![Page 65: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/65.jpg)
Service Worker
“The most important web technology since the link” - Me, just now
![Page 66: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/66.jpg)
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/
![Page 67: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/67.jpg)
Service worker is a background script that sits between the browser and the networkOS
What I say
![Page 68: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/68.jpg)
Installed
Activated
Idle
Error
Terminated
Active
Pages now have an app-like lifecycle
![Page 69: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/69.jpg)
Installed
Activated
Idle
Error
Terminated
Active
sw.js
Register Service Worker
![Page 70: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/70.jpg)
Installed
Activated
Idle
Error
Terminated
Active
You can “install” content for later use
![Page 71: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/71.jpg)
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' ]); }) );});
![Page 72: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/72.jpg)
Installed
Activated
Idle
Error
Terminated
Active
You can work when the browser is closed
![Page 73: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/73.jpg)
Installed
Activated
Idle
Error
Terminated
Activeonfetch
onmessage
onnotificationclick
more
![Page 74: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/74.jpg)
Installed
Activated
Idle
Error
Terminated
Activeonfetch
onmessage
onnotificationclick
moreYou own the network
![Page 75: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/75.jpg)
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
WebServer
![Page 76: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/76.jpg)
self.addEventListener('fetch', function(event) { console.log(event.request.url); event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) );});
![Page 77: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/77.jpg)
Installed
Activated
Idle
Error
Terminated
Activeonfetch
onmessage
onnotificationclick
moreYou can handle push messages
![Page 78: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/78.jpg)
SW
Your server
GCM server
ClientServer
![Page 79: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/79.jpg)
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 }) );});
![Page 80: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/80.jpg)
![Page 81: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/81.jpg)
SW
Your server
GCM server
ClientServer
Local
![Page 82: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/82.jpg)
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 }) );});
![Page 83: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/83.jpg)
Installed
Activated
Idle
Error
Terminated
Activeonfetch
onmessage
onnotificationclick
moreYou can handle notifications
![Page 84: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/84.jpg)
SW
Opens a web page
User clicks
![Page 85: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/85.jpg)
self.addEventListener('notificationclick', function(event) {
var data = event.notification.data;
clients.openWindow(data.url);
});
![Page 86: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/86.jpg)
SW
Open a web page
SW
Execute JS
User clicks
![Page 87: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/87.jpg)
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);
}
});
![Page 88: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/88.jpg)
Installed
Activated
Idle
Error
Terminated
Activeonfetch
onmessage
onnotificationclick
moreYou can handle notifications
![Page 89: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/89.jpg)
Background Sync
self.addEventListener('sync', function(event) { event.waitUntil(sendEverythingInTheOutbox());});
![Page 90: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/90.jpg)
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
![Page 91: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/91.jpg)
Beacons?
self.addEventListener('beaconfound', function(event) {
...
});
![Page 92: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/92.jpg)
Future: geofence?
self.addEventListener('entergeofence', function(event) {
...
});
![Page 93: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/93.jpg)
Does all it’s work in the background
![Page 94: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/94.jpg)
2. Build for a richer platform
![Page 95: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/95.jpg)
Cameraexp.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);}
![Page 96: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/96.jpg)
Microphonevoice-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);}
![Page 97: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/97.jpg)
Battery Statusgooglechrome.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);
![Page 98: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/98.jpg)
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
![Page 99: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/99.jpg)
Net Infojsbin.com/moturi/2
function changeHandler(e) { // Handle change to connection here. connEl.innerText = navigator.connection.type;}
navigator.connection.addEventListener( 'typechange', changeHandler);
![Page 100: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/100.jpg)
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
![Page 101: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/101.jpg)
How does the Web match the cadence of
Native and Play Services?
![Page 102: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/102.jpg)
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
![Page 103: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/103.jpg)
Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
![Page 104: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/104.jpg)
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?
![Page 105: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/105.jpg)
Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
Killer feature
![Page 106: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/106.jpg)
1. Be Instant
![Page 107: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/107.jpg)
1000ms to first paint(progressive rendering)
![Page 108: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/108.jpg)
Follow the Critical Render Path
The series of events that must take place to render the initial view of a webpage.
![Page 109: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/109.jpg)
Aggressively Offline content
![Page 110: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/110.jpg)
Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
Give value immediately
Optimize this
![Page 111: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/111.jpg)
Prepare for the
Headless Web
![Page 112: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/112.jpg)
![Page 113: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/113.jpg)
![Page 114: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/114.jpg)
![Page 115: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/115.jpg)
✓ Performance✓ Engagement✓ Offline access✓ Capabilities
![Page 116: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/116.jpg)
Screw the web
Engaged native user
Move to
![Page 117: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/117.jpg)
Make an engaged
user on the web
Engaged native user
Upgrade to
![Page 118: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/118.jpg)
Make an engaged
user on the web
Keep them there
![Page 119: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/119.jpg)
developers.google.com/web/fundamentals
![Page 120: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/120.jpg)
developers.google.com/web/updates
![Page 121: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/121.jpg)
chromestatus.com
![Page 122: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/122.jpg)
chromiumdev-slack.herokuapp.com
![Page 123: Future of Mobile Web - Coldfront conf](https://reader031.fdocuments.us/reader031/viewer/2022020314/587667b81a28abd0018b4585/html5/thumbnails/123.jpg)
[email protected]: chromiumdev-slack.herokuapp.com