Cara Membuat Blog Jekyll Bekerja Offline Menggunakan Service Worker

Diterbitkan: 2017-01-26

Bytes Singkat: Tahukah Anda bahwa dengan munculnya Service Worker, seseorang dapat mulai membuat situs web bekerja secara offline! Aplikasi web semacam itu disebut PWA (Progressive Web Apps). Dalam how-to ini, saya akan membantu Anda menggunakan service worker untuk membuat blog/website berbasis Jekyll bekerja offline dan beberapa hal keren yang menyertainya.

(CATATAN : Cuplikan kode dalam artikel diambil dari repositori kode blog saya. Dapat dirujuk jika diperlukan. Jika Anda baru mengenal Jekyll, Anda dapat membaca Artikel Seri 3 tentang Trik CSS.)

LATAR BELAKANG

Sebelumnya dulu ada App Cache berbasis file yuk YAML, yang sifatnya sangat keras dan tidak dapat digunakan untuk men-cache aset dan halaman web secara dinamis. Masuk, Pekerja Layanan. Javascript API sederhana berbasis peristiwa sederhana untuk melakukan caching pekerja layanan dinamis untuk menyimpan aset, sehingga aset tersebut dapat digunakan untuk melayani halaman web saat tidak ada jaringan.

Pekerja layanan mendarat di Chrome Canary pada tahun 2014, tetapi spesifikasinya masih direvisi/ditambah dan dirancang. Pada tahun 2015 dan 2016, tim Chrome Google menyebarkan berita tentang teknologi baru ini di browser. Hanya Apple yang tidak mendukung ini (bahkan pada saat menulis artikel ini) di perangkat mereka (untuk alasan yang tidak diketahui) [Mereka juga tidak berpartisipasi secara aktif dalam diskusi spesifikasi tentang pekerja layanan juga].

Apa itu pekerja layanan? Pada dasarnya, ini adalah pekerja web pada steroid. Salah satu karakteristik pekerja web adalah bahwa semua tugas pekerja web dijalankan secara terpisah (asinkron) dari utas eksekusi JavaScript utama (perulangan peristiwa). Fitur ini membantu menjalankan tugas intensif CPU atau memori, misalnya, perhitungan rumit tanpa mengorbankan kinerja Antarmuka Pengguna aplikasi web Anda.

Service Worker memungkinkan kita men-cache (menyimpan untuk waktu yang lama) aset, seperti JavaScript, CSS, HTML, gambar, file font di cache service worker di browser, jadi saat pengguna memuat halaman itu, itu dimuat hampir seketika . Dan juga karena dalam strategi caching ini, browser mencari ketersediaan aset terlebih dahulu dari cache service worker, halaman web disajikan bahkan ketika sedang offline! Jika aset apa pun tidak ada di cache, maka permintaan jaringan dikirim untuk mengambilnya.

Pekerja layanan juga mengaktifkan pemberitahuan push yang umum dilihat di banyak situs web akhir-akhir ini termasuk Facebook, Whatsapp di web, dan Twitter. Kami terutama akan berbicara tentang fitur offline. Petunjuk ini khusus untuk Jekyll, namun, sebagian besar kode pekerja layanan dapat diterapkan secara umum ke situs web mana pun.

Karena Jekyll menyajikan konten statis ( ini adalah generator situs statis, duh! ), kode pekerja layanan kami akan sangat mendasar dan mudah dipahami.

MARI BERLANGGANAN:

Pada semua halaman yang relevan, potongan skrip berikut akan dieksekusi. Ini melakukan hal-hal berikut:

  1. Memeriksa keberadaan API pekerja layanan di browser dan mendaftarkan pekerja layanan.
  2. Ketika pekerja layanan telah diaktifkan, berikan pesan singkat kepada pengguna bahwa situs web siap digunakan secara offline sekarang.
 fungsi showOfflineToast() {
  biarkan offlineToast = document.querySelector('.offline-ready');
  offlineToast.classList.add('aktif');
  setTimeout(fungsi(){ 
    offlineToast.className = offlineToast.className.replace("active", "").trim();
  }, 5500);
}

// (1)
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js').lalu(fungsi(reg) {
      if (!reg.installing) kembali;
      console.log("[*] ServiceWorker sedang menginstal...");

      var pekerja = reg.installing;

      pekerja.addEventListener('perubahan status', fungsi() {
          if (worker.state == 'redundant') {
              console.log('[*] Pemasangan gagal');
          }
          if (pekerja.status == 'terpasang') {
              console.log('[*] Instal berhasil!');
          }
          // (2)
          if (worker.state == 'activated' && !navigator.serviceWorker.controller) {
            showOfflineToast();
          }
      });
  });
}

gdad-s-river.github.io-(iPhone 6)

Anda dapat menambahkan potongan kode ini dalam file katakanlah serviceWorker.html di dalam direktori include kode Jekyll Anda dan memasukkannya ke default.html menggunakan mesin templating cair Jekyll

 <!DOCTYPE html>
<html>

  {% termasuk head.html %}

  <tubuh>
    {% sertakan header.html %}

    <div class="page-content">
      <div class="wrapper">
        {{ isi }}
      </div>
    </div>

    {% include footer.html %}

    <!-- Berisi kode di atas dalam tag script-->
    {% include serviceWorker.html %} 

    <div class="offline-ready">Situs Siap Digunakan Offline</div>
  </tubuh>

</html>

Sekarang ke kode pekerja layanan aktual yang melakukan keajaiban. Kode ini berada di sw.js di Root Jekyll Code Anda.

 //sw.js
---
tata letak: null
---

const staticCacheName = "gdad-s-river-static-v61";

console.log("menginstal service worker");

const filesToCache = [
  "/",
  {% untuk halaman di site.html_pages %}
    '{{ Halaman URL }}',
  {% akhir untuk %}
  {% untuk posting di site.posts %}
    '{{ post.url }}',
  {% akhir untuk %}

  // dapat diotomatisasi daripada entri manual
  "/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",
  "/tentang/",
  "/index.html"
];

staticCacheName adalah versi cache yang akan diperbarui setiap kali saya membuat beberapa perubahan pada tanggapan yang di-cache (misalnya saya membuat perubahan pada file CSS atau posting blog). Dan, saya hanya mendefinisikan permintaan apa yang ingin saya cegat dan cache dalam array (digunakan dalam cuplikan berikutnya).

 //sw.js

self.addEventListener("install", function(e){
  self.skipMenunggu();
  e.menunggu Sampai(
    caches.open(staticCacheName).lalu(fungsi(cache){
      kembali cache.addAll(filesToCache);
    })
  )
});

self.skipWaiting , dengan kata lain, bahwa setiap kali file sw.js ini berubah, versi terbaru dari service worker tidak boleh diantrekan, tetapi langsung aktif (Seseorang dapat meminta prompt pengguna untuk me-refresh halaman memberikan pesan seperti Halaman web telah diperbarui/diubah, klik Segarkan untuk memuat posting baru atau apa pun. ), buang versi yang lebih lama.

java-dan-android-persegi-iklan-1

e.waitSampai mengutip dari situs web MDN:

“Metode ExtendableEvent.waitUntil() memperpanjang masa pakai acara. Di service worker, memperpanjang masa pakai event mencegah browser menghentikan service worker sebelum operasi asinkron dalam event selesai.”

Saya membuka cache bernama gdad-s-river-static-v61 , yang mengembalikan janji dengan nama cache saya, dan kemudian saya memanggil cache.addAll (yang menggunakan API fetch di latar belakang), yang mengambil semua permintaan di array yang disediakan dan menyimpannya dalam cache.

Ke cuplikan berikutnya!

 //sw.js

self.addEventListener("mengaktifkan", fungsi(e){
  e.menunggu Sampai(
    caches.keys().then(function(cacheNames){
      kembalikan Janji.semua(
        cacheNames.filter(fungsi(cacheName){
          kembali cacheName.startsWith("gdad-s-river-static-")
            && cacheName != staticCacheName;
        }).peta(fungsi(namacache){
          kembali cache.delete(cacheName);
        })
      )ß
    })
  )
});

Saat pekerja layanan diaktifkan, saya memastikan bahwa, pekerja layanan apa pun yang bukan versi terbaru akan dihapus. Misalnya, jika versi cache terbaru saya mengatakan gdad-s-river-static-v61 , dan seseorang masih menggunakan gdad-s-river-static-v58 , pada kunjungan berikutnya, saya ingin klien itu tidak peduli memompa satu versi pada satu waktu, tetapi langsung hapus versi itu untuk menginstal yang terbaru.

 //sw.js

self.addEventListener("mengambil", fungsi(e){
  e.responsDengan(
     caches.match(e.request).lalu(fungsi(respons) {
       balas tanggapan || ambil(e.permintaan);
     })
   )
});

Dalam acara pengambilan, saya hanya memberi tahu pekerja layanan, bagaimana menanggapi permintaan tertentu yang dibuat (karena kami membajak respons yang memberi kekuatan, pekerja layanan hanya bekerja di situs web asal alias https yang aman). Saya memberi tahunya untuk mencocokkan permintaan dengan yang di-cache di browser, dan jika tidak menemukan respons tertentu terhadap permintaan itu, ambil melalui jaringan, jika tidak sajikan dari cache.

Tada! Pekerja layanan membuat blog bertenaga Jekyll offline!

KEJUTAN! YANG KEREN:

Bummer: Ini tidak akan berfungsi pada perangkat iOS.

Jika Anda menambahkan file manifest.json aplikasi web di root proyek Anda seperti ini:

 {
  "nama": "gdad-s-river",
  "short_name": "gdad-s-river",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "tampilan": "mandiri",
  "Cakupan": "/",
  "start_url": "/",
  "ikon": [
    {
     "src": "assets/images/favicon_images/android-icon-36x36.png",
     "ukuran": "36x36",
     "ketik": "gambar\/png",
     "kepadatan": "0,75"
    },
    {
     "src": "assets/images/favicon_images/android-icon-48x48.png",
     "ukuran": "48x48",
     "ketik": "gambar\/png",
     "kepadatan": "1.0"
    },
    {
     "src": "assets/images/favicon_images/android-icon-72x72.png",
     "ukuran": "72x72",
     "ketik": "gambar\/png",
     "kepadatan": "1.5"
    },
    {
     "src": "assets/images/favicon_images/android-icon-96x96.png",
     "ukuran": "96x96",
     "ketik": "gambar\/png",
     "kepadatan": "2.0"
    },
    {
     "src": "assets/images/favicon_images/android-icon-144x144.png",
     "ukuran": "144x144",
     "ketik": "gambar\/png",
     "kepadatan": "3.0"
    },
    {
     "src": "assets/images/favicon_images/android-icon-192x192.png",
     "ukuran": "192x192",
     "ketik": "gambar\/png",
     "kepadatan": "4.0"
    }
  ]
}

dan tambahkan di file head.html di dalam tag head,

 <kepala>
 <!-- beberapa hal -->
	<link rel="manifest" href="/manifest.json">
 <!-- beberapa hal -->
</head>

Kemudian, pada kunjungan kedua situs web Anda (dalam 5 menit), pengguna akan diminta untuk menambahkan situs web Anda ke layar beranda (untuk berada dengan ikon, sama seperti aplikasi asli lainnya), yang akan Anda gunakan seperti sebuah aplikasi.

Tangkapan layar_20170123-232947

SUMBER DAYA

  • Detail fitur offline service worker dan strategi caching dapat ditemukan di buku masak offline Jake Archibald yang mengagumkan ini.
  • Kursus Udacity gratis yang sangat mendetail tentang semua hal yang perlu Anda ketahui tentang pekerja layanan dan IndexDB.

Apakah menurut Anda artikel di Jekyll Blog ini menarik dan bermanfaat? Jangan lupa untuk membagikan pandangan dan umpan balik Anda.

Baca Juga : Ecosia — Mesin Pencari Yang Menanam Pohon