Co to jest Service Worker w React js


93

Podczas tworzenia aplikacji React Service Worker jest domyślnie wywoływany. Dlaczego Service Worker jest używany? Jaki jest powód domyślnego wywołania?

Odpowiedzi:


105

Możesz nie potrzebować pracownika serwisu do swojej aplikacji. Jeśli tworzysz projekt za pomocą aplikacji create-react-app, jest ona wywoływana domyślnie

W tym artykule dobrze wyjaśniono pracowników usług . Podsumowując z tego

A service workerto skrypt uruchamiany w tle przez przeglądarkę, niezależnie od strony internetowej, otwierający drzwi do funkcji, które nie wymagają strony internetowej ani interakcji z użytkownikiem. Dziś zawierają już funkcje takie jak push notificationsi background synci mają ability to intercept and handle network requests, w tym programmatically managing a cache of responses.

W przyszłości pracownicy usług mogą wspierać inne rzeczy, takie jak periodic synclub geofencing.

Zgodnie z tym PR, aby stworzyć-reagować-app

Service workerssą wprowadzane za pomocą aplikacji create-react-za pośrednictwem SWPrecacheWebpackPlugin.

Korzystanie z serwera roboczego ze strategią polegającą na pierwszej kolejności pamięci podręcznej zapewnia korzyści w zakresie wydajności, ponieważ sieć nie jest już wąskim gardłem w realizacji żądań nawigacji. Oznacza to jednak, że programiści (i użytkownicy) zobaczą wdrożone aktualizacje tylko podczas wizyty „N + 1” na stronie, ponieważ wcześniej buforowane zasoby są aktualizowane w tle.

Wywołanie do register service workerjest domyślnie włączone w nowych aplikacjach, ale zawsze możesz je usunąć, a następnie powrócisz do normalnego zachowania.


2
jak na razie wygenerowana aplikacja actjs ma kod SW, ale komentarz stwierdza, że ​​funkcja rejestru nie jest wywoływana. Pytanie brzmi, gdzie mogę to nazwać?
Daneel Yaitskov

@ DaneelS.Yaitskov, możesz nazwać to w pliku index.js najwyższego poziomu lub podobnym.
Siddhartha

1
@Siddhartha, czy mógłbyś być na tyle uprzejmy, aby podać konkretny przykład i zaktualizować odpowiedź? Uważam, że jest to bardzo przydatne, ale brakuje mi tych ostatnich szczegółów. Dzięki.
Ted Stresen-Reuter

17

Mówiąc prosto, jest to skrypt, który przeglądarka działa w tle i nie ma żadnego związku ze stronami internetowymi ani DOM, a także udostępnia funkcje gotowe do użycia. Pomaga również w buforowaniu zasobów i innych plików, tak aby użytkownik był offline lub w wolnej sieci.

Niektóre z tych funkcji to proxy żądań sieciowych, powiadomienia push i synchronizacja w tle. Pracownicy serwisu zapewniają użytkownikowi bogate doświadczenie w trybie offline.

Można myśleć o mechanizmie Service Worker jako o kimś, kto siedzi między klientem a serwerem, a wszystkie żądania kierowane do serwera przechodzą przez niego. Zasadniczo średni mężczyzna. Ponieważ wszystkie żądania przechodzą przez pracownika usługowego, jest on w stanie przechwytywać te żądania w locie.

wprowadź opis obrazu tutaj


6

Chciałbym dodać 2 ważne uwagi dotyczące pracowników usług, które należy wziąć pod uwagę:

  1. Service Workers wymagają protokołu HTTPS. Jednak aby umożliwić testowanie lokalne, to ograniczenie nie ma zastosowania do localhost. Dzieje się tak ze względów bezpieczeństwa, ponieważ Service Worker zachowuje się jak człowiek pośrodku między aplikacją internetową a serwerem.

  2. Z Create React App Service Worker jest włączony tylko w środowisku produkcyjnym, na przykład podczas uruchamiania npm run build.

Service Worker jest tutaj, aby pomóc w opracowaniu progresywnej aplikacji internetowej . Dobre źródło informacji na ten temat w kontekście aplikacji Create React można znaleźć na ich stronie internetowej tutaj .

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.