{"id":10145,"date":"2021-04-28T16:47:45","date_gmt":"2021-04-28T14:47:45","guid":{"rendered":"https:\/\/vived.io\/pozbylismy-sie-service-workera\/"},"modified":"2022-10-20T11:44:23","modified_gmt":"2022-10-20T09:44:23","slug":"pozbylismy-sie-service-workera","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/","title":{"rendered":"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera"},"content":{"rendered":"\n

W zesz\u0142ym miesi\u0105cu pozbyli\u015bmy si\u0119 Service Worker z naszej aplikacji. Nie by\u0142a to decyzja oczywista i dojrzewa\u0142a w naszym zespole przez prawie p\u00f3\u0142 roku. Dzi\u015b chc\u0119 si\u0119 podzieli\u0107 z Wami nasz\u0105 histori\u0105 i troch\u0119 przekona\u0107 Was, \u017ce nie wszyscy potrzebujemy Service Workera.<\/p>\n\n\n\n

Je\u015bli jeste\u015bcie kompletnymi nowicjuszami w zakresie PWA i pierwszy raz s\u0142yszycie o Service Workerze, to zanim przejdziecie dalej, zapoznajcie si\u0119 chocia\u017c z podstawow\u0105 dokumentacj\u0105 na temat Service Workera przygotowan\u0105 przez Google<\/a>. Bez tego dalsza lektura mo\u017ce si\u0119 dla Was okaza\u0107 ci\u0119\u017cka i pe\u0142na niedopowiedze\u0144.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

* Service Worker pozosta\u0142 w naszej aplikacji, ale teraz zajmuje si\u0119 tylko Push Notyfikacjami i jest obs\u0142ugiwany prawie ca\u0142kowicie przez bibliotek\u0119 dostarczona przez firebase.<\/p>\n\n\n\n

1. Nasza aplikacja nie wspiera prawdziwego Offline<\/h3>\n\n\n\n

Zdecydowanie nie jest to najwa\u017cniejszy pow\u00f3d, dla kt\u00f3rego usun\u0119li\u015bmy Service Workera, ale w mojej opinii mocno rzutuje na kontekst pozosta\u0142ych punkt\u00f3w. Na papierze Service Worker mo\u017ce by\u0107 wykorzystany tylko do cachowania plik\u00f3w, a wspomaganie trybu offline mo\u017cna uzna\u0107 jako poboczn\u0105 funkcjonalno\u015b\u0107. Z tak\u0105 narracj\u0105 spotka\u0142em si\u0119 w sieci i troch\u0119 w my\u015bl tej niej dzia\u0142a\u0142 nasz Service Worker. W Vived nigdy nie znale\u017ali\u015bmy odpowiedniej motywacji i bud\u017cetu potrzebnych do zaimplementowania w pe\u0142ni funkcjonalnej wersji offline. Ba, nawet nie by\u0142o jej wida\u0107 na horyzoncie naszej road mapy. Nasze wsparcie dla wersji offline, sprowadza\u0142o si\u0119 wi\u0119c do opakowania strony b\u0142\u0119du w nasz w\u0142asny UI. By\u0142o to rozwi\u0105zanie \u0142adne, ale czy warte swojej ceny?<\/p>\n\n\n\n

\"\"\/
Tryb offline w Vived<\/figcaption><\/figure>\n\n\n\n

Je\u015bli w Waszej aplikacji wymaganiem biznesowym jest tryb offline, to przykro mi, ale nie b\u0119dziecie w stanie pozby\u0107 si\u0119 ca\u0142kowicie Service Workera. Mo\u017cecie drastycznie go upro\u015bci\u0107 i przenie\u015b\u0107 w\u0142a\u015bciw\u0105 obs\u0142ug\u0119 offline do kodu aplikacji, ale zawsze zostaniecie, co najmniej z ma\u0142ym kawa\u0142kiem Service Workera, przechowuj\u0105cym index.html i niezb\u0119dne bundle JavaScriptowe.<\/p>\n\n\n\n

2. Service Worker jest zbyt elastyczny<\/h3>\n\n\n\n

Z pozoru ci\u0119\u017cko uzna\u0107 du\u017c\u0105 elastyczno\u015b\u0107 za wad\u0119 (w ko\u0144cu frontendowa spo\u0142eczno\u015b\u0107 uwielbia elastycznego reacta i stroni od mocno ustanardowanego Angulara). Trzeba jednak pami\u0119ta\u0107, \u017ce du\u017ca swoboda idzie w parze z mnogo\u015bci\u0105 mo\u017cliwych rozwi\u0105za\u0144 tego samego problemu. Cz\u0119sto pochodn\u0105 tej swobody jest bardziej skomplikowane API. Tak jest w\u0142a\u015bnie w przypadku Service Workera. W dokumentacji, tw\u00f3rcy otwarcie przyznaj\u0105, \u017ce jednym z g\u0142\u00f3wnych cel\u00f3w przy projektowaniu API, by\u0142 brak za\u0142o\u017ce\u0144 co do tego, w jak  b\u0119dzie ono u\u017cywane. Niestety da si\u0119 to odczu\u0107 na ka\u017cdym kroku. API jest pe\u0142ne event\u00f3w i ekstremalnie elastyczne, ale implementacja nawet najbardziej standardowych scenariuszy wymaga dog\u0142\u0119bnego zrozumienia, jak dzia\u0142a Service Worker i stworzenia kawa\u0142ka, zawi\u0142ego dla postronnych, kodu. Oznacza to, \u017ce ci\u0119\u017cko rozproszy\u0107 wiedz\u0119 o Service Workerach w zespole i niezwykle ci\u0119\u017cko unikn\u0105\u0107 bug\u00f3w, kt\u00f3re powstan\u0105, gdy kto\u015b zacznie refactorowa\u0107 nasz kod.<\/p>\n\n\n\n

\"\"\/
https:\/\/www.w3.org\/TR\/service-workers\/#motivations<\/a><\/figcaption><\/figure>\n\n\n\n

Prawdopodobnie u wielu z Was za\u015bwieci\u0142a si\u0119 teraz czerwona lampka – dlaczego nie skorzystali\u015bmy z frameworka wspomagaj\u0105cego tworzenie Service Worker\u00f3w? Na naszej drodze korzystali\u015bmy zar\u00f3wno z WorkBoxa<\/a> jak i Angular Service Worker<\/a>. Jak wspomnia\u0142em wcze\u015bniej, do Push Notyfikacji u\u017cywamy Service Workera dostarczonego przez Firebase. Te frameworki\/biblioteki rozwi\u0105zuj\u0105 spor\u0105 cz\u0119\u015b\u0107 opisanych powy\u017cej problem\u00f3w, ale wprowadzaj\u0105 swoj\u0105 warstw\u0119 konfiguracji. Poza tym nigdy nie uda\u0142o nam si\u0119 oprze\u0107 ca\u0142kowicie na zewn\u0119trznych bibliotekach i zawsze musieli\u015bmy odrobin\u0119 \u2018przylukrowa\u0107\u2019 nasz Service Worker. Ta odrobina lukru zazwyczaj wystarczy\u0142a, \u017ceby odpowiednio skomplikowa\u0107 ca\u0142o\u015b\u0107 i wprowadzi\u0107, co najmniej kilka bug\u00f3w.<\/p>\n\n\n\n

3. U\u017cytkownik nie da Ci drugiej szansy<\/h3>\n\n\n\n

Je\u015bli Service Workera u\u017cywacie, aby zasili\u0107 standardow\u0105 mobiln\u0105 aplikacj\u0119, to prawdopodobnie nie macie si\u0119, o co martwi\u0107. Stworzyli\u015bcie now\u0105 niesamowit\u0105 funkcjonalno\u015b\u0107 i u\u017cytkownik nie zauwa\u017cy\u0142 jej w dniu releasu? Nic nie szkodzi. U\u017cytkownik najprawdopodobniej wr\u00f3ci do aplikacja za kilka dni i wtedy b\u0119dzie mia\u0142 okazj\u0119 podziwia\u0107 nasz kunszt programistyczny. Sytuacja zmienia si\u0119 diametralnie, w sytuacji gdy opr\u00f3cz aplikacyjnej cz\u0119\u015bci chcemy wspiera\u0107 bardziej statyczne funkcjonalno\u015bci. Za przyk\u0142ad niech pos\u0142u\u017c\u0105 oferty, kt\u00f3re jeszcze niedawno obs\u0142ugiwali\u015bmy w Vived. By\u0142y one integraln\u0105 cz\u0119\u015bci\u0105 aplikacji, ale umo\u017cliwiali\u015bmy r\u00f3wnie\u017c dzielenie si\u0119 nimi z zarejestrowanymi u\u017cytkownikami i aktywnie promowali\u015bmy je w social mediach. W takim przypadku u\u017cytkownik nie by\u0142 zwi\u0105zany z aplikacj\u0105 i m\u00f3g\u0142 trafia\u0107 do nas w sporych odst\u0119pach czasu. Oznacza to, \u017ce nasza praca nie dociera\u0142a na czas do u\u017cytkownik\u00f3w i obserwowali oni przestarza\u0142\u0105 wersj\u0119 naszej strony. Intensywne iteracje nad coraz lepsz\u0105 prezentacj\u0105 ofert, nie trafia\u0142y do u\u017cytkownik\u00f3w ko\u0144cowych. Zdecydowanie nie jest to scenariusz, jaki chcecie przerabia\u0107 w pocz\u0105tkowej fazie pracy nad produktem, gdy posiadanie dobrej p\u0119tli zwrotnej jest kluczowe dla efektywnych iteracji nad funkcjonalno\u015bci\u0105.<\/p>\n\n\n\n

4. Mam ju\u017c do\u015b\u0107 t\u0142umaczeniu reszcie zespo\u0142u: zamknij wszystkie karty i od\u015bwie\u017c…<\/h3>\n\n\n\n

Z pozoru wydaje si\u0119 to \u015bmiesznym problemem, ale d\u0142ugofalowo powodowa\u0142o niesamowicie du\u017co frustracji. \u017beby bezpiecznie podmieni\u0107 Service Worker obs\u0142uguj\u0105cy aplikacj\u0119, nale\u017cy odczeka\u0107 a\u017c ten si\u0119 zainstaluje, nast\u0119pnie zamkn\u0105\u0107 wszystkie otwarte karty z aplikacj\u0105 i od\u015bwie\u017cy\u0107 jedyn\u0105 niezamkni\u0119t\u0105.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Nasz Product Owner ma 32GB ramu i prawie ca\u0142kowicie wype\u0142nia je Chrome. Nawet je\u015bli w trakcie spotkanie uda mu si\u0119 zlokalizowa\u0107 wszystkie karty z Vived, to nie b\u0119dzie w stanie ich zamkn\u0105\u0107. Cz\u0119\u015b\u0107 z nich celowo jest otwarta, \u017ceby szybko wr\u00f3ci\u0107 do pracy sprzed spotkania. Oczywi\u015bcie mo\u017cecie napisa\u0107 instrukcj\u0119, jak poradzi\u0107 sobie z problemem przy pomocy DevTools\u00f3w, ale czy naprawd\u0119 chcemy uczy\u0107 naszego Product Ownera jak obs\u0142ugiwa\u0107 DevToolsy? W DevToolsach chrome jest jeszcze opcja \u2018Bypass for network\u2019, ale w\u0142\u0105czaj\u0105c j\u0105 nara\u017camy si\u0119 na pomini\u0119cie ca\u0142ego szeregu b\u0142\u0119d\u00f3w. Osobi\u015bcie zdarza\u0142o mi si\u0119 zapomnie\u0107 o wy\u0142\u0105czeniu tego checkboxa po developmencie nowej funkcjonalno\u015bci, co prowa
dzi\u0142o do wypuszczenia na produkcj\u0119 aplikacji z b\u0142\u0119dami w Service Workerze.<\/p>\n\n\n\n

Drugim problem, jaki mieli\u015bmy w zespole z Service Workerem, by\u0142o zdefiniowanie kiedy od\u015bwie\u017cy\u0107 stron\u0119. Czas pobierania Service Workera zale\u017cy od aktualnej jako\u015bci internetu. Ci\u0119\u017cko zliczy\u0107, ile czasu zmarnowali\u015bmy dyskutuj\u0105c o nieistniej\u0105cych b\u0142\u0119dach, kt\u00f3re ostatecznie okazywa\u0142y si\u0119 zbyt szybk\u0105 pr\u00f3b\u0105 od\u015bwie\u017cenia Service Workera i testowaniem starej wersji aplikacji.<\/p>\n\n\n\n

5. Przeci\u0119tny u\u017cytkownik webowej aplikacji nie zdaje sobie sprawy, \u017ce zapisujesz co\u015b na jego dysku<\/h3>\n\n\n\n

Ze wzgl\u0119d\u00f3w opisanych powy\u017cej bardzo zale\u017ca\u0142o nam na poinformowania u\u017cytkownik\u00f3w, kiedy nowa wersja aplikacji b\u0119dzie gotowa do uruchomienia (tj. Service Worker jest gotowy przej\u0105\u0107 obs\u0142ug\u0119 strony). Je\u015bli chodzi o standardowe PWA zainstalowane na dysku, to wy\u015bwietlenie ma\u0142ego banera zach\u0119caj\u0105cego do od\u015bwie\u017cenia jest wzorcem, do kt\u00f3rego u\u017cytkownicy s\u0105 przyzwyczajeni. Natywne aplikacje cz\u0119sto aktualizuj\u0105 si\u0119 po uruchomieniu lub wy\u015bwietlaj\u0105 baner zach\u0119caj\u0105cy do przej\u015bcia do sklepu, tak wi\u0119c m\u00f3wimy tutaj o bardzo podobnym do\u015bwiadczeniu. Sytuacja zmienia si\u0119 drastycznie, kiedy m\u00f3wimy o aplikacji uruchomionej w przegl\u0105darce. Przeci\u0119ty u\u017cytkownik nie zdaje sobie sprawy z istnienia PWA czy Service Workera. Wy\u015bwietlenie takiego banera jest nieintuicyjne, bo pod\u015bwiadomie oczekujemym, \u017ce strony kt\u00f3re ogl\u0105damy b\u0119d\u0105 aktualne.<\/p>\n\n\n\n

\"\"\/
Obs\u0142uga aktualizacji Service Workera w Vived<\/figcaption><\/figure>\n\n\n\n

6. Aplikacja raz opublikowana z Service Workerem b\u0119dzie tam ju\u017c na zawsze<\/h3>\n\n\n\n

Sytuacja w tym przypadku wygl\u0105da w\u0142a\u015bciwie identycznie, jak w przypadku aplikacji mobilnych. Kiedy build trafi do sklepu, to nie mamy sposobu, \u017ceby wycofa\u0107 go z telefon\u00f3w, na kt\u00f3rych zosta\u0142 ju\u017c zainstalowany. W naszej aplikacji przygotowali\u015bmy scenariusz zmuszaj\u0105cy u\u017cytkownik\u00f3w do aktualizacji w przypadku wyst\u0105pienia krytycznego b\u0142\u0119du. Opieramy go na angualarowych interceptorach i dodaniu odpowiedniego nag\u0142\u00f3wka do odpowiedzi naszego Backendu.<\/p>\n\n\n\n

\"\"\/
Obs\u0142uga blokowania zbyt starych wersji aplikacji w Vived<\/figcaption><\/figure>\n\n\n\n

Z pozoru nie wida\u0107 tutaj szczeg\u00f3lnego problemu. Nale\u017cy zada\u0107 sobie jednak pytanie, czy jeste\u015bmy w stanie zrobi\u0107 cokolwiek, \u017ceby umo\u017cliwi\u0107 u\u017cytkownikowi unikni\u0119cie tego niechcianego procesu? Je\u015bli chodzi o aplikacje mobilne, to niestety nie znale\u017ali\u015bmy lepszego rozwi\u0105zania (na szcz\u0119\u015bcie z naszych obserwacji wynika, \u017ce wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w korzysta z automatycznych aktualizacji). Je\u015bli chodzi o aplikacje Webowe, to uwa\u017camy, \u017ce uda\u0142o nam si\u0119 znale\u017a\u0107 takie rozwi\u0105zanie i sprowadza si\u0119 ono do serwowania u\u017cytkownikowi zawsze najnowszej wersji aplikacji.<\/p>\n\n\n\n

7. Dobrze skonfigurowany cache rozwi\u0105zuje te same problemy<\/h3>\n\n\n\n

Oczywi\u015bcie nie pozbyli\u015bmy si\u0119 z naszej aplikacji ca\u0142kowicie funkcjonalno\u015bci cache\u2019a. Wolny internet cz\u0119sto przedstawiany jest jako problem mniej rozwini\u0119tych technologicznie kraj\u00f3w i \u0142atwo go zignorowa\u0107, je\u015bli wasza aplikacja ma trafia\u0107 do jednej z bogatszych grup zawodowych w \u015brodkowoeuropejskim kraju z dobr\u0105 infrastruktur\u0105 internetow\u0105. Na szcz\u0119\u015bcie moje sporadyczne podr\u00f3\u017ce Pendolino i internet niekt\u00f3rych cz\u0142onk\u00f3w naszego zespo\u0142u, skutecznie przypominaj\u0105 nam, \u017ce wolny internet jest problemem, kt\u00f3ry mo\u017ce dotkn\u0105\u0107 ka\u017cdego i nie mo\u017cemy zamie\u015b\u0107 go pod dywan (z tego miejsca serdecznie pozdrawiam Artura, kt\u00f3remu od p\u00f3\u0142 roku za tydzie\u0144 b\u0119d\u0105 montowa\u0107 \u015bwiat\u0142ow\u00f3d). Na szcz\u0119\u015bcie istniej\u0105 inne sposoby na mitygacj\u0119 tego problemu ni\u017c Service Worker.<\/p>\n\n\n\n

Nasz\u0105 odpowiedzi\u0105 na usuni\u0119cie Service Workera by\u0142o po\u015bwi\u0119cenie wi\u0119kszej uwagi przegl\u0105darkowym cache. Wsp\u00f3\u0142czesne funkcjonalno\u015bci przegl\u0105darkowego cache\u2019a zawdzi\u0119czamy Facebookowi, kt\u00f3ry ju\u017c 2007 roku chcia\u0142 rozwi\u0105za\u0107 problem pobierania wielokrotnie tych samych plik\u00f3w. Co ciekawe Facebook za\u0142o\u017cy\u0142 wtedy osobne feature requests do Firefoxa i Chrome. Obie przegl\u0105darki zaimplementowa\u0142y swoje wersje rozwi\u0105zania. Dzi\u015b powszechnym standardem sta\u0142 si\u0119 nag\u0142\u00f3wek zaproponowany przez Google (`max-age=0, must-revalidate`  ), ale w specyfikacji do dzi\u015b widnieje te\u017c przygotowany przez Mozille `Cache-Control: immutable`,  kt\u00f3ry nigdy nie zosta\u0142 zaimplementowany w Chrome.<\/p>\n\n\n\n

Nie chc\u0119, \u017ceby ten materia\u0142 przekszta\u0142ci\u0142 si\u0119 w typowy tutorial, ale postaram si\u0119 przemyci\u0107 Wam kilka wskaz\u00f3wek z naszej konfiguracji. Po pierwsze index.html nie jest cachowany. Oznacza to, \u017ce przegl\u0105darka zawsze wykonuje jedno zapytanie po niewielki plik, w kt\u00f3rym znajduj\u0105 si\u0119 odno\u015bniki do JavaScriptowych bundli. Je\u015bli w cache nie ma odpowiednich plik\u00f3w, to s\u0105 one pobierane (u\u017cytkownik otwiera aplikacj\u0119 po raz pierwszy lub w\u0142a\u015bnie wypu\u015bcili\u015bmy now\u0105 wersj\u0119 aplikacji). Natomiast je\u015bli s\u0105 ju\u017c w cache, to serwujemy je bezpo\u015brednio stamt\u0105d. Nie JavaScriptowe pliki odpytuj\u0105 serwer o zmiany i zaci\u0105gaj\u0105 body tylko je\u015bli takowe nast\u0105pi\u0142y.<\/p>\n\n\n\n

W powy\u017cszej implementacji jest pewna pu\u0142apka. W przypadku Service Workera pobierali\u015bmy wszystkie bundle wyplute przez kompilator. Teraz zaci\u0105gamy tylko pliki potrzebne do wyrenderowania obecnej strony. Na szcz\u0119\u015bcie Angular pozwala obs\u0142u\u017cy\u0107 t\u0105 sytuacj\u0119 przez do\u0142adowanie reszty plik\u00f3w w optymalnym momencie poprzez wykorzystanie odpowiedniej strategii preloadingu<\/a>.<\/p>\n\n\n\n

\n\n\n\n

Czy powinni\u015bcie teraz uda\u0107 si\u0119 prosto do Waszego kodu i usun\u0105\u0107 wszystkie Service Workery jakie stan\u0105 Wam na drodze? Najprawdopodobniej nie… Service Worker w wielu miejsach radzi sobie ca\u0142kiem nie\u017ale.  Mam natomiast nadziej\u0119, \u017ce zar\u00f3wno nasza historia i b\u0142\u0119dy jakie pope\u0142niali\u015bmy po drodze, pozwol\u0105 Wam podejmowa\u0107 decyzje w Waszych projektach.<\/p>\n\n\n\n

PS: Je\u015bli macie odmienne przemy\u015blenia na temat Service Workera to zapraszamy do dyskusja na facebooku<\/p>\n","protected":false},"excerpt":{"rendered":"

W zesz\u0142ym miesi\u0105cu pozbyli\u015bmy si\u0119 Service Worker z naszej aplikacji. Nie by\u0142a to decyzja oczywista i dojrzewa\u0142a w naszym zespole przez prawie p\u00f3\u0142 roku. Dzi\u015b chc\u0119 si\u0119 podzieli\u0107 z Wami nasz\u0105 histori\u0105 i troch\u0119 przekona\u0107 Was, \u017ce nie wszyscy potrzebujemy Service Workera. Je\u015bli jeste\u015bcie kompletnymi nowicjuszami w zakresie PWA i pierwszy raz s\u0142yszycie o Service […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10145","post","type-post","status-publish","format-standard","hentry","category-no-category"],"acf":{"weekly_summary":false,"estimated_reading_time":"9","feature_image_blog":false,"push_notification_image":false,"feature_image_visible":true},"yoast_head":"\n7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera - Vived\" \/>\n<meta property=\"og:description\" content=\"W zesz\u0142ym miesi\u0105cu pozbyli\u015bmy si\u0119 Service Worker z naszej aplikacji. Nie by\u0142a to decyzja oczywista i dojrzewa\u0142a w naszym zespole przez prawie p\u00f3\u0142 roku. Dzi\u015b chc\u0119 si\u0119 podzieli\u0107 z Wami nasz\u0105 histori\u0105 i troch\u0119 przekona\u0107 Was, \u017ce nie wszyscy potrzebujemy Service Workera. Je\u015bli jeste\u015bcie kompletnymi nowicjuszami w zakresie PWA i pierwszy raz s\u0142yszycie o Service […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-28T14:47:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-20T09:44:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera\",\"datePublished\":\"2021-04-28T14:47:45+00:00\",\"dateModified\":\"2022-10-20T09:44:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\"},\"wordCount\":1924,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\",\"articleSection\":[\"No category\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\",\"url\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\",\"name\":\"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\",\"datePublished\":\"2021-04-28T14:47:45+00:00\",\"dateModified\":\"2022-10-20T09:44:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/","og_locale":"pl_PL","og_type":"article","og_title":"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera - Vived","og_description":"W zesz\u0142ym miesi\u0105cu pozbyli\u015bmy si\u0119 Service Worker z naszej aplikacji. Nie by\u0142a to decyzja oczywista i dojrzewa\u0142a w naszym zespole przez prawie p\u00f3\u0142 roku. Dzi\u015b chc\u0119 si\u0119 podzieli\u0107 z Wami nasz\u0105 histori\u0105 i troch\u0119 przekona\u0107 Was, \u017ce nie wszyscy potrzebujemy Service Workera. Je\u015bli jeste\u015bcie kompletnymi nowicjuszami w zakresie PWA i pierwszy raz s\u0142yszycie o Service […]","og_url":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/","og_site_name":"Vived","article_published_time":"2021-04-28T14:47:45+00:00","article_modified_time":"2022-10-20T09:44:23+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg","type":"","width":"","height":""}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera","datePublished":"2021-04-28T14:47:45+00:00","dateModified":"2022-10-20T09:44:23+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/"},"wordCount":1924,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg","articleSection":["No category"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/","url":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/","name":"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg","datePublished":"2021-04-28T14:47:45+00:00","dateModified":"2022-10-20T09:44:23+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/pozbylismy-sie-service-workera\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"7 Powod\u00f3w dlaczego pozbyli\u015bmy* si\u0119 Service Workera"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W zesz\u0142ym miesi\u0105cu pozbyli\u015bmy si\u0119 Service Worker z naszej aplikacji. Nie by\u0142a to decyzja oczywista i dojrzewa\u0142a w naszym zespole przez prawie p\u00f3\u0142 roku. Dzi\u015b chc\u0119 si\u0119 podzieli\u0107 z Wami nasz\u0105 histori\u0105 i troch\u0119 przekona\u0107 Was, \u017ce nie wszyscy potrzebujemy Service Workera.<\/p>\n","innerContent":["\n<p>W zesz\u0142ym miesi\u0105cu pozbyli\u015bmy si\u0119 Service Worker z naszej aplikacji. Nie by\u0142a to decyzja oczywista i dojrzewa\u0142a w naszym zespole przez prawie p\u00f3\u0142 roku. Dzi\u015b chc\u0119 si\u0119 podzieli\u0107 z Wami nasz\u0105 histori\u0105 i troch\u0119 przekona\u0107 Was, \u017ce nie wszyscy potrzebujemy Service Workera.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli jeste\u015bcie kompletnymi nowicjuszami w zakresie PWA i pierwszy raz s\u0142yszycie o Service Workerze, to zanim przejdziecie dalej, zapoznajcie si\u0119 chocia\u017c z podstawow\u0105 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/service-workers#:~:text=A%20service%20worker%20is%20a,push%20notifications%20and%20background%20sync.\">dokumentacj\u0105 na temat Service Workera przygotowan\u0105 przez Google<\/a>. Bez tego dalsza lektura mo\u017ce si\u0119 dla Was okaza\u0107 ci\u0119\u017cka i pe\u0142na niedopowiedze\u0144.<\/p>\n","innerContent":["\n<p>Je\u015bli jeste\u015bcie kompletnymi nowicjuszami w zakresie PWA i pierwszy raz s\u0142yszycie o Service Workerze, to zanim przejdziecie dalej, zapoznajcie si\u0119 chocia\u017c z podstawow\u0105 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/service-workers#:~:text=A%20service%20worker%20is%20a,push%20notifications%20and%20background%20sync.\">dokumentacj\u0105 na temat Service Workera przygotowan\u0105 przez Google<\/a>. Bez tego dalsza lektura mo\u017ce si\u0119 dla Was okaza\u0107 ci\u0119\u017cka i pe\u0142na niedopowiedze\u0144.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":[],"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\" alt=\"\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abaa9d3b.jpg\" alt=\"\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>* Service Worker pozosta\u0142 w naszej aplikacji, ale teraz zajmuje si\u0119 tylko Push Notyfikacjami i jest obs\u0142ugiwany prawie ca\u0142kowicie przez bibliotek\u0119 dostarczona przez firebase.<\/p>\n","innerContent":["\n<p>* Service Worker pozosta\u0142 w naszej aplikacji, ale teraz zajmuje si\u0119 tylko Push Notyfikacjami i jest obs\u0142ugiwany prawie ca\u0142kowicie przez bibliotek\u0119 dostarczona przez firebase.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"1-nasza-aplikacja-nie-wspiera-prawdziwego-offline\">1. Nasza aplikacja nie wspiera prawdziwego Offline<\/h3>\n","innerContent":["\n<h3 id=\"1-nasza-aplikacja-nie-wspiera-prawdziwego-offline\">1. Nasza aplikacja nie wspiera prawdziwego Offline<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zdecydowanie nie jest to najwa\u017cniejszy pow\u00f3d, dla kt\u00f3rego usun\u0119li\u015bmy Service Workera, ale w mojej opinii mocno rzutuje na kontekst pozosta\u0142ych punkt\u00f3w. Na papierze Service Worker mo\u017ce by\u0107 wykorzystany tylko do cachowania plik\u00f3w, a wspomaganie trybu offline mo\u017cna uzna\u0107 jako poboczn\u0105 funkcjonalno\u015b\u0107. Z tak\u0105 narracj\u0105 spotka\u0142em si\u0119 w sieci i troch\u0119 w my\u015bl tej niej dzia\u0142a\u0142 nasz Service Worker. W Vived nigdy nie znale\u017ali\u015bmy odpowiedniej motywacji i bud\u017cetu potrzebnych do zaimplementowania w pe\u0142ni funkcjonalnej wersji offline. Ba, nawet nie by\u0142o jej wida\u0107 na horyzoncie naszej road mapy. Nasze wsparcie dla wersji offline, sprowadza\u0142o si\u0119 wi\u0119c do opakowania strony b\u0142\u0119du w nasz w\u0142asny UI. By\u0142o to rozwi\u0105zanie \u0142adne, ale czy warte swojej ceny?<\/p>\n","innerContent":["\n<p>Zdecydowanie nie jest to najwa\u017cniejszy pow\u00f3d, dla kt\u00f3rego usun\u0119li\u015bmy Service Workera, ale w mojej opinii mocno rzutuje na kontekst pozosta\u0142ych punkt\u00f3w. Na papierze Service Worker mo\u017ce by\u0107 wykorzystany tylko do cachowania plik\u00f3w, a wspomaganie trybu offline mo\u017cna uzna\u0107 jako poboczn\u0105 funkcjonalno\u015b\u0107. Z tak\u0105 narracj\u0105 spotka\u0142em si\u0119 w sieci i troch\u0119 w my\u015bl tej niej dzia\u0142a\u0142 nasz Service Worker. W Vived nigdy nie znale\u017ali\u015bmy odpowiedniej motywacji i bud\u017cetu potrzebnych do zaimplementowania w pe\u0142ni funkcjonalnej wersji offline. Ba, nawet nie by\u0142o jej wida\u0107 na horyzoncie naszej road mapy. Nasze wsparcie dla wersji offline, sprowadza\u0142o si\u0119 wi\u0119c do opakowania strony b\u0142\u0119du w nasz w\u0142asny UI. By\u0142o to rozwi\u0105zanie \u0142adne, ale czy warte swojej ceny?<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":[],"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/Hnet.com-image-3.png\" alt=\"\"\/><figcaption>Tryb offline w Vived<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/Hnet.com-image-3.png\" alt=\"\"\/><figcaption>Tryb offline w Vived<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli w Waszej aplikacji wymaganiem biznesowym jest tryb offline, to przykro mi, ale nie b\u0119dziecie w stanie pozby\u0107 si\u0119 ca\u0142kowicie Service Workera. Mo\u017cecie drastycznie go upro\u015bci\u0107 i przenie\u015b\u0107 w\u0142a\u015bciw\u0105 obs\u0142ug\u0119 offline do kodu aplikacji, ale zawsze zostaniecie, co najmniej z ma\u0142ym kawa\u0142kiem Service Workera, przechowuj\u0105cym index.html i niezb\u0119dne bundle JavaScriptowe.<\/p>\n","innerContent":["\n<p>Je\u015bli w Waszej aplikacji wymaganiem biznesowym jest tryb offline, to przykro mi, ale nie b\u0119dziecie w stanie pozby\u0107 si\u0119 ca\u0142kowicie Service Workera. Mo\u017cecie drastycznie go upro\u015bci\u0107 i przenie\u015b\u0107 w\u0142a\u015bciw\u0105 obs\u0142ug\u0119 offline do kodu aplikacji, ale zawsze zostaniecie, co najmniej z ma\u0142ym kawa\u0142kiem Service Workera, przechowuj\u0105cym index.html i niezb\u0119dne bundle JavaScriptowe.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"2-service-worker-jest-zbyt-elastyczny\">2. Service Worker jest zbyt elastyczny<\/h3>\n","innerContent":["\n<h3 id=\"2-service-worker-jest-zbyt-elastyczny\">2. Service Worker jest zbyt elastyczny<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Z pozoru ci\u0119\u017cko uzna\u0107 du\u017c\u0105 elastyczno\u015b\u0107 za wad\u0119 (w ko\u0144cu frontendowa spo\u0142eczno\u015b\u0107 uwielbia elastycznego reacta i stroni od mocno ustanardowanego Angulara). Trzeba jednak pami\u0119ta\u0107, \u017ce du\u017ca swoboda idzie w parze z mnogo\u015bci\u0105 mo\u017cliwych rozwi\u0105za\u0144 tego samego problemu. Cz\u0119sto pochodn\u0105 tej swobody jest bardziej skomplikowane API. Tak jest w\u0142a\u015bnie w przypadku Service Workera. W dokumentacji, tw\u00f3rcy otwarcie przyznaj\u0105, \u017ce jednym z g\u0142\u00f3wnych cel\u00f3w przy projektowaniu API, by\u0142 brak za\u0142o\u017ce\u0144 co do tego, w jak  b\u0119dzie ono u\u017cywane. Niestety da si\u0119 to odczu\u0107 na ka\u017cdym kroku. API jest pe\u0142ne event\u00f3w i ekstremalnie elastyczne, ale implementacja nawet najbardziej standardowych scenariuszy wymaga dog\u0142\u0119bnego zrozumienia, jak dzia\u0142a Service Worker i stworzenia kawa\u0142ka, zawi\u0142ego dla postronnych, kodu. Oznacza to, \u017ce ci\u0119\u017cko rozproszy\u0107 wiedz\u0119 o Service Workerach w zespole i niezwykle ci\u0119\u017cko unikn\u0105\u0107 bug\u00f3w, kt\u00f3re powstan\u0105, gdy kto\u015b zacznie refactorowa\u0107 nasz kod.<\/p>\n","innerContent":["\n<p>Z pozoru ci\u0119\u017cko uzna\u0107 du\u017c\u0105 elastyczno\u015b\u0107 za wad\u0119 (w ko\u0144cu frontendowa spo\u0142eczno\u015b\u0107 uwielbia elastycznego reacta i stroni od mocno ustanardowanego Angulara). Trzeba jednak pami\u0119ta\u0107, \u017ce du\u017ca swoboda idzie w parze z mnogo\u015bci\u0105 mo\u017cliwych rozwi\u0105za\u0144 tego samego problemu. Cz\u0119sto pochodn\u0105 tej swobody jest bardziej skomplikowane API. Tak jest w\u0142a\u015bnie w przypadku Service Workera. W dokumentacji, tw\u00f3rcy otwarcie przyznaj\u0105, \u017ce jednym z g\u0142\u00f3wnych cel\u00f3w przy projektowaniu API, by\u0142 brak za\u0142o\u017ce\u0144 co do tego, w jak  b\u0119dzie ono u\u017cywane. Niestety da si\u0119 to odczu\u0107 na ka\u017cdym kroku. API jest pe\u0142ne event\u00f3w i ekstremalnie elastyczne, ale implementacja nawet najbardziej standardowych scenariuszy wymaga dog\u0142\u0119bnego zrozumienia, jak dzia\u0142a Service Worker i stworzenia kawa\u0142ka, zawi\u0142ego dla postronnych, kodu. Oznacza to, \u017ce ci\u0119\u017cko rozproszy\u0107 wiedz\u0119 o Service Workerach w zespole i niezwykle ci\u0119\u017cko unikn\u0105\u0107 bug\u00f3w, kt\u00f3re powstan\u0105, gdy kto\u015b zacznie refactorowa\u0107 nasz kod.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"linkDestination":"custom"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abb4ffa8.png\" alt=\"\"\/><figcaption><a href=\"https:\/\/www.w3.org\/TR\/service-workers\/#motivations\">https:\/\/www.w3.org\/TR\/service-workers\/#motivations<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abb4ffa8.png\" alt=\"\"\/><figcaption><a href=\"https:\/\/www.w3.org\/TR\/service-workers\/#motivations\">https:\/\/www.w3.org\/TR\/service-workers\/#motivations<\/a><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Prawdopodobnie u wielu z Was za\u015bwieci\u0142a si\u0119 teraz czerwona lampka - dlaczego nie skorzystali\u015bmy z frameworka wspomagaj\u0105cego tworzenie Service Worker\u00f3w? Na naszej drodze korzystali\u015bmy zar\u00f3wno z <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\">WorkBoxa<\/a> jak i <a href=\"https:\/\/angular.io\/guide\/service-worker-intro\">Angular Service Worker<\/a>. Jak wspomnia\u0142em wcze\u015bniej, do Push Notyfikacji u\u017cywamy Service Workera dostarczonego przez Firebase. Te frameworki\/biblioteki rozwi\u0105zuj\u0105 spor\u0105 cz\u0119\u015b\u0107 opisanych powy\u017cej problem\u00f3w, ale wprowadzaj\u0105 swoj\u0105 warstw\u0119 konfiguracji. Poza tym nigdy nie uda\u0142o nam si\u0119 oprze\u0107 ca\u0142kowicie na zewn\u0119trznych bibliotekach i zawsze musieli\u015bmy odrobin\u0119 \u2018przylukrowa\u0107\u2019 nasz Service Worker. Ta odrobina lukru zazwyczaj wystarczy\u0142a, \u017ceby odpowiednio skomplikowa\u0107 ca\u0142o\u015b\u0107 i wprowadzi\u0107, co najmniej kilka bug\u00f3w.<\/p>\n","innerContent":["\n<p>Prawdopodobnie u wielu z Was za\u015bwieci\u0142a si\u0119 teraz czerwona lampka - dlaczego nie skorzystali\u015bmy z frameworka wspomagaj\u0105cego tworzenie Service Worker\u00f3w? Na naszej drodze korzystali\u015bmy zar\u00f3wno z <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\">WorkBoxa<\/a> jak i <a href=\"https:\/\/angular.io\/guide\/service-worker-intro\">Angular Service Worker<\/a>. Jak wspomnia\u0142em wcze\u015bniej, do Push Notyfikacji u\u017cywamy Service Workera dostarczonego przez Firebase. Te frameworki\/biblioteki rozwi\u0105zuj\u0105 spor\u0105 cz\u0119\u015b\u0107 opisanych powy\u017cej problem\u00f3w, ale wprowadzaj\u0105 swoj\u0105 warstw\u0119 konfiguracji. Poza tym nigdy nie uda\u0142o nam si\u0119 oprze\u0107 ca\u0142kowicie na zewn\u0119trznych bibliotekach i zawsze musieli\u015bmy odrobin\u0119 \u2018przylukrowa\u0107\u2019 nasz Service Worker. Ta odrobina lukru zazwyczaj wystarczy\u0142a, \u017ceby odpowiednio skomplikowa\u0107 ca\u0142o\u015b\u0107 i wprowadzi\u0107, co najmniej kilka bug\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"3-u%C5%BCytkownik-nie-da-ci-drugiej-szansy\">3. U\u017cytkownik nie da Ci drugiej szansy<\/h3>\n","innerContent":["\n<h3 id=\"3-u%C5%BCytkownik-nie-da-ci-drugiej-szansy\">3. U\u017cytkownik nie da Ci drugiej szansy<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli Service Workera u\u017cywacie, aby zasili\u0107 standardow\u0105 mobiln\u0105 aplikacj\u0119, to prawdopodobnie nie macie si\u0119, o co martwi\u0107. Stworzyli\u015bcie now\u0105 niesamowit\u0105 funkcjonalno\u015b\u0107 i u\u017cytkownik nie zauwa\u017cy\u0142 jej w dniu releasu? Nic nie szkodzi. U\u017cytkownik najprawdopodobniej wr\u00f3ci do aplikacja za kilka dni i wtedy b\u0119dzie mia\u0142 okazj\u0119 podziwia\u0107 nasz kunszt programistyczny. Sytuacja zmienia si\u0119 diametralnie, w sytuacji gdy opr\u00f3cz aplikacyjnej cz\u0119\u015bci chcemy wspiera\u0107 bardziej statyczne funkcjonalno\u015bci. Za przyk\u0142ad niech pos\u0142u\u017c\u0105 oferty, kt\u00f3re jeszcze niedawno obs\u0142ugiwali\u015bmy w Vived. By\u0142y one integraln\u0105 cz\u0119\u015bci\u0105 aplikacji, ale umo\u017cliwiali\u015bmy r\u00f3wnie\u017c dzielenie si\u0119 nimi z zarejestrowanymi u\u017cytkownikami i aktywnie promowali\u015bmy je w social mediach. W takim przypadku u\u017cytkownik nie by\u0142 zwi\u0105zany z aplikacj\u0105 i m\u00f3g\u0142 trafia\u0107 do nas w sporych odst\u0119pach czasu. Oznacza to, \u017ce nasza praca nie dociera\u0142a na czas do u\u017cytkownik\u00f3w i obserwowali oni przestarza\u0142\u0105 wersj\u0119 naszej strony. Intensywne iteracje nad coraz lepsz\u0105 prezentacj\u0105 ofert, nie trafia\u0142y do u\u017cytkownik\u00f3w ko\u0144cowych. Zdecydowanie nie jest to scenariusz, jaki chcecie przerabia\u0107 w pocz\u0105tkowej fazie pracy nad produktem, gdy posiadanie dobrej p\u0119tli zwrotnej jest kluczowe dla efektywnych iteracji nad funkcjonalno\u015bci\u0105.<\/p>\n","innerContent":["\n<p>Je\u015bli Service Workera u\u017cywacie, aby zasili\u0107 standardow\u0105 mobiln\u0105 aplikacj\u0119, to prawdopodobnie nie macie si\u0119, o co martwi\u0107. Stworzyli\u015bcie now\u0105 niesamowit\u0105 funkcjonalno\u015b\u0107 i u\u017cytkownik nie zauwa\u017cy\u0142 jej w dniu releasu? Nic nie szkodzi. U\u017cytkownik najprawdopodobniej wr\u00f3ci do aplikacja za kilka dni i wtedy b\u0119dzie mia\u0142 okazj\u0119 podziwia\u0107 nasz kunszt programistyczny. Sytuacja zmienia si\u0119 diametralnie, w sytuacji gdy opr\u00f3cz aplikacyjnej cz\u0119\u015bci chcemy wspiera\u0107 bardziej statyczne funkcjonalno\u015bci. Za przyk\u0142ad niech pos\u0142u\u017c\u0105 oferty, kt\u00f3re jeszcze niedawno obs\u0142ugiwali\u015bmy w Vived. By\u0142y one integraln\u0105 cz\u0119\u015bci\u0105 aplikacji, ale umo\u017cliwiali\u015bmy r\u00f3wnie\u017c dzielenie si\u0119 nimi z zarejestrowanymi u\u017cytkownikami i aktywnie promowali\u015bmy je w social mediach. W takim przypadku u\u017cytkownik nie by\u0142 zwi\u0105zany z aplikacj\u0105 i m\u00f3g\u0142 trafia\u0107 do nas w sporych odst\u0119pach czasu. Oznacza to, \u017ce nasza praca nie dociera\u0142a na czas do u\u017cytkownik\u00f3w i obserwowali oni przestarza\u0142\u0105 wersj\u0119 naszej strony. Intensywne iteracje nad coraz lepsz\u0105 prezentacj\u0105 ofert, nie trafia\u0142y do u\u017cytkownik\u00f3w ko\u0144cowych. Zdecydowanie nie jest to scenariusz, jaki chcecie przerabia\u0107 w pocz\u0105tkowej fazie pracy nad produktem, gdy posiadanie dobrej p\u0119tli zwrotnej jest kluczowe dla efektywnych iteracji nad funkcjonalno\u015bci\u0105.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"4-mam-ju%C5%BC-do%C5%9B%C4%87-t%C5%82umaczeniu-reszcie-zespo%C5%82u-zamknij-wszystkie-karty-i-od%C5%9Bwie%C5%BC\">4. Mam ju\u017c do\u015b\u0107 t\u0142umaczeniu reszcie zespo\u0142u: zamknij wszystkie karty i od\u015bwie\u017c...<\/h3>\n","innerContent":["\n<h3 id=\"4-mam-ju%C5%BC-do%C5%9B%C4%87-t%C5%82umaczeniu-reszcie-zespo%C5%82u-zamknij-wszystkie-karty-i-od%C5%9Bwie%C5%BC\">4. Mam ju\u017c do\u015b\u0107 t\u0142umaczeniu reszcie zespo\u0142u: zamknij wszystkie karty i od\u015bwie\u017c...<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Z pozoru wydaje si\u0119 to \u015bmiesznym problemem, ale d\u0142ugofalowo powodowa\u0142o niesamowicie du\u017co frustracji. \u017beby bezpiecznie podmieni\u0107 Service Worker obs\u0142uguj\u0105cy aplikacj\u0119, nale\u017cy odczeka\u0107 a\u017c ten si\u0119 zainstaluje, nast\u0119pnie zamkn\u0105\u0107 wszystkie otwarte karty z aplikacj\u0105 i od\u015bwie\u017cy\u0107 jedyn\u0105 niezamkni\u0119t\u0105.<\/p>\n","innerContent":["\n<p>Z pozoru wydaje si\u0119 to \u015bmiesznym problemem, ale d\u0142ugofalowo powodowa\u0142o niesamowicie du\u017co frustracji. \u017beby bezpiecznie podmieni\u0107 Service Worker obs\u0142uguj\u0105cy aplikacj\u0119, nale\u017cy odczeka\u0107 a\u017c ten si\u0119 zainstaluje, nast\u0119pnie zamkn\u0105\u0107 wszystkie otwarte karty z aplikacj\u0105 i od\u015bwie\u017cy\u0107 jedyn\u0105 niezamkni\u0119t\u0105.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":[],"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abbbf64c.png\" alt=\"\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0abbbf64c.png\" alt=\"\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nasz Product Owner ma 32GB ramu i prawie ca\u0142kowicie wype\u0142nia je Chrome. Nawet je\u015bli w trakcie spotkanie uda mu si\u0119 zlokalizowa\u0107 wszystkie karty z Vived, to nie b\u0119dzie w stanie ich zamkn\u0105\u0107. Cz\u0119\u015b\u0107 z nich celowo jest otwarta, \u017ceby szybko wr\u00f3ci\u0107 do pracy sprzed spotkania. Oczywi\u015bcie mo\u017cecie napisa\u0107 instrukcj\u0119, jak poradzi\u0107 sobie z problemem przy pomocy DevTools\u00f3w, ale czy naprawd\u0119 chcemy uczy\u0107 naszego Product Ownera jak obs\u0142ugiwa\u0107 DevToolsy? W DevToolsach chrome jest jeszcze opcja \u2018Bypass for network\u2019, ale w\u0142\u0105czaj\u0105c j\u0105 nara\u017camy si\u0119 na pomini\u0119cie ca\u0142ego szeregu b\u0142\u0119d\u00f3w. Osobi\u015bcie zdarza\u0142o mi si\u0119 zapomnie\u0107 o wy\u0142\u0105czeniu tego checkboxa po developmencie nowej funkcjonalno\u015bci, co prowa<br>dzi\u0142o do wypuszczenia na produkcj\u0119 aplikacji z b\u0142\u0119dami w Service Workerze.<\/p>\n","innerContent":["\n<p>Nasz Product Owner ma 32GB ramu i prawie ca\u0142kowicie wype\u0142nia je Chrome. Nawet je\u015bli w trakcie spotkanie uda mu si\u0119 zlokalizowa\u0107 wszystkie karty z Vived, to nie b\u0119dzie w stanie ich zamkn\u0105\u0107. Cz\u0119\u015b\u0107 z nich celowo jest otwarta, \u017ceby szybko wr\u00f3ci\u0107 do pracy sprzed spotkania. Oczywi\u015bcie mo\u017cecie napisa\u0107 instrukcj\u0119, jak poradzi\u0107 sobie z problemem przy pomocy DevTools\u00f3w, ale czy naprawd\u0119 chcemy uczy\u0107 naszego Product Ownera jak obs\u0142ugiwa\u0107 DevToolsy? W DevToolsach chrome jest jeszcze opcja \u2018Bypass for network\u2019, ale w\u0142\u0105czaj\u0105c j\u0105 nara\u017camy si\u0119 na pomini\u0119cie ca\u0142ego szeregu b\u0142\u0119d\u00f3w. Osobi\u015bcie zdarza\u0142o mi si\u0119 zapomnie\u0107 o wy\u0142\u0105czeniu tego checkboxa po developmencie nowej funkcjonalno\u015bci, co prowa<br>dzi\u0142o do wypuszczenia na produkcj\u0119 aplikacji z b\u0142\u0119dami w Service Workerze.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Drugim problem, jaki mieli\u015bmy w zespole z Service Workerem, by\u0142o zdefiniowanie kiedy od\u015bwie\u017cy\u0107 stron\u0119. Czas pobierania Service Workera zale\u017cy od aktualnej jako\u015bci internetu. Ci\u0119\u017cko zliczy\u0107, ile czasu zmarnowali\u015bmy dyskutuj\u0105c o nieistniej\u0105cych b\u0142\u0119dach, kt\u00f3re ostatecznie okazywa\u0142y si\u0119 zbyt szybk\u0105 pr\u00f3b\u0105 od\u015bwie\u017cenia Service Workera i testowaniem starej wersji aplikacji.<\/p>\n","innerContent":["\n<p>Drugim problem, jaki mieli\u015bmy w zespole z Service Workerem, by\u0142o zdefiniowanie kiedy od\u015bwie\u017cy\u0107 stron\u0119. Czas pobierania Service Workera zale\u017cy od aktualnej jako\u015bci internetu. Ci\u0119\u017cko zliczy\u0107, ile czasu zmarnowali\u015bmy dyskutuj\u0105c o nieistniej\u0105cych b\u0142\u0119dach, kt\u00f3re ostatecznie okazywa\u0142y si\u0119 zbyt szybk\u0105 pr\u00f3b\u0105 od\u015bwie\u017cenia Service Workera i testowaniem starej wersji aplikacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"5-przeci%C4%99tny-u%C5%BCytkownik-webowej-aplikacji-nie-zdaje-sobie-sprawy-%C5%BCe-zapisujesz-co%C5%9B-na-jego-dysku\">5. Przeci\u0119tny u\u017cytkownik webowej aplikacji nie zdaje sobie sprawy, \u017ce zapisujesz co\u015b na jego dysku<\/h3>\n","innerContent":["\n<h3 id=\"5-przeci%C4%99tny-u%C5%BCytkownik-webowej-aplikacji-nie-zdaje-sobie-sprawy-%C5%BCe-zapisujesz-co%C5%9B-na-jego-dysku\">5. Przeci\u0119tny u\u017cytkownik webowej aplikacji nie zdaje sobie sprawy, \u017ce zapisujesz co\u015b na jego dysku<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ze wzgl\u0119d\u00f3w opisanych powy\u017cej bardzo zale\u017ca\u0142o nam na poinformowania u\u017cytkownik\u00f3w, kiedy nowa wersja aplikacji b\u0119dzie gotowa do uruchomienia (tj. Service Worker jest gotowy przej\u0105\u0107 obs\u0142ug\u0119 strony). Je\u015bli chodzi o standardowe PWA zainstalowane na dysku, to wy\u015bwietlenie ma\u0142ego banera zach\u0119caj\u0105cego do od\u015bwie\u017cenia jest wzorcem, do kt\u00f3rego u\u017cytkownicy s\u0105 przyzwyczajeni. Natywne aplikacje cz\u0119sto aktualizuj\u0105 si\u0119 po uruchomieniu lub wy\u015bwietlaj\u0105 baner zach\u0119caj\u0105cy do przej\u015bcia do sklepu, tak wi\u0119c m\u00f3wimy tutaj o bardzo podobnym do\u015bwiadczeniu. Sytuacja zmienia si\u0119 drastycznie, kiedy m\u00f3wimy o aplikacji uruchomionej w przegl\u0105darce. Przeci\u0119ty u\u017cytkownik nie zdaje sobie sprawy z istnienia PWA czy Service Workera. Wy\u015bwietlenie takiego banera jest nieintuicyjne, bo pod\u015bwiadomie oczekujemym, \u017ce strony kt\u00f3re ogl\u0105damy b\u0119d\u0105 aktualne.<\/p>\n","innerContent":["\n<p>Ze wzgl\u0119d\u00f3w opisanych powy\u017cej bardzo zale\u017ca\u0142o nam na poinformowania u\u017cytkownik\u00f3w, kiedy nowa wersja aplikacji b\u0119dzie gotowa do uruchomienia (tj. Service Worker jest gotowy przej\u0105\u0107 obs\u0142ug\u0119 strony). Je\u015bli chodzi o standardowe PWA zainstalowane na dysku, to wy\u015bwietlenie ma\u0142ego banera zach\u0119caj\u0105cego do od\u015bwie\u017cenia jest wzorcem, do kt\u00f3rego u\u017cytkownicy s\u0105 przyzwyczajeni. Natywne aplikacje cz\u0119sto aktualizuj\u0105 si\u0119 po uruchomieniu lub wy\u015bwietlaj\u0105 baner zach\u0119caj\u0105cy do przej\u015bcia do sklepu, tak wi\u0119c m\u00f3wimy tutaj o bardzo podobnym do\u015bwiadczeniu. Sytuacja zmienia si\u0119 drastycznie, kiedy m\u00f3wimy o aplikacji uruchomionej w przegl\u0105darce. Przeci\u0119ty u\u017cytkownik nie zdaje sobie sprawy z istnienia PWA czy Service Workera. Wy\u015bwietlenie takiego banera jest nieintuicyjne, bo pod\u015bwiadomie oczekujemym, \u017ce strony kt\u00f3re ogl\u0105damy b\u0119d\u0105 aktualne.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":[],"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/Hnet.com-image-2.png\" alt=\"\"\/><figcaption>Obs\u0142uga aktualizacji Service Workera w Vived<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/Hnet.com-image-2.png\" alt=\"\"\/><figcaption>Obs\u0142uga aktualizacji Service Workera w Vived<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"6-aplikacja-raz-opublikowana-z-service-workerem-b%C4%99dzie-tam-ju%C5%BC-na-zawsze\">6. Aplikacja raz opublikowana z Service Workerem b\u0119dzie tam ju\u017c na zawsze<\/h3>\n","innerContent":["\n<h3 id=\"6-aplikacja-raz-opublikowana-z-service-workerem-b%C4%99dzie-tam-ju%C5%BC-na-zawsze\">6. Aplikacja raz opublikowana z Service Workerem b\u0119dzie tam ju\u017c na zawsze<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Sytuacja w tym przypadku wygl\u0105da w\u0142a\u015bciwie identycznie, jak w przypadku aplikacji mobilnych. Kiedy build trafi do sklepu, to nie mamy sposobu, \u017ceby wycofa\u0107 go z telefon\u00f3w, na kt\u00f3rych zosta\u0142 ju\u017c zainstalowany. W naszej aplikacji przygotowali\u015bmy scenariusz zmuszaj\u0105cy u\u017cytkownik\u00f3w do aktualizacji w przypadku wyst\u0105pienia krytycznego b\u0142\u0119du. Opieramy go na angualarowych interceptorach i dodaniu odpowiedniego nag\u0142\u00f3wka do odpowiedzi naszego Backendu.<\/p>\n","innerContent":["\n<p>Sytuacja w tym przypadku wygl\u0105da w\u0142a\u015bciwie identycznie, jak w przypadku aplikacji mobilnych. Kiedy build trafi do sklepu, to nie mamy sposobu, \u017ceby wycofa\u0107 go z telefon\u00f3w, na kt\u00f3rych zosta\u0142 ju\u017c zainstalowany. W naszej aplikacji przygotowali\u015bmy scenariusz zmuszaj\u0105cy u\u017cytkownik\u00f3w do aktualizacji w przypadku wyst\u0105pienia krytycznego b\u0142\u0119du. Opieramy go na angualarowych interceptorach i dodaniu odpowiedniego nag\u0142\u00f3wka do odpowiedzi naszego Backendu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":[],"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/Hnet.com-image.png\" alt=\"\"\/><figcaption>Obs\u0142uga blokowania zbyt starych wersji aplikacji w Vived<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/Hnet.com-image.png\" alt=\"\"\/><figcaption>Obs\u0142uga blokowania zbyt starych wersji aplikacji w Vived<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Z pozoru nie wida\u0107 tutaj szczeg\u00f3lnego problemu. Nale\u017cy zada\u0107 sobie jednak pytanie, czy jeste\u015bmy w stanie zrobi\u0107 cokolwiek, \u017ceby umo\u017cliwi\u0107 u\u017cytkownikowi unikni\u0119cie tego niechcianego procesu? Je\u015bli chodzi o aplikacje mobilne, to niestety nie znale\u017ali\u015bmy lepszego rozwi\u0105zania (na szcz\u0119\u015bcie z naszych obserwacji wynika, \u017ce wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w korzysta z automatycznych aktualizacji). Je\u015bli chodzi o aplikacje Webowe, to uwa\u017camy, \u017ce uda\u0142o nam si\u0119 znale\u017a\u0107 takie rozwi\u0105zanie i sprowadza si\u0119 ono do serwowania u\u017cytkownikowi zawsze najnowszej wersji aplikacji.<\/p>\n","innerContent":["\n<p>Z pozoru nie wida\u0107 tutaj szczeg\u00f3lnego problemu. Nale\u017cy zada\u0107 sobie jednak pytanie, czy jeste\u015bmy w stanie zrobi\u0107 cokolwiek, \u017ceby umo\u017cliwi\u0107 u\u017cytkownikowi unikni\u0119cie tego niechcianego procesu? Je\u015bli chodzi o aplikacje mobilne, to niestety nie znale\u017ali\u015bmy lepszego rozwi\u0105zania (na szcz\u0119\u015bcie z naszych obserwacji wynika, \u017ce wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w korzysta z automatycznych aktualizacji). Je\u015bli chodzi o aplikacje Webowe, to uwa\u017camy, \u017ce uda\u0142o nam si\u0119 znale\u017a\u0107 takie rozwi\u0105zanie i sprowadza si\u0119 ono do serwowania u\u017cytkownikowi zawsze najnowszej wersji aplikacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"7-dobrze-skonfigurowany-cache-rozwi%C4%85zuje-te-same-problemy\">7. Dobrze skonfigurowany cache rozwi\u0105zuje te same problemy<\/h3>\n","innerContent":["\n<h3 id=\"7-dobrze-skonfigurowany-cache-rozwi%C4%85zuje-te-same-problemy\">7. Dobrze skonfigurowany cache rozwi\u0105zuje te same problemy<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Oczywi\u015bcie nie pozbyli\u015bmy si\u0119 z naszej aplikacji ca\u0142kowicie funkcjonalno\u015bci cache\u2019a. Wolny internet cz\u0119sto przedstawiany jest jako problem mniej rozwini\u0119tych technologicznie kraj\u00f3w i \u0142atwo go zignorowa\u0107, je\u015bli wasza aplikacja ma trafia\u0107 do jednej z bogatszych grup zawodowych w \u015brodkowoeuropejskim kraju z dobr\u0105 infrastruktur\u0105 internetow\u0105. Na szcz\u0119\u015bcie moje sporadyczne podr\u00f3\u017ce Pendolino i internet niekt\u00f3rych cz\u0142onk\u00f3w naszego zespo\u0142u, skutecznie przypominaj\u0105 nam, \u017ce wolny internet jest problemem, kt\u00f3ry mo\u017ce dotkn\u0105\u0107 ka\u017cdego i nie mo\u017cemy zamie\u015b\u0107 go pod dywan (z tego miejsca serdecznie pozdrawiam Artura, kt\u00f3remu od p\u00f3\u0142 roku za tydzie\u0144 b\u0119d\u0105 montowa\u0107 \u015bwiat\u0142ow\u00f3d). Na szcz\u0119\u015bcie istniej\u0105 inne sposoby na mitygacj\u0119 tego problemu ni\u017c Service Worker.<\/p>\n","innerContent":["\n<p>Oczywi\u015bcie nie pozbyli\u015bmy si\u0119 z naszej aplikacji ca\u0142kowicie funkcjonalno\u015bci cache\u2019a. Wolny internet cz\u0119sto przedstawiany jest jako problem mniej rozwini\u0119tych technologicznie kraj\u00f3w i \u0142atwo go zignorowa\u0107, je\u015bli wasza aplikacja ma trafia\u0107 do jednej z bogatszych grup zawodowych w \u015brodkowoeuropejskim kraju z dobr\u0105 infrastruktur\u0105 internetow\u0105. Na szcz\u0119\u015bcie moje sporadyczne podr\u00f3\u017ce Pendolino i internet niekt\u00f3rych cz\u0142onk\u00f3w naszego zespo\u0142u, skutecznie przypominaj\u0105 nam, \u017ce wolny internet jest problemem, kt\u00f3ry mo\u017ce dotkn\u0105\u0107 ka\u017cdego i nie mo\u017cemy zamie\u015b\u0107 go pod dywan (z tego miejsca serdecznie pozdrawiam Artura, kt\u00f3remu od p\u00f3\u0142 roku za tydzie\u0144 b\u0119d\u0105 montowa\u0107 \u015bwiat\u0142ow\u00f3d). Na szcz\u0119\u015bcie istniej\u0105 inne sposoby na mitygacj\u0119 tego problemu ni\u017c Service Worker.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nasz\u0105 odpowiedzi\u0105 na usuni\u0119cie Service Workera by\u0142o po\u015bwi\u0119cenie wi\u0119kszej uwagi przegl\u0105darkowym cache. Wsp\u00f3\u0142czesne funkcjonalno\u015bci przegl\u0105darkowego cache\u2019a zawdzi\u0119czamy Facebookowi, kt\u00f3ry ju\u017c 2007 roku chcia\u0142 rozwi\u0105za\u0107 problem pobierania wielokrotnie tych samych plik\u00f3w. Co ciekawe Facebook za\u0142o\u017cy\u0142 wtedy osobne feature requests do Firefoxa i Chrome. Obie przegl\u0105darki zaimplementowa\u0142y swoje wersje rozwi\u0105zania. Dzi\u015b powszechnym standardem sta\u0142 si\u0119 nag\u0142\u00f3wek zaproponowany przez Google (`max-age=0, must-revalidate`  ), ale w specyfikacji do dzi\u015b widnieje te\u017c przygotowany przez Mozille `Cache-Control: immutable`,  kt\u00f3ry nigdy nie zosta\u0142 zaimplementowany w Chrome.<\/p>\n","innerContent":["\n<p>Nasz\u0105 odpowiedzi\u0105 na usuni\u0119cie Service Workera by\u0142o po\u015bwi\u0119cenie wi\u0119kszej uwagi przegl\u0105darkowym cache. Wsp\u00f3\u0142czesne funkcjonalno\u015bci przegl\u0105darkowego cache\u2019a zawdzi\u0119czamy Facebookowi, kt\u00f3ry ju\u017c 2007 roku chcia\u0142 rozwi\u0105za\u0107 problem pobierania wielokrotnie tych samych plik\u00f3w. Co ciekawe Facebook za\u0142o\u017cy\u0142 wtedy osobne feature requests do Firefoxa i Chrome. Obie przegl\u0105darki zaimplementowa\u0142y swoje wersje rozwi\u0105zania. Dzi\u015b powszechnym standardem sta\u0142 si\u0119 nag\u0142\u00f3wek zaproponowany przez Google (`max-age=0, must-revalidate`  ), ale w specyfikacji do dzi\u015b widnieje te\u017c przygotowany przez Mozille `Cache-Control: immutable`,  kt\u00f3ry nigdy nie zosta\u0142 zaimplementowany w Chrome.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie chc\u0119, \u017ceby ten materia\u0142 przekszta\u0142ci\u0142 si\u0119 w typowy tutorial, ale postaram si\u0119 przemyci\u0107 Wam kilka wskaz\u00f3wek z naszej konfiguracji. Po pierwsze index.html nie jest cachowany. Oznacza to, \u017ce przegl\u0105darka zawsze wykonuje jedno zapytanie po niewielki plik, w kt\u00f3rym znajduj\u0105 si\u0119 odno\u015bniki do JavaScriptowych bundli. Je\u015bli w cache nie ma odpowiednich plik\u00f3w, to s\u0105 one pobierane (u\u017cytkownik otwiera aplikacj\u0119 po raz pierwszy lub w\u0142a\u015bnie wypu\u015bcili\u015bmy now\u0105 wersj\u0119 aplikacji). Natomiast je\u015bli s\u0105 ju\u017c w cache, to serwujemy je bezpo\u015brednio stamt\u0105d. Nie JavaScriptowe pliki odpytuj\u0105 serwer o zmiany i zaci\u0105gaj\u0105 body tylko je\u015bli takowe nast\u0105pi\u0142y.<\/p>\n","innerContent":["\n<p>Nie chc\u0119, \u017ceby ten materia\u0142 przekszta\u0142ci\u0142 si\u0119 w typowy tutorial, ale postaram si\u0119 przemyci\u0107 Wam kilka wskaz\u00f3wek z naszej konfiguracji. Po pierwsze index.html nie jest cachowany. Oznacza to, \u017ce przegl\u0105darka zawsze wykonuje jedno zapytanie po niewielki plik, w kt\u00f3rym znajduj\u0105 si\u0119 odno\u015bniki do JavaScriptowych bundli. Je\u015bli w cache nie ma odpowiednich plik\u00f3w, to s\u0105 one pobierane (u\u017cytkownik otwiera aplikacj\u0119 po raz pierwszy lub w\u0142a\u015bnie wypu\u015bcili\u015bmy now\u0105 wersj\u0119 aplikacji). Natomiast je\u015bli s\u0105 ju\u017c w cache, to serwujemy je bezpo\u015brednio stamt\u0105d. Nie JavaScriptowe pliki odpytuj\u0105 serwer o zmiany i zaci\u0105gaj\u0105 body tylko je\u015bli takowe nast\u0105pi\u0142y.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W powy\u017cszej implementacji jest pewna pu\u0142apka. W przypadku Service Workera pobierali\u015bmy wszystkie bundle wyplute przez kompilator. Teraz zaci\u0105gamy tylko pliki potrzebne do wyrenderowania obecnej strony. Na szcz\u0119\u015bcie Angular pozwala obs\u0142u\u017cy\u0107 t\u0105 sytuacj\u0119 przez do\u0142adowanie reszty plik\u00f3w w optymalnym momencie poprzez wykorzystanie odpowiedniej <a href=\"https:\/\/angular.io\/api\/router\/PreloadingStrategy\">strategii preloadingu<\/a>.<\/p>\n","innerContent":["\n<p>W powy\u017cszej implementacji jest pewna pu\u0142apka. W przypadku Service Workera pobierali\u015bmy wszystkie bundle wyplute przez kompilator. Teraz zaci\u0105gamy tylko pliki potrzebne do wyrenderowania obecnej strony. Na szcz\u0119\u015bcie Angular pozwala obs\u0142u\u017cy\u0107 t\u0105 sytuacj\u0119 przez do\u0142adowanie reszty plik\u00f3w w optymalnym momencie poprzez wykorzystanie odpowiedniej <a href=\"https:\/\/angular.io\/api\/router\/PreloadingStrategy\">strategii preloadingu<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Czy powinni\u015bcie teraz uda\u0107 si\u0119 prosto do Waszego kodu i usun\u0105\u0107 wszystkie Service Workery jakie stan\u0105 Wam na drodze? Najprawdopodobniej nie... Service Worker w wielu miejsach radzi sobie ca\u0142kiem nie\u017ale.  Mam natomiast nadziej\u0119, \u017ce zar\u00f3wno nasza historia i b\u0142\u0119dy jakie pope\u0142niali\u015bmy po drodze, pozwol\u0105 Wam podejmowa\u0107 decyzje w Waszych projektach.<\/p>\n","innerContent":["\n<p>Czy powinni\u015bcie teraz uda\u0107 si\u0119 prosto do Waszego kodu i usun\u0105\u0107 wszystkie Service Workery jakie stan\u0105 Wam na drodze? Najprawdopodobniej nie... Service Worker w wielu miejsach radzi sobie ca\u0142kiem nie\u017ale.  Mam natomiast nadziej\u0119, \u017ce zar\u00f3wno nasza historia i b\u0142\u0119dy jakie pope\u0142niali\u015bmy po drodze, pozwol\u0105 Wam podejmowa\u0107 decyzje w Waszych projektach.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>PS: Je\u015bli macie odmienne przemy\u015blenia na temat Service Workera to zapraszamy do dyskusja na facebooku<\/p>\n","innerContent":["\n<p>PS: Je\u015bli macie odmienne przemy\u015blenia na temat Service Workera to zapraszamy do dyskusja na facebooku<\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=10145"}],"version-history":[{"count":2,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10145\/revisions"}],"predecessor-version":[{"id":11441,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10145\/revisions\/11441"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}