Web optimization with service woker
-
Upload
chen-tien-tsai -
Category
Software
-
view
5.245 -
download
0
Transcript of Web optimization with service woker
![Page 2: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/2.jpg)
Agenda
Introduction to ServiceWorker
Strategy for ServiceWorker
sw-toolbox
Result Comparison
![Page 3: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/3.jpg)
Introduction to ServiceWorker
![Page 4: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/4.jpg)
• Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.
• It's a JavaScript Worker, so it can't access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed.
• Host server need use SSL
• Cache request MUST trigger under register routing path
What is ServiceWorker
![Page 5: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/5.jpg)
SSL and Cache Scope
![Page 6: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/6.jpg)
• Browser support. • http://caniuse.com/#feat=serviceworkers
• Jake Archibald's is Serviceworker ready site.
• Need HTTPS
Prerequisites
![Page 7: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/7.jpg)
The service worker life cycle
![Page 8: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/8.jpg)
• On install - as a dependency
• On install - not as a dependency
• On activate
• On user interaction
• On network response
• Stale-while-revalidate
• On push message
• On background-sync
When to store resources
![Page 9: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/9.jpg)
On install - as a dependencyself.addEventListener('install', function(event) {
event.waitUntil(
caches.open('mysite-static-v3').then(function(cache) {
return cache.addAll([
'/css/whatever-v3.css',
'/css/imgs/sprites-v6.png',
'/css/fonts/whatever-v8.woff',
'/js/all-min-v4.js'
// etc
]);
})
);
});
![Page 10: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/10.jpg)
On install - not as a dependencyself.addEventListener('install', function(event) {
event.waitUntil(
caches.open('mygame-core-v1').then(function(cache) {
cache.addAll(
// levels 11-20
);
return cache.addAll(
// core assets & levels 1-10
);
})
);
});
![Page 11: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/11.jpg)
On activeself.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
![Page 12: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/12.jpg)
On user interactiondocument.querySelector('.cache-article').addEventListener('click', function(event) {
event.preventDefault();
var id = this.dataset.articleId;
caches.open('mysite-article-' +id).then(function(cache) {
fetch('/get-article-urls?id=' +id).then(function(response) {
// /get-article-urls returns a JSON-encoded array of
// resource URLs that a given article depends on
return response.json();
}).then(function(urls) {
cache.addAll(urls);
});
});
});
![Page 13: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/13.jpg)
On network responseself.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
returncache.match(event.request).then(function(response) {
return response ||fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
![Page 14: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/14.jpg)
Stale-while-revalidateself.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
returncache.match(event.request).then(function(response) {
var fetchPromise =fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})
return response || fetchPromise;
})
})
);
});
![Page 15: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/15.jpg)
Strategy for ServiceWorker
![Page 16: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/16.jpg)
• Cache only
• Network only
• Cache, falling back to network
• Cache & network race
• Network falling back to cache
• Cache then network
• Generic fallback
• ServiceWorker-side templating
Serving suggestions
![Page 17: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/17.jpg)
Performance impact of ServiceWorker
Demo : Trained-to-thrill
![Page 18: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/18.jpg)
• Cache on install, for the static UI and behaviour
• Cache on network response, for the Flickr images and data
• Fetch from cache, falling back to network, for most requests
• Fetch from cache, then network, for the Flickr search results
Demo uses
![Page 19: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/19.jpg)
sw-toolbox
![Page 20: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/20.jpg)
• sw-toolbox is a collection of tools for service workers, create by Google
• Install• npm install --save sw-toolbox
• Register your service worker• navigator.serviceWorker.register('my-service-worker.js’);
• Add Service Worker Toolbox to your service worker script• importScripts('node_components/sw-toolbox/sw-toolbox.js');
sw-toolbox
![Page 21: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/21.jpg)
• toolbox.networkFirst
• toolbox.cacheFirst
• toolbox.fastest
• toolbox.cacheOnly
• toolbox.networkOnly
Handlers
![Page 22: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/22.jpg)
• Router related• toolbox.router.<get|post|put|delete|head>(urlPattern, handler, options)
• toolbox.router.any(urlPattern, handler, options)
• toolbox.router.default
• Cache related• toolbox.precache(arrayOfURLs)
• toolbox.cache(url, options)
• toolbox.uncache(url, options)
Methods
![Page 23: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/23.jpg)
• ResourceCDN(maxEntries: 100, maxAgeSeconds: 1200)• https://<CDNDomain>/Public/*
• ContentCDN(maxEntries: 20, maxAgeSeconds: 1800)• https://<CDNDomain>/ContentCDN/*
• Betgenius(maxEntries: 5, maxAgeSeconds: 600)• https://<BetgeniusDomain>/*
• WebAppLocal(maxEntries: 10, maxAgeSeconds: 1200)• https://<WebAppDomain>/Public/Lib/*
Recommend Setting
![Page 24: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/24.jpg)
Setup Overview
service-worker-init.js
sw-toolbox.js
Site.Master
ResourceCDN
Betgenius
ContentCDN(HomepageCDN)
WebAppLocal
/Public/Lib
• https://<cdn>/Public/JS/Language/en-gb.js?v=07130719
• https://<cdn>/Public/bundles/js/coreJs.js?v=07130719
• https://<cdn>/Public/bundles/js/react.js?v=07130719
• ….
• https://<betgenius>/188BetFlash-phase3/api.js
• https://< betgenius>/188BetFlash-phase3/swfobject.js
• https://<cdn>/ContentCDN/Football/Sport01.jpg?v=143
• https://<cdn>/ContentCDN/Football/Sport02.jpg?v=143
• https://<cdn>/ContentCDN/Football/Sport03.jpg?v=143
• …
• https://<cdn>/Public/Templates/OddsPage/en-gb.Football_AHOU.html?v=07130719
• …
![Page 25: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/25.jpg)
Sample Code Site.Master
![Page 26: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/26.jpg)
Sample Code Service-worker.init.js
![Page 27: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/27.jpg)
Chrome Verification Network Tab
![Page 28: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/28.jpg)
Chrome Verification Application Tab
![Page 29: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/29.jpg)
Result Comparison
![Page 30: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/30.jpg)
Before
![Page 31: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/31.jpg)
After Service-worker First Time Loading
![Page 32: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/32.jpg)
After Service-worker Second time(exclude vendor)
![Page 33: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/33.jpg)
After Service-worker Second time(include vendor)
![Page 34: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/34.jpg)
• React Worker Dom• Github : web-perf/react-worker-dom
• Performance Demo : React Worker Dom
Another optimization from Web Worker
![Page 35: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/35.jpg)
• Service Workers: an Introduction
• Jake Archibald - The offline cookbook
• Making a Simple Site Work Offline with ServiceWorker
References
![Page 36: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/36.jpg)
Q & A
![Page 37: Web optimization with service woker](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a64e9137f8b9a223a8b458d/html5/thumbnails/37.jpg)
11F., No.399, Ruiguang Rd., Neihu Dist., Taipei City 114, Taiwan
THANK YOU!
Xuenn
+886 2 2798 8529
+886 2 2798 8531
www.xuenn.com
YiTeng
+886 2 2659 8958
+886 2 2659 8956
www.yitmh.com