Download as PDF, PPTX
![// 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](https://image.slidesharecdn.com/theweb-whatithaswhatitlacksandwhereitmustgo-151006094024-lva1-app6892/75/The-web-What-it-has-what-it-lacks-and-where-it-must-go-59-2048.jpg)
![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);
})
);
});](https://image.slidesharecdn.com/theweb-whatithaswhatitlacksandwhereitmustgo-151006094024-lva1-app6892/75/The-web-What-it-has-what-it-lacks-and-where-it-must-go-61-2048.jpg)
![{
"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](https://image.slidesharecdn.com/theweb-whatithaswhatitlacksandwhereitmustgo-151006094024-lva1-app6892/75/The-web-What-it-has-what-it-lacks-and-where-it-must-go-73-2048.jpg)
Uploaded byRobert Nyman
The web - What it has, what it lacks and where it must go
The document discusses the current state and future of the web. It notes that while native apps currently dominate mobile usage, the web is working to address its limitations through new features like service workers for offline access, background sync for periodic processing, and push notifications. It highlights tools from Google like Mobile-Friendly Test, Chrome DevTools, and Web Fundamentals. It argues the web needs to simplify onboarding and spread awareness of its capabilities to ensure its long-term viability against native platforms. The future of the web depends on matching and surpassing native capabilities while keeping content universally accessible across different platforms.
More Related Content
Similar to The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
- 1. The Web -What it Has, What it Lacks and Where it Must Go @robertnyman
- 2. Our line ofwork
- 3.
- 4.
- 5.
- 6. My role atGoogle
- 7. My role atGoogle https://developers.google.com/android/ https://developers.google.com/ios/ https://developers.google.com/web/
- 8. My role atGoogle
- 9. My role atGoogle - https://medium.com/latest-from-google
- 10. The web asof today The web vs. native Tools & resources from Google SLICE Why do developers need a native app? Monetization Future of the web
- 11. The web as oftoday
- 12. The web asof today
- 13. The web asof today
- 14. The web asof today One billion active users
- 15. The web asof today Morgan Stanley: the web is winning
- 16.
- 17. The web vs.native comScore: 87% of time on mobile spent in apps Native is winning
- 18. The web vs.native 10% of time on mobile spent in the browser
- 19. The web vs.native 10% of time on mobile spent in the browser
- 20. The web vs.native ?
- 21. The web vs.native Messaging, Social > Gaming
- 22. The web vs.native Facebook One billion daily users, where 844 million daily users are on mobile
- 23. The web vs.native …and these also have more than one billion users:
- 24. The web vs.native Visitor traffic to top companies/services
- 25. The web vs.native
- 26. The web vs.native
- 27.
- 28.
- 29. App install interstitialsbeing non-mobile friendly
- 30.
- 31.
- 32.
- 33.
- 34. Communications & theweb https://hangouts.google.com/
- 35. Communications & theweb WebRTC Desktop: Microsoft Edge Google Chrome Mozilla Firefox Opera 18 Android: Google Chrome Mozilla Firefox Opera Mobile Chrome OS Firefox OS
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. Google influencers Paul Kinlan JakeArchibald Alex Russell Paul Lewis Paul Irish + many more
- 44. The web, movingforward Build instantly engaging sites and apps without the need for a mandatory app download
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Why do developers needa native app?
- 51. Performance Sensors OS-specific features Offline access Periodicbackground processing Notifications Why do developers need a native app? From Brian Kennan
- 52. Performance Sensors OS-specific features Offline access Periodicbackground processing Notifications Why do developers need a native app? From Brian Kennan
- 53. Initiatives to addressthis New web features
- 54.
- 55. It's a JavaScriptWorker, 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
- 56. HTTPS is Needed ServiceWorkers
- 57. Register and Installinga 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); }); }
- 58.
- 59. // The fileswe 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
- 60. Inside our installcallback: 1. Open a cache 2. Cache our files 3. Confirm whether all the required assets are cached or not Installing a Service Worker
- 61. 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); }) ); });
- 62. 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
- 63. Updating a ServiceWorker
- 64. 1. Update yourservice 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
- 65.
- 66.
- 67.
- 68.
- 69. // Are Notificationssupported in the service worker? if (!('showNotification' in ServiceWorkerRegistration.prototype)) { console.warn('Notifications aren't supported.'); return; } Push notifications
- 70. // Check thecurrent 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
- 71. // Check ifpush messaging is supported if (!('PushManager' in window)) { console.warn('Push messaging isn't supported.'); return; } Push notifications
- 72. // We needthe 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
- 73. { "name": "PushDemo", "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
- 74.
- 75. Cache management &whitelistsApp Install Banners
- 76. App Install Bannersprerequisites 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.
- 77. All this leadsto progressive apps
- 78. Progressive Apps These appsaren’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
- 79.
- 80.
- 81. Future of theweb WAWKI - Web as We Know It
- 82. Future of theweb Why the web?
- 83. Future of theweb Native platforms needs to be matched and surpassed
- 84. Future of theweb Getting people back to using URLs, sharing things online and making it accessible across all platforms
- 85. Future of theweb Go simple
- 86. Future of theweb Go simple Right now the onboarding process for a (front- end) web developer is much harder than it was before
- 87. Future of theweb Go simple We've gone from HTML, CSS and JavaScript to incredibly complex solutions, build scripts & workflows
- 88. Future of theweb Spread the word about what the web can do
- 89. Future of theweb Longevity of the web Where stuff being built will still work 10 years down the line
- 90.
- 91.