Web Workers
&& Service Workers && SharedWorker
Web Workers
const myWorker = new Worker('worker.js')// Відправити у воркер
myWorker.postMessage('Hello!');
// Отримати з воркера
myWorker.onmessage = (e) => {
console.log(e.data);
}
// Вбити(
worker.terminate()ресурси worker-а живуть в процесі створившої його сторінки
/* worker.js */
// Отримувати з головного файлу
self.onmessage = function(e) {
console.log(e.data);
// Надіслати до головного файлу
self.postMessage('some info');
}Фішечки
Воркери можна подружити через SharedWorker
worker.postMessage({ port: sharedWorker.port }, [sharedWorker.port]);* для цього використовується головний потік
SharedWorker
const worker = new SharedWorker("worker.js")
worker.port.start()
// -->
worker.port.postMessage({hello: 'world'});
// --<
worker.port.onmessage = (e) => { e.data... };
// підписка
self.onconnect = function(e) {
const port = e.ports[0];
port.onmessage = (e) => { e.data... };
};Kill shared worker
- коли він закриється сам (self.close())
- коли закриються всі сторінки, що його використовують
- коли користувач примусово завершить його (наприклад, в хромі з chrome: // inspect)
- коли впаде він, або процес сторінки, де він живе
Обмеження
-
не має DOM
-
не має window, є глобальний об'єкт self
-
не можна малювати в канвас (крім OffscreenCanvas)
-
не має підтримки CORS, завантаження тільки з поточного домену
-
має обмежений розмір стека (2-10x)
Service Workers
- Precaching
- Runtime caching (AppCache)
- Network (Proxy)
- Request routing
- Background sync
- Offline third-party analyst
- Працює тільки з HTTPS
- Реєстрація повинна бути з корня домена
- Можливість реалізовувати стратегії networkFirst, cacheFirst
- на відміну від workers мають доступ до IndexedDB
LifyCycle
navigator.serviceWorker.register('/service-worker.js').then(lolool)
// можна викликати ввесь час після завантаження,
// браузер сам вирішить чи воркер зареєстровано/* service-worker.js */
self.addEventListener('install', (event) => {
// ...
});
// ця подія спрацьовує після інсталяції воркера та видалення старого
self.addEventListener('activate', (event) => {
// ...
});
// якщо користувач змінив сторінку чи оновив поточну
self.addEventListener('fetch', (event) => {
// ...
});Оновлення
- для оновлення файли сервіс воркера повинні відрізнятись, браузер оновлює автоматично при завантаженні сайту
- якщо Service Worker новий, спрацьовує подія install.
- на цьому етапі старий Service Worker як і раніше контролює сторінку, тоді як новий переходить в стан waiting.
- коли поточні відкриті сторінки сайту будуть закриті, старий Service Worker буде убитий, а новий отримає контроль.
navigator.storage.estimate().then(estimate => {
console.log(`
Using: ${estimate.usage / 1024 / 1024} Mb;
Limit: ${estimate.quota / 1024 / 1024} Mb;
`);
})