Date post: | 08-Sep-2014 |
Category: |
Technology |
Upload: | chang-w-doh |
View: | 1,671 times |
Download: | 4 times |
Service WorkerNew game changer is coming :)
Chang W. Doh
GDG WebTech OrganizerHTML5Rocks/KO Contributor/Coordinator
</hi><hi>
App. Cache!!App. Cache!!Offline!!
Offline!!
Image: ‘Mission Impossible 4’ Movie
We forgot something!But…what?
● Truely controlling offline resources○ Application Cache? OMG!○ Everything managed by your webbrowser!
● Plus, background processing○ Remote Push Notification, Alarm,
Background-update of resources, ...○ Everything run on your webpage!
Mission Impossible:before the ‘ServiceWorker’!
● Truely controlling offline/network stack○ Programmable cache control○ Custom response
● Plus, background processing○ Remote Push Notification○ Task Scheduler(e.g. Local Notification)○ BackgroundSync○ ...
Mission completed:‘ServiceWorker’ solves...
Yay,ServiceWorker!!
● Specification is worked in progress. But,○ Installed
■ https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
○ Activating■ http://www.w3.org/TR/service-workers/
● See also: Is Service Worker ready?○ https://jakearchibald.github.
io/isserviceworkerready/
Is Service Worker available?
http://www.slideshare.net/jungkees/service-workersa
● Event-driven scripts○ that run independently of web pages
● ServiceWorker has○ Access to domain-wide events such as
network fetches○ scriptable caches○ The ability to respond to network requests
from certain web pages via script■ A way for applications to "go offline"
Overview:Service Worker
http://www.slideshare.net/jungkees/service-workersa
● Principles & terms○ Run on same origin○ Registration keyed by URL scope○ Document is controlled by matching
SeviceWorker upon navigation○ Successfully installed worker is considered
worker in waiting○ Lifecycle events○ Functional events
Overview:Service Worker
http://www.slideshare.net/jungkees/service-workersa
● Security○ Origin relativity○ Cross origin resource○ HTTPS only: preventing man-in-the-middle
attacks
Overview:Service Worker
http://www.slideshare.net/jungkees/service-workersa
Typical network fetch:Sufficient response
http://www.slideshare.net/jungkees/service-workersa
Typical network fetch:Insufficient response
http://www.slideshare.net/jungkees/service-workersa
With ServiceWorker:Bring your own cache
http://www.slideshare.net/jungkees/service-workersa
With ServiceWorker:Fallback to network
http://www.slideshare.net/jungkees/service-workersa
What can we do with ServiceWokers?
● Eliminating loading time○ Developer knows what is most important
resource in our webpages.■ We can control ‘request/response flow’ and
‘cache’ with ServiceWorker.
■ and Front-end developers just write their code without other libraries to control cache-flow.
○ Your page will be loaded in an instant!!!
● Other features come and see us soon. :)
● Type in the url box
● Check ‘enable’ like:
How to:enable ‘Service Worker’
chrome://flagsor
chrome://flags/#enable-service-worker
36+
● Type in the url box:
● To see the registrations:
How to:know ‘Service Worker is working’
chrome://inspect/#service-workers
chrome://serviceworker-internals
● Install
Demo from Google I/O 2014:Topeka
// ServiceWorker is ‘Installed’!!!this.addEventListener("install", function(e) { e.waitUntil( caches.create("core") // Creating Cache ‘core’! .then(function(core) { var resourceUrls = [ "", "?offline", "components/core-ajax/core-ajax.html", // ... ];
return Promise.all(resourceUrls.map(function(relativeUrl) { // Add resource to cache ‘core’ return core.add(baseUrl + relativeUrl); })); }));});
● fetchthis.addEventListener("fetch", function(e) { var request = e.request; if (this.scope.indexOf(request.origin) == -1) { return; }
// Basic read-through caching. e.respondWith( caches.match(request, "core").then( function(response) { return response; }, function() { // we didn't have it in the cache, so add it to the cache and return it return caches.get("core").then( function(core) { log("runtime caching:", request.url);
// FIXME(slighltyoff): add should take/return an array return core.add(request).then( function(response) { return response; });
// ...
Demo from Google I/O 2014:Topeka
References[1] ServiceWorker first draft published[2] Specification[3] Explainer[4] Implemetation Considerations[5] Service Workers: Bring your own magic[6] Topeka Demo @Google I/O 2014