Автоматизируем

сервис-воркер

с Workbox 6

Максим Сальников @webmaxru Автоматизируем сервис-воркер с Workbox 6

Автоматизируем сервис-воркер с Workbox 6

By Maxim Salnikov

Автоматизируем сервис-воркер с Workbox 6

«Задеплоил сервис-воркер — нужно покупать новый домен» — известная шутка о том, как сложно писать собственную логику кеширования. С приходом шестой версии библиотеки Workbox для прогрессивных веб-приложений (PWA) больше не нужен компромисс между гибкостью и удобством автоматизации сетевых задач. Я расскажу, как начать работу с Workbox 6, реализовать типовую функциональность для офлайнового веб-приложения и пойти дальше, добавив собственную логику кеширования.

4 years ago
3,337

	self.addEventListener('install', event => {
	// Помещаем ресурсы в Cache Storage
	})

	self.addEventListener('activate', event => {
	// Управляем версиями
	})

	self.addEventListener('fetch', event => {
	// Извлекаем из кеша и отдаем
	})

	self.addEventListener('install', event => {
	// Помещаем ресурсы в Cache Storage
	})

	self.addEventListener('activate', event => {
	// Управляем версиями
	})

	self.addEventListener('fetch', event => {
	// Извлекаем из кеша и отдаем
	})

	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;
	});
	});
	});
	})
	);
	}
	}
	});

	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";

	// Закешировать и выдавать ресурсы из массива __WB_MANIFEST
	precacheAndRoute(self.__WB_MANIFEST);

	import { precacheAndRoute } from "workbox-precaching";

	precacheAndRoute([
	{ revision: "866bcc582589b8920dbc", url: "index.html" },
	{ revision: "c2761edff7776e1e48a3", url: "styles.css" },
	{ revision: "3469613435532733abd9", url: "main.js" }
	]);

	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: [ /* Следующий слайд */ ]
	}

	"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
	}

	// Список статей должен быть всегда свежим
	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);