Buduj aplikacje, które działają w trybie offline

Sep 13, 2025

Jak

Przez długi czas funkcjonalność offline, synchronizacja tła i powiadomienia push mają zróżnicowane aplikacje natywne z ich odpowiedników internetowych. The. API pracownika serwisowego. to zmiana gry technologia, która wyraża pole gry. W tym samouczku użyjemy go do zbudowania strony, która może podawać treści, nawet gdy nie ma połączenia z Internetem.

Pobierz kod z plików

01. Serwer HTTPS

Najprostszym sposobem pomyślenia o pracowników serwisowych jest jako element kodu, który jest zainstalowany przez witrynę na maszynie klienta, działa w tle, a następnie umożliwia wysłanie żądań wysłanych do tej witryny do przechwycenia i manipulowania. Ponieważ jest to tak potężna zdolność, do pracy z pracownikami usług w środowisku na żywo, musisz prowadzić przez HTTPS. Zapewnia to, że nie mogą być wykorzystywane, upewniając się, że pracownik serwisowy, którą odbiera przeglądarka z strony jest prawdziwa.

Jednak w celach rozwoju możemy uruchomić bez https http: // localhost / jest dozwolony jako wyjątek od tej reguły. Najprostszym sposobem na rozpoczęcie jest z NPM HTTP-Server. pakiet.

 NPM Zainstaluj HTTP-Server -G
HTTP-Server -P 8000 -C-1

02. Skonfiguruj podstawową stronę

Nie ma teraz nic na serwerze, więc wykonajmy podstawową stronę, aby podać. Utworzymy nowy plik index.html, a kiedy uruchomimy serwer, będzie teraz dostępny http: // localhost: 8000 .

Na tym etapie przekonasz się, że jeśli zakończysz serwer HTTP i odświeżysz stronę w przeglądarce, otrzymasz stronę błędu, ponieważ witryna nie może zostać osiągnięta. Jest to wyłącznie oczekiwane, ponieważ nie będziemy jeszcze chwalił żadnych treści offline.

! DocType HTML & GT;
& lt; html & gt;
  & lt; Head & GT;
  & LT; Meta CharSet = "UTF-8" / & GT;
  & lt; tytuł> Pracownik serwisowy

03. Zarejestruj pracownik serwisowy

Teraz dostaliśmy dość nieokreśloną stronę biegnące i nadszedł czas, aby zacząć myśleć o wdrożeniu pracownika usługowego. Zanim będziemy kodować, warto poświęcić chwilę, aby zrozumieć cykl życia pracowników służby.

Proces rozpoczyna się z "rejestracją" pracownika usługowego w JavaScript, co mówi przeglądarce, aby rozpocząć instalację pracownika - pierwszy krok jego cyklu życia. W całym swoim życiu pracownik służby będzie w jednym z następujących państw:

Instalacja: Po zarejestrowaniu pracownika serwisowego jego instalacja jest zazwyczaj używana do pobierania i pamięci statycznej
Zainstalowany: Pracownik jest teoretycznie gotowy do użycia, ale nie aktywuje się natychmiast
Aktywacja: Zainstalowany pracownik serwisowy aktywuje się, jeśli nie ma żadnego istniejącego pracownika usług, ani pewne warunki prowadzą istniejącego, który wygasa; Aktywacja jest zazwyczaj używana do usuwania starych plików z buforowanej treści offline
Aktywowany: Pracownik serwisowy ma teraz kontrolę nad dokumentem i może obsługiwać żądania
Zbędny: Jeśli pracownik serwisowy nie zainstalował lub aktywuje lub zostanie zastąpiony przez nowszego pracownika serwisowego

04. Sprawdź, czy jesteś zarejestrowany

Zarejestrujmy pracownik służby. To skutecznie wskazuje przeglądarkę do pliku JavaScript, który określa zachowanie pracownika serwisowego. Rejestracja odbywa się za pomocą obiektu serwisowego, który jest punktem wejścia do API. Sprawdzimy również API jest rzeczywiście obecny w przeglądarce przed próba tego.

The. zarejestrować() Funkcja może być bezpiecznie wywoływana za każdym razem, gdy obciążenia strony, a przeglądarka określi, czy pracownik serwisowy został już zarejestrowany.

 IF ('ServiceRewer' w Navigator) {
  window.addeventlistener ("obciążenie", funkcja () {
  nawigator
  console.log ("pracownik serwisowy zarejestrowany pomyślnie");
  }, Funkcja (błąd) {
  Console.log ("Błąd Pracownik serwisowy:" + Błąd);
  });
  });
}

05. Wdrożenie pracownika serwisowego

Następnie musimy wdrożyć sam pracownik serwisowy. Pracownicy usług mogą słuchać szeregu wydarzeń związanych z własnym cyklem życia i aktywności na stronie. Najważniejsze są instalowane, aktywują i pobierają.

Zacznijmy od tworzenia słuchacza dla zainstalować Wydarzenie, które wyzwala się po zakończeniu instalacji pracownika. Umożliwia nam to poinstruowanie pracownika usług, aby dodać niektórych treści offline w bieżącym folderze do pamięci podręcznej. Musimy również wymienić naszą pamięć podręczną - ponieważ stare bufory mogą trwać, aktualizowanie / wersjonowanie Nazwa pamięci podręcznej umożliwia podawanie nowszych wersji zawartości później.

 Var CurrentCache = "Demo-Cache";
self.addeventlistener ("instalacja", wydarzenie = & gt; {
  Event.waituntil (
  Caches.Open (CurrentCache) .then (funkcja (pamięć podręczna) {
  Console.log ("Dodawanie treści do pamięci podręcznej");
  Powrót cache.addall ([
  "./index_offline.html ',
  "./kintty_offline.jpg",
  './niestandardowe CSS'
  ]);
  })
  );
});

06. Fetch Event.

Nasza strona będzie teraz podręczna zawartość po załadowaniu, ale potrzebujemy pewnego mechanizmu do przechwycenia żądań i przekierować je do tej pamięci podręcznej. Aby to zrobić, musimy słuchać sprowadzać wydarzenia, które są wywołane, gdy żądanie, takie jak uzyskanie naszego index.html. Plik jest wykonany przez sieć. Następnie dopasowujemy prośbę o pamięć podręczną i podajemy buforowany zasób, jeśli zostanie znaleziony. W przeciwnym razie powrócimy do prośby o API pobierania do serwera.

W tym momencie warto zauważyć, że mamy ciężką zależność od obiecania JavaScript. Mogą to być trochę trudne, więc są warte zapoznania się, jeśli nie używasz ich wcześniej.

 Self.addeventlistener ("Fetch", Event = & GT; {
  Event.respondwith (
  Caches.match (Event.Request) .Then (odpowiedź = & gt; {{
  Odpowiedź powrotna || fetch (Event.request);
  })
   );
    });

07. Rozszerz zdarzenie pobierania

Jeśli testujesz to teraz (zakończyć serwer HTTP i odśwież stronę), powinieneś znaleźć, że strona działa zarówno online, jak i offline. Jest jednak prawdopodobne, że będziesz chciał więcej inteligentnych zachowań offline, z inną treścią lub funkcjonalnością dostępną, gdy serwer jest niedostępny.

Aby to osiągnąć, możemy przedłużyć naszą sprowadzać Odpowiedź zdarzeń w dalszym ciągu sprawdza specjalnie do żądań nawigacyjnych i reagować z inną stroną offline, gdy zostanie wykryty. To index_offline.html. Plik może być różnorodnością strony online lub czegoś zupełnie innego, i może również używać innych zasobów, które buforujesz, takich jak niestandardowe CSS .

 Self.addeventlistener ("Fetch", Event = & GT; {
  if (event.request.mode === 'nawigacja ") {
  Event.respondwith (
  Fetch (Event.request) .Catch (Error = & GT; {
  Console.log ("strona niedostępna. Powrót treści offline");
  Przywróć caches.match ("./ index_offline.html ');
  })
  );
  } else {
  Event.respondwith (
  Caches.match (Event.Request) .Then (odpowiedź = & gt; {{
  Odpowiedź powrotna || fetch (Event.request);
  })
  );
  }
});

08. Usuń pamięć podręczną

Jest jeszcze jedna rzecz, której potrzebujemy. Jeśli spróbujesz modyfikować treści offline, znajdziesz to, że nie aktualizujesz, gdy testujesz swoją stronę - Nadal masz starej wersji! Dzieje się tak, ponieważ starsze pliki są nadal buforowane.

Musisz wdrożyć coś, aby wyczyścić przestarzałe pliki z pamięci podręcznej, aby zapobiec ich podawaniu. Odbywa się to poprzez odpowiedź na Aktywuj zdarzenie i usuwanie wszystkich pamięci podręcznych, które nie pasują do nazwy określonej w CurrentCache. Następnie możesz dodać numer wersji do CurrentCache za każdym razem, gdy zmodyfikujesz treści offline, aby upewnić się, że zostanie odświeżony.

 Ten.Addeventlistener ("Aktywuj", wydarzenie = & gt; {
  var Activactaches = [CurrentCache];
  Console.log ("Aktywowany pracownik serwisowy. Sprawdzanie pamięci podręcznej jest aktualne.");
  Event.waituntil (
  Caches.keys (). Następnie (Keylist = & GT; {
  Zwrot obietnicę.All (keylist.map (key = & gt; {
  Jeśli (ACTIVECACHES.INDEXOF (klawisz) === -1) {
  konsola.log ("Usuwanie starej pamięci podręcznej" + klawisza);
  powrót caches.delete (klucz);
  }
  }));
  })
  );
});

Ten artykuł został opublikowany w Probecie Magazine Designer Web Designer # 268. Zapisz się teraz.

Czytaj więcej:

Przewodnik na Coder do API
Zacznij od Webgl przy użyciu trzech.js
12 Ogromne trendy projektowania stron internetowych na rok 2018

Buduj aplikacje, które działają w trybie offline

01. Serwer HTTPS

02. Skonfiguruj podstawową stronę

03. Zarejestruj pracownik serwisowy

04. Sprawdź, czy jesteś zarejestrowany

05. Wdrożenie pracownika serwisowego

06. Fetch Event.

07. Rozszerz zdarzenie pobierania

08. Usuń pamięć podręczną

Jak - Najpopularniejsze artykuły

Przechowywanie w chmurze do zdjęć i obrazów: Jak wybrać najlepszą chmurę do swojej pracy

Jak pobrać zdjęcia Instagram: wszystko, co musisz wiedzieć

Wszystko, co musisz wiedzieć o Kod JavaScript

Kontrola wersji głównej dla zdalnych zespołów

Stwórz realistyczny rycerz fantasy

Dodaj wibrację do obrazów olejnych z tymi górnymi wskazówkami

Utwórz oszałamiające tileable tekstury w blenderze

Jak zaprojektować promocję dla wyimaginowanej marki

Kategorie