15 декабря 2019 г.

Кэширование всегда оказывалось лучшим, когда речь шла о производительности. Браузер по умолчанию кэширует ресурсы на своей стороне, но для получения этих ресурсов ему все равно нужен интернет. Браузер может обслуживать ресурсы из своего кеша только при выполнении сетевого запроса

Сервисные работники предоставляют способ обойти сетевой запрос. Он находится между сетью и браузером и может решать, откуда обслуживать ресурсы.

Базовый жизненный цикл сервис-воркера выглядит следующим образом:

Настраивать

Регистрация сервис-воркера:
Нам нужно проверить, поддерживает ли браузер сервис-воркер, а затем зарегистрироваться, указав путь к файлу сервисворкера.

// In Page
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

Установить Service Worker:
Когда Service Worker установлен (инициирован скриптом с веб-сайта), нам нужно определить ресурсы, которые мы хотим кэшировать. Они кэшируются и связаны с определенным ключом Cache. .
В идеале мы не должны кэшировать какие-либо сторонние ресурсы, а только те, которые обслуживаются из того же домена.

// In Service worker
self.addEventListener('install', function (event) {
	event.waitUntil(
		caches.open('cache-key').then(function (cache) {
			return cache.addAll(
				[
					'/css/style.css',
					'/js/script.js',
					'/index.html'
				]
			);
		})
	);
});

Активировать Service worker:
На этом шаге мы можем удалить весь неиспользуемый кеш, а также изменить версию кеша (используя ключ кеша).

// In Service worker
self.addEventListener('activate', function (event) {
	event.waitUntil(
		caches.keys().then(function (cacheName) {
			return Promise.all(
				cacheName.filter(function (name) {
					return name !== 'cache-key';
				}).map(function (name) {
					return caches.delete(name);
				})
			)
		})
	)
});

Обработка сетевого запроса:
прослушивание события выборки и захват сетевого запроса в зависимости от обработчика стратегии кэширования и возврат ответа.

// In Service worker
self.addEventListener('fetch', function (event) {
	event.respondWith(
		caches.match(event.request).then(function (response) {
			if (!response) response = fetch(event.request);
			return response;
		})
	);
});

Методы кэширования

  • Только кеш — обслуживает только файлы и только из кеша, он никогда не будет делать сетевой запрос. Используйте это, если вы не хотите часто обновлять свой ресурс
// In Service worker
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request));
});
  • Кэш, резервная сеть — обслуживает файлы из кеша, если файл не загружается из кеша, он делает сетевой запрос.
// In Service worker
self.addEventListener('fetch', function (event) {
	event.respondWith(
		caches.match(event.request).then(function (response) {
			if (!response) response = fetch(event.request);
			return response;
		})
	);
});
  • Сетевой, резервный кэш. Сначала выполняется сетевой запрос, а если сетевой запрос завершается неудачно, то выполняется переход к кэшированию ответа. Обратите внимание, что кеш будет возвращен только тогда, когда сетевой запрос будет завершен и даст неудачный ответ.
// In Service worker
self.addEventListener('fetch', function (event) {
	event.respondWith(
		fetch(event.request).catch(function () {
			return caches.match(event.request);
		})
	);
});
  • Кэшировать, а затем по сети — ответ сначала отправляется из кэша на странице, а затем выполняется сетевой запрос. Когда ответ от сетевого запроса получен, ответ снова обслуживается, и страница обновляется (или любая другая логика, необходимая для выполнения).
// In Page
caches.match('/data.json')
	.then(response => {
		updatePage(response);
		fetch('/data.json').
			then(result => {
				updatePage(result);
			})
	})
	.catch(() => {
		fetch('/data.json').
			then(response => {
				updatePage(response);
			})
	});
// In Service worker
self.addEventListener('fetch', function (event) {
	event.respondWith(
		caches.open('cache-key').then(function (cache) {
			return fetch(event.request).then(function (response) {
				cache.put(event.request, response.clone());
				return response;
			});
		})
	);
});
  • Отправка пользовательского ответа. Это может быть лучший способ уведомить пользователя об автономном подключении или некоторых других настраиваемых страницах.
// In Service worker
self.addEventListener('fetch', function (event) {
	event.respondWith(
		// Try the cache
		caches.match(event.request).then(function (response) {
			if (response) {
				return response;
			}
			return fetch(event.request).then(function (response) {
				if (response.status === 404) {
					return caches.match('/404.html');
				}
				return response
			});
		}).catch(function () {
			return caches.match('/offline.html');
		})
	);
});

Хотя в большинстве случаев сервисворкеры ограничены прогрессивными веб-приложениями, они также используются для повышения производительности веб-сайтов и улучшения взаимодействия с пользователем.

Первоначально опубликовано на https://itsopensource.com.