Embed Size (px)
Citation preview
The Web - What it Has, What it Lacks and Where it Must Go @robertnyman
2010
2010
2010
Party like it's 2010
Our line of work
My role at Google
My role at Google
https://developers.google.com/android/
https://developers.google.com/ios/
https://developers.google.com/web/
My role at Google
My role at Google - understanding trends
The web as of today The web vs. native
Tools & resources from Google SLICE
Why do developers need a native app? Monetization
Future of the web
The web as of today
The web as of today
The web as of today
One billion active users
The web as of today
The web as of today
The web as of today
Morgan Stanley: the web is winning
The web vs. native
The web vs. native
Visitor traffic to top companies/services
The web vs. native
comScore: 87% of time on mobile spent in appsNative is winning
The web vs. native
10% of time on mobile spent in the browser
The web vs. native
10% of time on mobile spent in the browser
The web vs. native
?
The web vs. native
Messaging, Social > Gaming
The web vs. native
One billion daily users,
where 844 million daily users are on mobile
The web vs. native
…and these 7 products also have more than one billion users:
The web vs. native
The web vs. native
Tools & measures from
App install interstitials being
non-mobile friendly
App install interstitials being non-mobile friendly
Mobile-Friendly Test
Mobile-Friendly Test
https://www.google.com/webmasters/tools/mobile-friendly/
Communications & the web
Communications & the web
Communications & the web
https://hangouts.google.com/
Communications & the web
WebRTC
Desktop:Microsoft EdgeGoogle ChromeMozilla FirefoxOpera
Android:Google ChromeMozilla FirefoxOpera Mobile
Chrome OSFirefox OS
Chrome DevTools
Chrome DevTools
https://developers.google.com/web/tools/chrome-devtools/
Web Fundamentals
Web Fundamentals
https://developers.google.com/web/fundamentals/
Chrome Custom Tabs
Chrome Custom Tabs
https://developer.chrome.com/multidevice/android/customtabs
SLICE
Google influencers
Paul Kinlan Jake Archibald Alex Russell Paul Lewis + many more
The web, moving forward
Build instantly engaging sites and apps without the need for a mandatory app download
SLICE
Indexable
SLICE
Ephemeral
Why do developers need a native app?
Performance
Sensors
OS-specific features
Offline accessPeriodic background processing
Notifications
Why do developers need a native app?
From Brian Kennan
Performance
Sensors
OS-specific features
Offline access
Periodic background processing
Notifications
Why do developers need a native app?
From Brian Kennan
Initiatives to address this
New web features
Offline access =>
Service Workers
Service Workers
It's a JavaScript Worker, so it can't access the DOM directly. Instead responds to postMessages
Service worker is a programmable network proxy
It will be terminated when not in use, and restarted when it's next needed
Makes extensive use of Promises
Service Workers
HTTPS is Needed
Service Workers
Register and Installing a Service Worker
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); });}
chrome://inspect/#service-workers chrome://serviceworker-internals/
Service Workers
// The files we want to cachevar urlsToCache = [ '/', '/styles/main.css', '/script/main.js']; // Set the callback for the install stepself.addEventListener('install', function(event) { // Perform install steps});
Installing a Service Worker
Inside our install callback:
1. Open a cache 2. Cache our files 3. Confirm whether all the required assets are cached or not
Installing a Service Worker
Install callback
var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js']; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) );});
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) );});
Caching and Returning Requests
Updating a Service Worker
1. Update your service worker JavaScript file. 2. Your new service worker will be started and the
install event will be fired. 3. New Service Worker will enter a "waiting" state 4. When open pages are closed, the old Service
Worker will be killed - new service worker will take control.
5. Once new Service Worker takes control, its activate event will be fired.
Updating a Service Worker
Instant Loading Web Apps with An Application Shell Architecture
Application Shell
Periodic background processing =>
Background Sync
Background Sync
Chrome Dev for Android or Chrome Canary for desktop
chrome://flags/#enable-experimental-web-platform-features
Restart the browser
Notifications =>
Push notifications
Push notifications
// Are Notifications supported in the service worker? if (!('showNotification' in ServiceWorkerRegistration.prototype)) { console.warn('Notifications aren\'t supported.'); return; }
Push notifications
// Check the current Notification permission. // If its denied, it's a permanent block until the // user changes the permission if (Notification.permission === 'denied') { console.warn('The user has blocked notifications.'); return; }
Push notifications
// Check if push messaging is supported if (!('PushManager' in window)) { console.warn('Push messaging isn\'t supported.'); return; }
Push notifications
// We need the service worker registration to check for a subscription navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { // Do we already have a push message subscription? serviceWorkerRegistration.pushManager.getSubscription() .then(function(subscription) { // Enable any UI which subscribes / unsubscribes from // push messages. var pushButton = document.querySelector('.js-push-button'); pushButton.disabled = false; if (!subscription) { // We aren't subscribed to push, so set UI // to allow the user to enable push return; } // Keep your server in sync with the latest subscriptionId sendSubscriptionToServer(subscription); // Set your UI to show they have subscribed for // push messages pushButton.textContent = 'Disable Push Messages'; isPushEnabled = true; }) .catch(function(err) { console.warn('Error during getSubscription()', err); }); }); Push notifications
{ "name": "Push Demo", "short_name": "Push Demo", "icons": [{ "src": "images/icon-192x192.png", "sizes": "192x192", "type": "image/png" }], "start_url": "/index.html?homescreen=1", "display": "standalone"}
<link rel="manifest" href="manifest.json">
Push notifications
Add to Homescreen
Cache management & whitelistsApp Install Banners
App Install Banners prerequisites
You have a web app manifest file
You have a service worker registered on your site. We recommend a simple custom offline page service worker
Your site is served over HTTPS (you need a service worker after all)
The user has visited your site twice over two separate days during the course of two weeks.
All this leads to progressive
apps
Progressive Apps
These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.
They keep the web’s ask-when-you-need-it permission model and add in new capabilities like being top-level in your task switcher, on your home screen, and in your notification tray
- Alex Russell
Progressive Apps
http://bit.ly/progressive-web-apps
Web Updates - http://bit.ly/web-updates
Monetization
Future of the web
Future of the web
Why the web?
Future of the web
Native platforms needs to be matched and surpassed
Future of the web
Getting people back to using URLs, sharing things online and making it
accessible across all platforms
Future of the web
Go simple
Future of the web
Go simple
Right now the onboarding process for a (front-end) web developer is much harder than it
was before
Future of the web
Go simple
We've gone from HTML, CSS and JavaScript to incredibly complex solutions, build scripts &
workflows
Future of the web
Spread the word about what the web can do
Future of the web
Longevity of the web
Where stuff being built will still work 10 years down the line
Help keep the diversity of the web
