Hizmet Çalışanlarını Kullanarak Çevrimdışı Bir Jekyll Blog Çalışması Nasıl Elde Edilir
Yayınlanan: 2017-01-26Kısa Bayt: Service Workers'ın ortaya çıkmasıyla birlikte web sitelerinin çevrimdışı çalışmasının sağlanabileceğini biliyor muydunuz ? Bu tür web uygulamalarına PWA'lar (Aşamalı Web Uygulamaları) denir. Bu nasıl yapılır'da, Jekyll tabanlı bir blog/web sitesinin çevrimdışı çalışması ve bununla birlikte gelen bazı harika şeyler yapmak için bir hizmet çalışanı kullanmanıza yardımcı olacağım.
(NOT : Makaledeki kod parçacıkları blogumun kod deposundan alınmıştır. Gerektiğinde başvurulabilir. Jekyll'de yeniyseniz CSS Hileleri ile ilgili 3 Serisi Makaleyi okuyabilirsiniz.)
ARKA FON
Daha önce, doğası gereği çok zor kodlanmış ve varlıkları ve web sayfalarını dinamik olarak önbelleğe almak için kullanılamayan, yuk YAML dosyası tabanlı bir Uygulama Önbelleği vardı. Girin, Servis Çalışanları. Varlıkları depolamak için dinamik hizmet çalışanı önbelleğe alma yapmak için basit, düz olay tabanlı Javascript API'si, böylece ağ olmadığında web sayfalarına hizmet vermek için kullanılabilirler.
Servis çalışanları 2014'te Chrome Canary'ye geldi, ancak özellikleri hala revize ediliyor/ekleniyor ve tasarlanıyor. 2015 ve 2016'da, Google'ın Chrome ekibi, tarayıcılarda bu yeni teknolojiyi büyük ölçüde yaydı. Yalnızca Apple (bu makaleyi yazarken bile) cihazlarında (bilinmeyen nedenlerle) bunu desteklemedi [Ayrıca servis çalışanları hakkında herhangi bir spesifik tartışmaya da aktif olarak katılmıyorlar].
Hizmet çalışanı nedir? Temel olarak, steroidler üzerinde bir web çalışanıdır. Bir web çalışanının bir özelliği, bir web çalışanının tüm görevlerinin ana JavaScript yürütme iş parçacığından (olay döngüsü) ayrı (eşzamansız olarak) çalışmasıdır. Bu özellik, web uygulamasının Kullanıcı Arayüzünüzün performansından ödün vermeden karmaşık hesaplamalar gibi CPU veya bellek açısından yoğun görevlerin çalıştırılmasına yardımcı olur.
Service Worker, JavaScript, CSS, HTML, resim, yazı tipi dosyaları gibi varlıkları tarayıcının servis çalışanı önbelleğinde önbelleğe almamıza (uzun süre saklamamıza) izin verir, böylece kullanıcı o sayfayı bir sonraki yüklediğinde, neredeyse anında yüklenir . Ayrıca bu önbelleğe alma stratejisinde, tarayıcı önce hizmet çalışanı önbelleğinden varlıkların kullanılabilirliğini aradığından, web sayfası çevrimdışı olduğunda bile sunulur! Önbellekte herhangi bir varlık yoksa, onu almak için bir ağ isteği gönderilir.
Servis çalışanı ayrıca Facebook, web'de Whatsapp ve Twitter da dahil olmak üzere bugünlerde birçok web sitesinde yaygın olarak görülen anında iletme bildirimlerini de etkinleştirir. Öncelikle çevrimdışı özellik hakkında konuşacağız. Bu nasıl yapılır, Jekyll'e özeldir, ancak hizmet çalışanı kodunun çoğu genellikle herhangi bir web sitesine uygulanabilir.
Jekyll statik içerikler sunduğundan ( statik bir site oluşturucudur, ha! ), hizmet çalışanı kodumuz çok basit ve anlaşılması kolay olacaktır.
BAŞLAYALIM:
İlgili tüm sayfalarda, aşağıdaki komut dosyası yürütülür. Aşağıdakileri yapıyor:
- Tarayıcıda servis çalışanı API'sinin varlığının kontrol edilmesi ve servis çalışanının kaydedilmesi.
- Servis çalışanı etkinleştirildiğinde, kullanıcıya web sitesinin şimdi çevrimdışı olarak kullanılmaya hazır olduğuna dair güzel bir küçük tost/çip mesajı koyun.
fonksiyon showOfflineToast() {
let offlineToast = document.querySelector('.offline-ready');
offlineToast.classList.add('aktif');
setTimeout(işlev(){
offlineToast.className = offlineToast.className.replace("active", "").trim();
}, 5500);
}
// (1)
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/sw.js').then(function(reg) {
(!reg.installing) dönerse;
konsol.log("[*] ServiceWorker kuruluyor...");
var işçi = reg.installing;
işçi.addEventListener('statechange', function() {
if (worker.state == 'gereksiz') {
konsol.log('[*] Yükleme başarısız');
}
if (worker.state == 'kurulu') {
konsol.log('[*] Kurulum başarılı!');
}
// (2)
if (worker.state == 'etkinleştirildi' && !navigator.serviceWorker.controller) {
showOfflineToast();
}
});
});
} 
Bu kod parçasını, Jekyll kodunuzun içerme dizini içindeki serviceWorker.html adlı bir dosyaya ekleyebilir ve Jekyll'in sıvı şablonlama motorunu kullanarak default.html'ye ekleyebilirsiniz.
<!DOCTYPE html>
<html>
{% head.html içerir %}
<body>
{% header.html içerir %}
<div class="sayfa içeriği">
<div class="sarmalayıcı">
{{ içerik }}
</div>
</div>
{% footer.html içerir %}
<!-- Bir komut dosyası etiketinde yukarıdaki kodu içerir-->
{% serviceWorker.html içerir %}
<div class="offline-ready">Site Çevrimdışı Kullanıma Hazır</div>
</body>
</html>
Şimdi sihri yapan gerçek hizmet çalışanı koduna. Bu kod, Jekyll Kodunuzun Kökünde sw.js'de bulunur.
//sw.js
---
düzen: boş
---
const staticCacheName = "gdad-s-river-static-v61";
konsol.log("servis çalışanı yükleme");
const filesToCache = [
"/",
{ site.html_pages içindeki sayfa için % %}
'{{ sayfa.url }}',
{% endfor %}
{% site.posts'taki gönderi için %}
'{{ post.url }}',
{% endfor %}
// manuel girişler yerine otomatikleştirilebilir
"/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",
"/hakkında/",
"/index.html"
];
staticCacheName , önbelleğe alınan yanıtlarda her değişiklik yaptığımda güncellenecek olan önbellek sürümüdür (örneğin, örneğin bir CSS dosyasında veya bir blog gönderisinde değişiklik yapıyorum). Ve bir dizide hangi istekleri engellemek ve önbelleğe almak istediğimi tanımlıyorum (sonraki kod parçasında kullanılır).
//sw.js
self.addEventListener("kurulum", function(e){
self.skipBekliyor();
e.waitUntil(
caches.open(staticCacheName).then(function(önbellek){
geri dön cache.addAll(filesToCache);
})
)
});self.skipWaiting , bu sw.js dosyası her değiştiğinde, hizmet çalışanının daha yeni sürümünün kuyruğa alınmaması, ancak hemen etkin hale getirilmesi gerektiği anlamına gelir (Kullanıcıdan aşağıdaki gibi bir mesaj vererek sayfayı yenilemesi istenebilir: Web sayfası güncellendi/değiştirildi, yeni gönderiler veya her neyse yüklemek için Yenile'ye tıklayın. ), eski sürümü çöpe atın.
e.waitMDN web sitesinden alıntı yapana kadar:
ExtendableEvent.waitUntil() yöntemi, olayın ömrünü uzatır. Hizmet çalışanlarında, bir olayın ömrünün uzatılması, tarayıcının olay içindeki eşzamansız işlemler tamamlanmadan hizmet çalışanını sonlandırmasını engeller."
Önbellek adımla bir söz veren gdad-s-river-static-v61 adlı bir önbellek açıyorum ve ardından tüm istekleri alan cache.addAll'ı (arka planda getirme API'sini kullanan) çağırıyorum. dizi sağlanır ve bunları önbelleğe alır.
Bir sonraki parçaya geç!
//sw.js
self.addEventListener("etkinleştir", function(e){
e.waitUntil(
caches.keys().then(function(cacheNames){
geri Promise.all(
cacheNames.filter(işlev(önbellekAdı){
geri dön cacheName.startsWith("gdad-s-river-static-")
&& cacheName != staticCacheName;
}).map(işlev(önbellekAdı){
geri dön cache.delete(cacheName);
})
)ß
})
)
});Servis çalışanı etkinleştirildiğinde, en son sürüm olmayan tüm servis çalışanlarının silinmesini sağlıyorum. Örneğin, en son önbellek sürümüm gdad-s-river-static-v61 diyorsa ve birisi bir sonraki ziyaretinde hala gdad-s-river-static-v58 üzerindeyse, o müşterinin bunu umursamamasını istiyorum bir seferde bir sürüm pompalamak, ancak en son sürümü yüklemek için bu sürümü doğrudan silmek.
//sw.js
self.addEventListener("getir", function(e){
e.respondWith(
caches.match(e.request).then(function(yanıt) {
dönüş yanıtı || getir(e.request);
})
)
});Getirme olayında, hizmet çalışanına yapılan belirli bir isteğe nasıl yanıt verileceğini söylüyorum (cevap verme gücünü kaçırdığımız için, hizmet çalışanları yalnızca güvenli, yani https kökenli web sitelerinde çalışır). İsteği tarayıcıda önbelleğe alınanlarla eşleştirmesini söylüyorum ve talebe o belirli yanıtı bulamazsa, ağ üzerinden getir, yoksa önbellekten sun.
Tada! Servis çalışanı Jekyll destekli blogu çevrimdışı yaptı!
SÜRPRİZ! SOĞUK ŞEY:
Bummer: Bu, iOS cihazlarda çalışmaz.
Projenin kök dizinine şöyle bir web uygulaması manifest.json dosyası eklerseniz:
{
"isim": "gdad-s-nehri",
"short_name": "gdad-s-nehri",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"ekran": "bağımsız",
"Kapsam": "/",
"start_url": "/",
"simgeler": [
{
"src": "varlıklar/görüntüler/favicon_images/android-icon-36x36.png",
"boyutlar": "36x36",
"type": "image\/png",
"yoğunluk": "0.75"
},
{
"src": "varlıklar/görüntüler/favicon_images/android-icon-48x48.png",
"boyutlar": "48x48",
"type": "image\/png",
"yoğunluk": "1.0"
},
{
"src": "varlıklar/görüntüler/favicon_images/android-icon-72x72.png",
"boyutlar": "72x72",
"type": "image\/png",
"yoğunluk": "1.5"
},
{
"src": "varlıklar/görüntüler/favicon_images/android-icon-96x96.png",
"boyutlar": "96x96",
"type": "image\/png",
"yoğunluk": "2.0"
},
{
"src": "varlıklar/görüntüler/favicon_images/android-icon-144x144.png",
"boyutlar": "144x144",
"type": "image\/png",
"yoğunluk": "3.0"
},
{
"src": "varlıklar/görüntüler/favicon_images/android-icon-192x192.png",
"boyutlar": "192x192",
"type": "image\/png",
"yoğunluk": "4.0"
}
]
}ve onu head etiketinin içindeki head.html dosyasına ekleyin,
<kafa> <!-- bazı şeyler --> <link rel="manifest" href="/manifest.json"> <!-- bazı şeyler --> </head>
Ardından, web sitenizi ikinci ziyaretinizde (5 dakika içinde), kullanıcıdan web sitenizi ana ekranınıza eklemesini ister (tıpkı diğer yerel uygulamalarda olduğu gibi bir simgeyle yer almak için) bir uygulama.
KAYNAKLAR
- Servis çalışanının çevrimdışı özelliklerinin ve önbelleğe alma stratejilerinin ayrıntıları, bu harika Jake Archibald'ın çevrimdışı yemek kitabında bulunabilir.
- Hizmet çalışanları ve IndexDB hakkında bilmeniz gereken her şey hakkında çok ayrıntılı ücretsiz bir Udacity kursu.
Jekyll Blog'daki bu makaleyi ilginç ve faydalı buldunuz mu? Görüşlerinizi ve geri bildirimlerinizi paylaşmayı unutmayın.
Ayrıca Okuyun : Ecosia — Ağaç Diken Arama Motoru