Wpis z mikrobloga

Pytanie do bardziej zaawansowanych mireczków. W jaki sposób radzicie sobie z aktualizacjami Service Workerów gdy zachodzi jakaś drastyczna zmiana gdzie front nie jest już kompatybilny z backendem?

Jak nie używamy SW to wszystko jest w porządku bo gdy user wchodzi na stronę to dostaje zawsze aktualne źródła ale jeżeli mamy odpalonego SW to źródła są cache'owane. No i problem pojawia się gdy np. user ma wersję frontu np. 1.0, a backend dla ułatwienia to też 1.0. Następnie do backendu wprowadzana jest drastyczna zmiana i nadaje się wersję 2.0 i dostosowuje się front do tej ważnej zmiany i dla porządku też to jest 2.0. User teraz wchodzi na stronę, ładuje mu SW źródło 1.0 a strzela pod backend 2.0 i jest dupa bo nie działa. Wiem, że właśnie m.in. po to jest SW żeby dla wygody użytkownika ładować mu cache (bo szybciej) + zaciąga w tle nowe źródła i front 2.0 będzie już przy następnym odświeżeniu strony ale co z takim fantem zrobić? Jakie są sposoby i pomysły?

Jedyne co mi przychodzi do głowy to przy każdym odpaleniu aplikacji sprawdzać wersję z package.json z wersją wystawioną pod jakimś endpointem i jeżeli jest różne to wymuszać przeładowanie przez location.reload(); ale wydaje się to mega słabe.

#webdev #react może ktoś z #angular podpowie
  • 7
  • Odpowiedz
@Rst00 po pierwsze odpalony SW nie równa się automatycznemu cashowaniu je trzeba dodać osobno po dwa jak już dodasz "wersjonuj" cash np pierwsze cashowanie cash V1 jak zmieszać dajesz cashev2 czyść stary i ładuj nowy( ͡° ʖ̯ ͡°). A tak nawiasem robisz apke ?
  • Odpowiedz
@Nicescroll: no tak, ja to wiem. Użyłem może zbyt dużego skrótu myślowego. Korzystam z praktycznie niezmodyfikowanego SW jak jest w create-react-app: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template-typescript/src/serviceWorker.ts z TSem. Tu widać od 77 linijki:

// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are
  • Odpowiedz
@Rst00 po pierwsze nie #!$%@? widoków jak masz dynamiczne dane nigdy, tylko zasoby. Po drugie jak masz nazwę cashu daj porostu caches.delete(nazwa cashu) po trzecie użyj cyklu życia 'activate' całą akcję zrób to w asyncu i chyba że nie lubisz to promiska, najlepiej na activate To nie jest gotowe rozwiązanie
  • Odpowiedz
@Nicescroll: ale czekaj, to ja w takim razie nie rozumiem. Mam wypluty gotowy zbundlowany plik js, który jest zasobem czyli on się normalnie cache'uje. SW go ładuje na start, ale jak jest nowa jego wersja to go pobiera ale trzyma w tle. User ma nadal wyświetloną stronę ze starym bundlem. No i nie do końca rozumiem co mi da cashes.delete skoro mam już gotowy widok, usunięcie w tym momencie cache'a
  • Odpowiedz
@Rst00: SW ma kilka cykli życia https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API W activate najlepiej robić takie rzeczy jak czyszczenie cashu. No twojego tarego bundla nie ma bo mu czyścisz cashe, jeśli nie pasuje do nowej wersji ale musisz zmienić jego nazwę, wersję jak tam sobie go popisałeś np cashe1 na cashe 2.

Myślałem, że znasz workery dlatego pisałem nieco hmm inaczej pomijając szczegóły. Jak user wchodzi na stronę tak, odpala wokera, ten sprawdza cashe
  • Odpowiedz
@Nicescroll: ok zaczynam łapać, muszę w takim razie bardziej zgłębić temat i API ale dobrze wiedzieć że da się to zrobić w cywilizowany sposób. Dzięki :)
  • Odpowiedz