42. Communications & the web
WebRTC
Desktop:
Microsoft Edge
Google Chrome
Mozilla Firefox
Opera
Android:
Google Chrome
Mozilla Firefox
Opera Mobile
Chrome OS
Firefox OS
65. 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
69. // 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
70. Inside our install callback:
1. Open a cache
2. Cache our ļ¬les
3. Conļ¬rm whether all the required
assets are cached or not
Installing a Service Worker
74. 1. Update your service worker JavaScript ļ¬le.
2. Your new service worker will be started and the
install event will be ļ¬red.
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 ļ¬red.
Updating a Service Worker
75. Instant Loading Web Apps with
An Application Shell Architecture
Application Shell
83. // Are Notifications supported in the service worker? āØ
if (!('showNotification' in ServiceWorkerRegistration.prototype)) { āØ
console.warn('Notifications aren't supported.'); āØ
return; āØ
}
Push notifications
84. // 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
85. // Check if push messaging is supported āØ
if (!('PushManager' in window)) { āØ
console.warn('Push messaging isn't supported.'); āØ
return; āØ
}
Push notifications
86. // 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
90. App Install Banners prerequisites
You have a web app manifest ļ¬le
You have a service worker registered on
your site. We recommend a simple custom
ofļ¬ine 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.
92. 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 notiļ¬cation tray
- Alex Russell