Перейти к содержимому


Фото
- - - - -

Service worker

service worker lighthouse insights

  • Чтобы отвечать, сперва войдите на форум
Нет ответов

#1 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 10.12.2018 - 07:47

Здравствуйте, коллеги!

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

Продолжаю вести неравный бой с оптимизацией сайта и требованиями обновленного Page Speed Insights. Многие из требований мне непонятны, ввиду того, что реализация их требует знаний кода, а я дизайнер-эникейщик. В частности, большой и интересный раздел, который называется Progressive Web App.

Сейчас оценка по данному разделу у меня 100, но смущают некоторые проблемы, с которыми я надеюсь разобраться с вашей помощью.

Итак, нагуглив в интернетах с десяток кусков кода, посвященных Service Worker'ам, я пробовал их один за другим, пока наконец, один из них не заработал (хоть и с оговорками).

Изменения в шаблоне:

{literal}
	<script async defer>
		if ('serviceWorker' in navigator) {
			window.addEventListener('load', () => {
				navigator.serviceWorker.register('./sw.js');
			});
		}
	</script>
{/literal}

Сам код sw.js:

const cacheName = 'siteCache';
const offlineUrl = '/404';

/**
 * The event listener for the service worker installation
 */
 self.addEventListener('install', event => {
 	event.waitUntil(
 		caches.open(cacheName)
 		.then(cache => cache.addAll([
 			offlineUrl
 			]))
 		);
 });

/**
 * Is the current request for an HTML page?
 * @param {Object} event 
 */
 function isHtmlPage(event) {
 	return event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html');
 }

/**
 * Fetch and cache any results as we receive them.
 */
 self.addEventListener('fetch', event => {

 	event.respondWith(
 		caches.match(event.request)
 		.then(response => {
                // Only return cache if it's not an HTML page
                if (response && !isHtmlPage(event)) {
                	return response;
                }

                return fetch(event.request).then(
                	function (response) {
                        // Dont cache if not a 200 response
                        if (!response || response.status !== 200) {
                        	return response;
                        }

                        let responseToCache = response.clone();
                        caches.open(cacheName)
                        .then(function (cache) {
                        	cache.put(event.request, responseToCache);
                        });

                        return response;
                      }
                      ).catch(error => {
                    // Check if the user is offline first and is trying to navigate to a web page
                    if (isHtmlPage(event)) {
                    	return caches.match(offlineUrl);
                    }
                  });
                    })
 		);
 });

Собственно, с точки зрения гугла и посетителей все хорошо:

Прикрепленный файл  lighthouse.PNG   23,83К   24 раз скачано

 

Однако, в консоли постоянно маячит ошибка:

Прикрепленный файл  error.PNG   4,28К   27 раз скачано

 

И в админку я теперь зайти не могу в том же сеансе. Админка перебрасывает меня на страницу восстановления пароля, а лайтхаус говорит, что несколько инстансов сайта обслуживается одним service worker'ом. Приходится открывать админку в отдельной странице в режиме инкогнито, тогда все ок. Собственно просьба моя заключается в помощи доведения кода до ума, чтобы админка открывалась в общем сеансе, и чтобы консоль не выводила ошибок.

Заранее признателен всем сочувствующим!


Изменено: evoname, 10.12.2018 - 07:49





0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых