Jak sprawić, by blog Jekyll działał w trybie offline za pomocą pracowników usług?

Opublikowany: 2017-01-26

Krótkie bajty: Czy wiesz, że wraz z pojawieniem się Service Workerów, można zacząć tworzyć strony internetowe w trybie offline! Takie aplikacje internetowe nazywane są PWA (Progressive Web Apps). W tym poradniku pomogę ci wykorzystać pracownika serwisu, aby blog/strona internetowa oparta na Jekyll działała w trybie offline i kilka fajnych rzeczy, które się z tym wiążą.

(UWAGA : Fragmenty kodu w artykule pochodzą z repozytorium kodu mojego bloga. W razie potrzeby można się do niego odnieść. Jeśli jesteś nowy w Jekyll, możesz przeczytać artykuł z serii 3 na temat sztuczek CSS.)

TŁO

Wcześniej istniała pamięć podręczna aplikacji oparta na plikach YAML, która była bardzo mocno zakodowana i nie mogła być używana do dynamicznego buforowania zasobów i stron internetowych. Wejdź, pracownicy serwisu. Prosty interfejs API JavaScript oparty na zwykłym zdarzeniu do dynamicznego buforowania procesów roboczych w celu przechowywania zasobów, aby można było ich używać do obsługi stron internetowych, gdy nie ma sieci.

Pracownicy serwisu wylądowali w Chrome Canary w 2014 roku, ale jego specyfikacja jest wciąż poprawiana/dodawana i projektowana. W 2015 i 2016 roku zespół Google Chrome szeroko rozpowszechnił tę nową technologię w przeglądarkach. Tylko Apple nie wspierało tego (nawet w momencie pisania tego artykułu) na swoich urządzeniach (z nieznanych powodów) [Nie biorą też aktywnego udziału w żadnych dyskusjach dotyczących specyfikacji dotyczących pracowników serwisu].

Kim jest pracownik serwisu? Zasadniczo jest to pracownik sieciowy na sterydach. Jedną z cech pracownika WWW jest to, że wszystkie zadania pracownika WWW działają oddzielnie (asynchronicznie) od głównego wątku wykonania JavaScript (pętli zdarzeń). Ta funkcja ułatwia wykonywanie zadań intensywnie korzystających z procesora lub pamięci, na przykład skomplikowanych obliczeń, bez obniżania wydajności interfejsu użytkownika aplikacji sieci Web.

Service Worker pozwala nam cache'ować (przechowywać przez długi czas) zasoby, takie jak JavaScript, CSS, HTML, pliki graficzne, pliki czcionek w pamięci podręcznej Service Worker przeglądarki, dzięki czemu przy kolejnym wczytaniu strony przez użytkownika jest ona ładowana niemal natychmiast . A ponieważ w tej strategii buforowania przeglądarka najpierw szuka dostępności zasobów z pamięci podręcznej Service Worker, strona internetowa jest obsługiwana nawet wtedy, gdy jest się offline! Jeśli jakiegoś zasobu nie ma w pamięci podręcznej, wysyłane jest żądanie sieciowe w celu jego pobrania.

Service Worker umożliwia również powiadomienia push, które są obecnie powszechne w wielu witrynach internetowych, w tym na Facebooku, Whatsapp w sieci i Twitterze. Będziemy rozmawiać przede wszystkim o funkcji offline. Ten poradnik jest specyficzny dla Jekyll, jednak większość kodu Service Worker można ogólnie zastosować do dowolnej strony internetowej.

Ponieważ Jekyll obsługuje treści statyczne ( jest to generator stron statycznych, prawda! ), nasz kod Service Worker byłby bardzo prosty i łatwy do zrozumienia.

ZACZYNAJMY:

Na wszystkich odpowiednich stronach wykonywany jest następujący fragment skryptu. Robi następujące rzeczy:

Sprawdzenie istnienia Service Worker API w przeglądarce i rejestracja Service Worker.
Kiedy pracownik serwisu zostanie aktywowany, wyślij użytkownikowi miły toast/chip, że strona jest gotowa do użycia w trybie offline.

 funkcja pokażOfflineToast() {
  let offlineToast = document.querySelector('.offline-ready');
  offlineToast.classList.add('aktywny');
  setTimeout(funkcja(){ 
    offlineToast.className = offlineToast.className.replace("aktywny", "").trim();
  }, 5500);
}

// (1)
if (nawigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js').then(function(reg) {
      if (!reg.installing) powrót;
      console.log("[*] ServiceWorker instaluje...");

      var pracownik = reg.installing;

      worker.addEventListener('statechange', function() {
          if (pracownik.stan == 'zbędny') {
              console.log('[*] Instalacja nie powiodła się');
          }
          if (worker.state == 'zainstalowano') {
              console.log('[*] Instalacja powiodła się!');
          }
          // (2)
          if (worker.state == 'aktywowany' && !navigator.serviceWorker.controller) {
            pokażOfflineToast();
          }
      });
  });
}

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

Możesz dodać ten fragment kodu do pliku powiedz serviceWorker.html w katalogu include twojego kodu Jekyll i dołączyć go do default.html za pomocą silnika szablonów płynnych Jekyll

 <!DOCTYPE html>
<html>

  {% to head.html %}

  <ciało>
    {% zawiera header.html %}

    <div class="page-content">
      <div class="wrapper">
        {{ zawartość }}
      </div>
    </div>

    {% include footer.html %}

    <!-- Zawiera powyższy kod w tagu skryptu-->
    {% zawiera serviceWorker.html %} 

    <div class="offline-ready">Witryna jest gotowa do użytku offline</div>
  </body>

</html>

Teraz przejdźmy do kodu pracownika serwisu, który robi magię. Ten kod znajduje się w sw.js w katalogu głównym kodu Jekyll.

 //sw.js
---
układ: null
---

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

console.log("instalacja pracownika usługi");

const filesToCache = [
  "/",
  {% dla strony w site.html_pages %}
    '{{ Strona URL }}',
  {% endfor %}
  {% za post w witrynie site.posts %}
    '{{ post.url }}',
  {% endfor %}

  // może być zautomatyzowany, a nie manualny
  "/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",
  "/o/",
  "/indeks.html"
];

staticCacheName to wersja pamięci podręcznej, która ma być aktualizowana za każdym razem, gdy wprowadzam jakieś zmiany w buforowanych odpowiedziach (na przykład wprowadzam zmianę w pliku CSS lub wpisie na blogu). I po prostu definiuję, jakie żądania chcę przechwycić i buforować w tablicy (używane w następnym fragmencie).

 //sw.js

self.addEventListener("zainstaluj", function(e){
  self.skipOczekiwanie();
  e.czekaj do (
    caches.open(staticCacheName).then(function(cache){
      return cache.addAll(filesToCache);
    })
  )
});

self.skipWaiting oznacza, że za każdym razem, gdy ten plik sw.js ulegnie zmianie, nowsza wersja service workera nie powinna stać w kolejce, ale powinna być natychmiast aktywowana (można poprosić użytkownika o odświeżenie strony z komunikatem typu Strona została zaktualizowana/zmieniona, kliknij Odśwież, aby załadować nowe posty lub cokolwiek. ), wyrzucając starszą wersję.

java-i-android-square-ad-1

e.waitUntil cytując ze strony MDN:

„Metoda ExtendableEvent.waitUntil() wydłuża czas życia zdarzenia. W przypadku Service Workerów wydłużenie czasu życia zdarzenia uniemożliwia przeglądarce zakończenie procesu Service Worker przed zakończeniem operacji asynchronicznych w ramach zdarzenia.”

Otwieram pamięć podręczną o nazwie gdad-s-river-static-v61 , która zwraca obietnicę z moją nazwą pamięci podręcznej, a następnie wywołuję cache.addAll (który używa w tle API pobierania), który pobiera wszystkie żądania w podana tablica i buforuje je.

Do następnego fragmentu!

 //sw.js

self.addEventListener("aktywuj", function(e){
  e.czekaj do (
    caches.keys().then(function(cacheNames){
      powrót Promise.all(
        cacheNames.filter(function(cacheName){
          return cacheName.startsWith("gdad-s-river-static-")
            && cacheName != staticCacheName;
        }).map(function(cacheName){
          return cache.delete(cacheName);
        })
      )SS
    })
  )
});

Zapewniam, że gdy service worker aktywuje się, każdy service worker, który nie jest najnowszą wersją, zostanie usunięty. Na przykład, jeśli moja najnowsza wersja pamięci podręcznej to powiedzmy gdad-s-river-static-v61 , a ktoś nadal korzysta z gdad-s-river-static-v58 , podczas następnej wizyty chcę, aby ten klient nie przejmował się pompowanie jednej wersji na raz, ale bezpośrednio usuń tę wersję, aby zainstalować najnowszą.

 //sw.js

self.addEventListener("pobierz", function(e){
  e.odpowiedzZ(
     caches.match(e.request).then(function(odpowiedź) {
       odpowiedź zwrotna || pobierz(e.żądanie);
     })
   )
});

W zdarzeniu pobierania po prostu mówię pracownikowi serwisu, jak odpowiedzieć na konkretną prośbę (ponieważ przechwytujemy odpowiedź dającą moc, pracownicy serwisu pracują tylko na bezpiecznych stronach pochodzenia https). Mówię mu, aby dopasował żądanie do tych zapisanych w pamięci podręcznej przeglądarki, a jeśli nie znajdzie tej konkretnej odpowiedzi na żądanie, pobierze ją przez sieć, w przeciwnym razie poda ją z pamięci podręcznej.

Tada! Pracownik serwisu przełączył bloga Jekyll w tryb offline!

NIESPODZIANKA! FAJNA RZECZ:

Bummer: To nie działałoby na urządzeniach z iOS.

Jeśli dodasz plik manifest.json aplikacji internetowej w katalogu głównym projektu w następujący sposób:

 {
  "name": "gdad-s-river",
  "short_name": "gdad-s-river",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "wyświetlacz": "samodzielny",
  "Zakres": "/",
  "start_url": "/",
  "ikony": [
    {
     "src": "assets/images/favicon_images/android-icon-36x36.png",
     "rozmiary": "36x36",
     "typ": "obraz\/png",
     „gęstość”: „0,75”
    },
    {
     "src": "assets/images/favicon_images/android-icon-48x48.png",
     "rozmiary": "48x48",
     "typ": "obraz\/png",
     "gęstość": "1.0"
    },
    {
     "src": "assets/images/favicon_images/android-icon-72x72.png",
     "rozmiary": "72x72",
     "typ": "obraz\/png",
     "gęstość": "1,5"
    },
    {
     "src": "assets/images/favicon_images/android-icon-96x96.png",
     "rozmiary": "96x96",
     "typ": "obraz\/png",
     „gęstość”: „2.0”
    },
    {
     "src": "assets/images/favicon_images/android-icon-144x144.png",
     "rozmiary": "144x144",
     "typ": "obraz\/png",
     "gęstość": "3.0"
    },
    {
     "src": "assets/images/favicon_images/android-icon-192x192.png",
     "rozmiary": "192x192",
     "typ": "obraz\/png",
     "gęstość": "4.0"
    }
  ]
}

i dodaj go w pliku head.html wewnątrz tagu head,

 <głowa>
 <!-- trochę rzeczy -->
	<link rel="manifest" href="/manifest.json">
 <!-- trochę rzeczy -->
</head>

Następnie, przy drugiej wizycie w Twojej witrynie (w ciągu 5 minut), poprosi użytkownika o dodanie Twojej witryny do ekranu głównego (aby znajdowała się z ikoną, tak jak inne natywne aplikacje), z którą będziesz się angażować tak samo Aplikacja.

Zrzut ekranu_20170123-232947

SUROWCE

Szczegółowe informacje na temat funkcji offline pracownika serwisu i strategii buforowania można znaleźć w książce kucharskiej tego niesamowitego Jake'a Archibalda.
Bardzo szczegółowy bezpłatny kurs Udacity o wszystkim, co trzeba wiedzieć o pracownikach usług i IndexDB.

Czy uważasz, że ten artykuł na blogu Jekylla jest interesujący i pomocny? Nie zapomnij podzielić się swoimi opiniami i opiniami.

Przeczytaj także : Ecosia — wyszukiwarka, która sadzi drzewa