Как заставить блог Jekyll работать в автономном режиме с помощью Service Workers

Короткие байты: Знаете ли вы, что wс появлением Работники сферы услугможно было бы начать делать так, чтобы веб-сайты работали офлайн! Такие веб-приложения называются PWA (Progressive Web Apps). В этом руководстве я собираюсь помочь вам использовать service worker для создания Джекилл– блог/сайт, работающий в автономном режиме, и некоторые интересные вещи, которые с этим связаны.

(ПРИМЕЧАНИЕ: Фрагменты кода в статье взяты из моего блога репозиторий кода. При необходимости его можно отнести к теме. Если вы новичок в Jekyll, вы можете прочитать 3 Серия статей о CSS-трюках.)

ФОН

Раньше был yuk YAML-файл на основе App Cache, который был очень жестко закодирован по своей природе и не мог использоваться для динамического кэширования ресурсов и веб-страниц. Встречайте Service Workers. Простой API Javascript на основе событий для динамического кэширования Service Worker для хранения ресурсов, чтобы их можно было использовать для обслуживания веб-страниц при отсутствии сети.

Сервисные работники появились в Chrome Canary в 2014 году, но его спецификации все еще пересматриваются/добавляются и разрабатываются. В 2015 и 2016 годах команда Chrome от Google активно распространяла информацию об этой новой технологии в браузерах. Только Apple не поддержал это (даже на момент написания этой статьи) на своих устройствах (по неизвестным причинам) [They also aren’t actively participating in any spec discussions about service workers too].

Что такое работник сферы услуг? По сути, это веб-работник на стероидах. Одной из характеристик веб-воркера является то, что все задачи веб-воркера выполняются отдельно (асинхронно) от основного потока выполнения JavaScript (цикл событий). Эта функция помогает выполнять задачи, интенсивно использующие ресурсы ЦП или памяти, например, сложные вычисления, не снижая производительности пользовательского интерфейса веб-приложения.

Service Worker позволяет нам кэшировать (хранить в течение длительного времени) активы, такие как JavaScript, CSS, HTML, изображения, файлы шрифтов в кэше Service Worker браузера, поэтому в следующий раз, когда пользователь загрузит эту страницу, она загрузится практически мгновенно. И также, поскольку в этой стратегии кэширования браузер сначала ищет доступность активов в кэше Service Worker, веб-страница обслуживается, даже если она находится в автономном режиме! Если какой-либо актив отсутствует в кэше, то отправляется сетевой запрос на его извлечение.

Service Worker также включает push-уведомления, которые в наши дни можно увидеть на многих веб-сайтах, включая Facebook, Whatsapp on web и Twitter. Мы в первую очередь поговорим об офлайн-функции. Это руководство относится только к Jekyll, однако большую часть кода service worker можно применить к любому веб-сайту.

Поскольку Jekyll обслуживает статическое содержимое (Это же генератор статических сайтов, да!), наш код сервисного работника будет очень простым и понятным.

ДАВАЙТЕ ПОКАТАЕМСЯ:

На всех соответствующих страницах выполняется следующий фрагмент скрипта. Он делает следующее:

1. Проверка наличия API сервис-воркера в браузере и регистрация сервис-воркера.
2. После активации Service Worker отправьте пользователю приятное маленькое сообщение/сообщение о том, что веб-сайт теперь готов к использованию в автономном режиме.

function showOfflineToast() { let offlineToast = document.querySelector('.offline-ready'); offlineToast.classList.add('active'); setTimeout(function(){ offlineToast.className = offlineToast.className.replace(“active”, “”).trim(); }, 5500); } // (1) if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js').then(function(reg) { if (!reg.installing) return; console.log(“[*] ServiceWorker устанавливает…”); var worker = reg.installing; worker.addEventListener('statechange', function() { if (worker.state == 'redundant') { console.log('[*] Установка не удалась'); } if (worker.state == 'installed') { console.log('[*] Установка прошла успешно!'); } // (2) if (worker.state == 'activated' && !navigator.serviceWorker.controller) { showOfflineToast(); } }); }); }

Вы можете добавить этот фрагмент кода в файл, скажем serviceWorker.html внутри включает каталог вашего кода Jekyll и включите его в по умолчанию.html использование шаблонизатора Jekyll's Liquid

{% include head.html %} {% include header.html %}

{% include footer.html %} {% include serviceWorker.html %}

Теперь к фактическому коду сервис-воркера, который творит магию. Этот код находится в sw.js в корне вашего кода Jekyll.

//sw.js — layout: null — const staticCacheName = “gdad-s-river-static-v61”; console.log(“установка service worker”); const filesToCache = [
“/”,
{% for page in site.html_pages %}
‘{{ page.url }}’,
{% endfor %}
{% for post in site.posts %}
‘{{ post.url }}’,
{% endfor %}

// can be automated rather than manual entries
“/assets/images/bhavri-github-callbacks.png”,
“/assets/images/bhavri-github-issues.png”,
“/assets/images/jakethecake-svg-line-anime.png”,
“/assets/images/svg-animated-mast-text-shapes-tweet.png”,
“css/main.css”,
“/about/”,
“/index.html”
];

staticCacheName это версия кэша, которая должна обновляться каждый раз, когда я вношу какие-либо изменения в кэшированные ответы (например, я вношу изменения, скажем, в файл CSS или запись в блоге). И я просто определяю, какие запросы я хочу перехватывать и кэшировать в массиве (используется в следующем фрагменте).

//sw.js self.addEventListener(“install”, function(e){ self.skipWaiting(); e.waitUntil( caches.open(staticCacheName).then(function(cache){ return cache.addAll(filesToCache); }) ) });

self.skipОжиданието есть, каждый раз, когда это sw.js изменения файлов, новая версия Service Worker не должна ставиться в очередь, а должна быть немедленно активирована (можно попросить пользователя обновить страницу, выдав сообщение типа Веб-страница была обновлена/изменена, нажмите «Обновить», чтобы загрузить новые сообщения или что-то еще.), выбросив старую версию.

e.waitUntil Цитата с сайта MDN:

«The РасширяемоеСобытие.waitUntil() метод продлевает срок жизни события. В service worker продление срока жизни события не позволяет браузеру завершить service worker до завершения асинхронных операций в рамках события.”

Я открываю тайник под названием gdad-s-river-static-v61который возвращает обещание с моим именем кэша, а затем я вызываю кэш.addAll (который использует API-интерфейс для получения в фоновом режиме), который извлекает все запросы из предоставленного массива и кэширует их.

Переходим к следующему фрагменту!

//sw.js self.addEventListener(“activate”, function(e){ e.waitUntil( caches.keys().then(function(cacheNames){ return Promise.all( cacheNames.filter(function(cacheName){ return cacheName.startsWith(“gdad-s-river-static-“) && cacheName != staticCacheName; }).map(function(cacheName){ return cache.delete(cacheName); }) )ß }) ) });

Когда service worker активируется, я гарантирую, что любой service worker, который не является последней версией, будет удален. Например, если моя последняя версия кэша, скажем, gdad-s-river-static-v61а кто-то все еще на gdad-s-river-static-v58при следующем посещении я хочу, чтобы клиент не беспокоился о скачивании одной версии за раз, а просто удалил эту версию, чтобы установить последнюю.

//sw.js self.addEventListener(“fetch”, function(e){ e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ) });

В событии fetch я просто говорю service worker, как реагировать на конкретный сделанный запрос (поскольку мы перехватываем ответ, предоставляя полномочия, service worker работают только на безопасных веб-сайтах, т. е. https origin). Я говорю ему сопоставить запрос с теми, которые кэшированы в браузере, и если он не находит этот конкретный ответ на запрос, извлечь его через сеть, в противном случае предоставить его из кэша.

Тада! Сервисный работник сделал блог на базе Jekyll офлайн!

СЮРПРИЗ! КЛАССНАЯ ВЕЩЬ:

Облом: Это не будет работать на устройствах iOS.

Если вы добавите веб-приложение манифест.json файл в корне проекта, например такой:

{ “name”: “gdad-s-river”, “short_name”: “gdad-s-river”, “theme_color”: “#2196f3”, “background_color”: “#2196f3”, “display”: “standalone”, “Scope”: “/”, “start_url”: “/”, “icons”: [
{
“src”: “assets/images/favicon_images/android-icon-36×36.png”,
“sizes”: “36×36”,
“type”: “image\/png”,
“density”: “0.75”
},
{
“src”: “assets/images/favicon_images/android-icon-48×48.png”,
“sizes”: “48×48”,
“type”: “image\/png”,
“density”: “1.0”
},
{
“src”: “assets/images/favicon_images/android-icon-72×72.png”,
“sizes”: “72×72”,
“type”: “image\/png”,
“density”: “1.5”
},
{
“src”: “assets/images/favicon_images/android-icon-96×96.png”,
“sizes”: “96×96”,
“type”: “image\/png”,
“density”: “2.0”
},
{
“src”: “assets/images/favicon_images/android-icon-144×144.png”,
“sizes”: “144×144”,
“type”: “image\/png”,
“density”: “3.0”
},
{
“src”: “assets/images/favicon_images/android-icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image\/png”,
“density”: “4.0”
}
]}

и добавьте его в голова.html файл внутри тега head,

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

РЕСУРСЫ

• Подробную информацию об офлайн-функциях Service Worker и стратегиях кэширования можно найти на сайте этого замечательного Джейка Арчибальда. офлайн кулинарная книга.
• Очень подробный бесплатный Курс Udacity обо всем, что вам когда-либо нужно было знать о Service Workers и IndexDB.

Считаете ли вы эту статью в блоге Jekyll интересной и полезной? Не забудьте поделиться своими мнениями и отзывами.

Читайте также: Ecosia — поисковая система, которая сажает деревья