The document discusses the current state and future of the web. It notes that while native apps have gained popularity, especially on mobile, the web remains strong with over 1 billion active users. It outlines tools from Google like Service Workers that help the web compete with capabilities previously only available to native apps like push notifications, offline access, and background processing. The document advocates for continued progress to simplify the web development process and ensure the longevity of technologies, arguing this will help the web remain diverse and accessible across all platforms.

1. The Web - What it Has, What it Lacks
and Where it Must Go
@robertnyman

2. 2010

3. 2010

4. 2010

5. Party like it's 2010

7. Our line of work

8. My role at Google

9. My role at Google
https://developers.google.com/android/
https://developers.google.com/ios/
https://developers.google.com/web/

10. My role at Google

11. My role at Google - https://medium.com/latest-from-google

12. My role at Google - understanding trends

13. 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

14. The web
as of today

15. The web as of today

16. The web as of today

17. The web as of today
One billion
active users

18. The web as of today

19. The web as of today

20. The web as of today
Morgan Stanley: the web is winning

21. The web
vs. native

22. The web vs. native
Visitor traffic to top companies/services

23. The web vs. native
comScore: 87% of time on mobile spent in apps
Native is winning

24. The web vs. native
10% of time on mobile spent in the browser

25. The web vs. native
10% of time on mobile spent in the browser

26. The web vs. native
?

27. The web vs. native
Messaging, Social > Gaming

28. The web vs. native
Facebook
One billion daily users,
where 844 million daily
users are on mobile

29. The web vs. native
…and these 7 products also have
more than one billion users:

30. The web vs. native

31. The web vs. native

32. Tools &
measures from
Google

33. App install
interstitials being
non-mobile
friendly

34. App install interstitials being non-mobile friendly

35. Mobile-Friendly
Test

36. Mobile-Friendly Test
https://www.google.com/webmasters/tools/mobile-friendly/

37. Communications
& the web

38. Communications & the web

39. Communications & the web
https://hangouts.google.com/

40. Communications & the web
WebRTC
Desktop:
Microsoft Edge
Google Chrome
Mozilla Firefox
Opera
Android:
Google Chrome
Mozilla Firefox
Opera Mobile
Chrome OS
Firefox OS

41. Chrome
DevTools

42. Chrome DevTools
https://developers.google.com/web/tools/chrome-devtools/

43. Web
Fundamentals

44. Web Fundamentals
https://developers.google.com/web/fundamentals/

45. Chrome Custom
Tabs

46. Chrome Custom Tabs
https://developer.chrome.com/multidevice/android/customtabs

47. SLICE

48. Google influencers
Paul Kinlan
Jake Archibald
Alex Russell
Paul Lewis
+ many more

49. The web, moving forward
Build instantly
engaging sites
and apps
without the need
for a mandatory
app download

50. SLICE
Secure

51. SLICE
Linkable

52. SLICE
Indexable

53. SLICE
Composable

54. SLICE
Ephemeral

55. Why do developers
need a native app?

56. Performance
Sensors
OS-specific features
Offline access
Periodic background processing
Notifications
Why do developers need a native app?
From Brian Kennan

57. Performance
Sensors
OS-specific features
Offline access
Periodic background processing
Notifications
Why do developers need a native app?
From Brian Kennan

58. Initiatives to address this
New web features

59. Offline access
=>
Service Workers
Service Workers

60. 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

61. HTTPS is Needed
Service Workers

62. 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);
});
}

63. chrome://inspect/#service-workers
chrome://serviceworker-internals/
Service Workers

64. // The files we want to cache
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
// Set the callback for the install step
self.addEventListener('install', function(event) {
// Perform install steps
});
Installing a Service Worker

65. 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

66. 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);
})
);
});

67. 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

68. Updating a Service Worker

69. 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

70. Instant Loading Web Apps with
An Application Shell Architecture
Application Shell

73. Periodic background processing
=>
Background Sync

74. Background Sync

75. Background Sync
Chrome Dev for Android or Chrome Canary for desktop
chrome://flags/#enable-experimental-web-platform-features
Restart the browser

76. Notifications
=>
Push notifications

77. Push notifications

78. // Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
console.warn('Notifications aren't supported.');
return;
}
Push notifications

79. // 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

80. // Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn't supported.');
return;
}
Push notifications

81. // 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

82. {
"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

83. Add to
Homescreen

84. Cache management & whitelistsApp Install Banners

85. 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.

86. All this leads to
progressive
apps

87. 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

88. Progressive Apps
http://bit.ly/progressive-web-apps

89. Web Updates - http://bit.ly/web-updates

90. Monetization

91. Future of the web

92. Future of the web
Why the web?

93. Future of the web
Native platforms needs to be
matched and surpassed

94. Future of the web
Getting people back to using URLs,
sharing things online and making it
accessible across all platforms

95. Future of the web
Go simple

96. Future of the web
Go simple
Right now the onboarding process for a (front-
end) web developer is much harder than it
was before

97. Future of the web
Go simple
We've gone from HTML, CSS and JavaScript
to incredibly complex solutions, build scripts &
workflows

98. Future of the web
Spread the word about
what the web can do

99. Future of the web
Longevity of the web
Where stuff being built will still
work 10 years down the line

100. Future of the web

101. Help keep the diversity of the web

103. Robert Nyman
robertnyman.com
nyman@google.com
Google
@robertnyman