Максим Сальников
@webmaxru
Как сделать приложение быстрее и удобнее,
Ответственный за успех Azure-разработчиков в Microsoft
Сервис-воркер
Работа с сетью
Кеширование
Установка
Возможности
на мобильных устройствах
на десктопах
Вольный перевод https://twitter.com/sanketsahu/status/1133223194888773632
self.addEventListener('install', event => {
// Помещаем ресурсы в Cache Storage
})
self.addEventListener('activate', event => {
// Управляем версиями
})
self.addEventListener('fetch', event => {
// Извлекаем из кеша и отдаем
})
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';
const PRECACHE_URLS = [
'index.html',
'./',
'styles.css',
'../../styles/main.css',
'demo.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches.keys().then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
self.addEventListener('fetch', event => {
if (event.request.url.startsWith(self.location.origin)) {
if (event.request.url.indexOf('api/') != -1) {
event.respondWith(
caches.match(event.request.clone()).then((response) => {
return response || fetch(event.request.clone()).then((r2) => {
return caches.open(RUNTIME).then((cache) => {
cache.put(event.request.url, r2.clone());
return r2.clone();
});
});
})
);
} else {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then(cache => {
return fetch(event.request).then(response => {
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
})
);
}
}
});
import { precacheAndRoute } from "workbox-precaching";
// Закешировать и выдавать ресурсы из массива __WB_MANIFEST
precacheAndRoute(self.__WB_MANIFEST);
# Используем Workbox как модуль для Node
$ npm install workbox-build --save-dev
При каждом билде
const { injectManifest } = require("workbox-build");
let workboxConfig = {
swSrc: "src/service-worker.js",
swDest: "dist/sw.js",
globPatterns: ["index.html", "*.css", "*.js"]
};
injectManifest(workboxConfig).then(() => {
console.log(`Generated ${workboxConfig.swDest}`);
});
import { precacheAndRoute } from "workbox-precaching";
precacheAndRoute([
{ revision: "866bcc582589b8920dbc", url: "index.html" },
{ revision: "c2761edff7776e1e48a3", url: "styles.css" },
{ revision: "3469613435532733abd9", url: "main.js" }
]);
import { precacheAndRoute } from "workbox-precaching";
precacheAndRoute(self.__WB_MANIFEST);
import resolve from 'rollup-plugin-node-resolve'
import replace from 'rollup-plugin-replace'
import { terser } from 'rollup-plugin-terser'
export default {
input: 'dist/sw.js',
output: {
file: 'dist/sw.js',
format: 'iife'
},
plugins: [ /* Следующий слайд */ ]
}
plugins: [
resolve(),
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
terser()
]
"build-pwa":
"npm run build-app &&
node build-sw.js &&
npx rollup -c"
import { Workbox, messageSW } from 'workbox-window';
if ('serviceWorker' in navigator) {
const wb = new Workbox('/sw.js');
wb.register();
// Интерактивный процесс обновления с messageSW
// См. пример кода на https://aka.ms/workbox6
}
Доступна новая версия приложения. Загрузить
Работает офлайн (оболочка приложения)
Управление версиями
Детализированная отладочная информация
import { registerRoute } from "workbox-routing";
import {
CacheFirst,
NetworkFirst,
StaleWhileRevalidate,
} from "workbox-strategies";
// Аватары можно брать всегда из кеша
registerRoute(
new RegExp("https://www.gravatar.com/avatar/.*"),
new CacheFirst()
);
// Список статей должен быть всегда свежим
registerRoute(
({url}) => url.pathname.startsWith('/api/articles/'),
new NetworkFirst()
);
// Статью берем из кеша и проверяем на обновление
import { BroadcastUpdatePlugin } from 'workbox-broadcast-update';
registerRoute(
({url}) => url.pathname.startsWith('/api/article/'),
new StaleWhileRevalidate({
plugins: [
new BroadcastUpdatePlugin()
],
})
);
import {
googleFontsCache,
imageCache
} from "workbox-recipes";
// Кешируем Google Fonts
googleFontsCache({ cachePrefix: "wb6-gfonts" });
// Кешируем изображения
imageCache({ maxEntries: 10 });
// Фолбэка для страниц и изображений
offlineFallback();
// Кеширования страниц
pageCache();
// Кеширования статических ресурсов
staticResourceCache();
// Разогрева кеша
warmStrategyCache(urls, strategy);
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
async _handle(request, handler /* Экз. StrategyHandler */) {
// Запросы, обработка, возврат результатов
}
}
_handle(request, handler) {
const fetchDone = handler.fetchAndCachePut(request);
const matchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchDone.then(resolve);
matchDone.then((response) => response && resolve(response));
Promise.allSettled([fetchDone, matchDone]).then(/* reject */)
});
}
Генерация сервис-воркера
через CLI
Собственные стратегии