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

Короткие байты: Знаете ли вы, что шс появлением Сервисные работники, можно было бы заставить сайты работать в автономном режиме! Такие веб-приложения называются PWA (прогрессивные веб-приложения). В этом практическом руководстве я собираюсь помочь вам использовать сервис-воркера для создания ДжекиллБлог/веб-сайт на основе работы в автономном режиме и некоторые интересные вещи, которые с этим связаны.

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

ФОН

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

Сервисные работники появились в Chrome Canary в 2014 году, но его спецификация все еще пересматривается/добавляется и разрабатывается. В 2015 и 2016 годах команда Google Chrome активно распространяла информацию об этой новой технологии в браузерах. Только 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 также позволяет отправлять push-уведомления, которые в наши дни часто можно увидеть на многих веб-сайтах, включая Facebook, Whatsapp в Интернете и Twitter. В первую очередь мы будем говорить об автономной функции. Это практическое руководство относится только к Jekyll, однако большая часть кода сервис-воркера может быть применена к любому веб-сайту.

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

ДАВАЙТЕ:

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

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

function showOfflineToast() { let offlineToast = document.querySelector(‘.offline-ready’); offlineToast.classList.add(‘активный’); 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 и включите его в default.html использование жидкостного шаблонизатора Jekyll

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

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

Теперь перейдем к реальному коду сервисного работника, который творит чудеса. Этот код находится в sw.js в корне вашего кода Джекилла.

//sw.js — макет: null — const staticCacheName = “gdad-s-river-static-v61”; console.log(“установка сервис-воркера”); константные файлыToCache = [
“/”,
{% 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 изменения файла, более новую версию сервис-воркера не следует ставить в очередь, а сразу же активировать (можно запросить у пользователя приглашение обновить страницу, выдав сообщение типа Веб-страница была обновлена/изменена. Нажмите «Обновить», чтобы загрузить новые сообщения или что-то еще.), выбросив старую версию.

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

« ExtendableEvent.waitUntil() метод продлевает время жизни события. В сервис-воркерах продление срока действия события не позволяет браузеру завершить работу сервис-воркера до завершения асинхронных операций внутри события».

Я открываю кэш с именем 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){ returncache.delete(cacheName); }) )ß }) ) });

Я гарантирую, что при активации сервисного работника любой сервисный работник, версия которого не является последней, будет удален. Например, если моя последняя версия кэша, скажем, 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); } ) ) });

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

Тада! Сервисный работник сделал блог на базе 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”
}
]}

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

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

РЕСУРСЫ

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

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

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