Како прилагодити услужне раднике помоћу апликације цреате-респонсе-апп

Ово је наставак мог претходног поста о изградњи ПВА-а помоћу апликације цреате-респонсе-апп (ЦРА). У повезаном посту сам разговарао о томе како бисмо могли да кренемо у изградњу прилагођеног Сервице Воркер-а (СВ), а да истовремено останемо у оквиру схелл-цреате-респонсе-апп.

Да сте пратили пост (и надамо се да је успео), приметили бисте једну критичну ману. И даље је изузетно тешко развити СВ у развојном окружењу. У основи, морали бисте да измените свој СВ код, покренете процес израде, тестирате га, испеглате све грешке, освежите и поновите. Судећи по искуству, то је исцрпљујући процес.

Идемо напред и схватимо како да решимо тај проблем.

Рад у режиму за програмере

Добро, како онда да добијемо СВ који ради у дев моду, тако да можемо брзо да напишемо неки лош код и схватимо шта функционише, а шта не?

Прво, схватимо зашто то не ради у дев моду. Креирајте нови ЦРА пројекат и отворите registerServiceWorker.jsпод srcдиректоријум.

У горњој суштини, имам само одговарајући део кода. Приметићете условну проверу process.env.NODE_ENV === 'production'. Ово проверава да ли користите производну верзију. Ако не водите продукцијску изградњу, СВ ће бити замењен датотеком која не ради.

Образложење ове одлуке дато је у овом издању ГитХуб-а.

Прво покушајте да покренете yarn startапликацију и потражите СВ датотеку у прозору траке са алаткама. Ако кликнете на service-worker.jsвезу на траци са алаткама, приказаће вам се следећа датотека:

Срећом, постоји једноставно решење за ово. То је једноставан поступак у два корака.

Прво, унутар registerServiceWorker.jsдатотеке, потражите window.addEventListener('load')позив функције. Први ред је декларација swUrlкоја каже:

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

Преименујте његов service-workerдео са било чим другим. Назваћу своје service-worker-custom.js.

Друго, креирајте датотеку у свом јавном директоријуму са потпуно истим именом као и прилагођено име које сте управо смислили. Дакле, креирао бих датотеку која се зове service-worker-custom.jsунутар јавног директоријума.

Сада, унутар service-worker-custom.js, ставите једноставну изјаву дневника. Нешто као: console.log('My custom service worker').

Сада поново покрените апликацију са yarn startи требали бисте видети испис дневника у конзоли прегледача. Можда ћете морати да одјавите претходног услужног радника ако сте икада пре тога покренули предиво.

Па, ето вам. Прилагођени услужни радник којег можете безбедно покретати у режиму за програмере.

Напомена: Није паметно тестирати услужног радника у развојном окружењу изван режима приватног прегледања у прегледачу. Такође увек проверите да ли је Ажурирање при поновном учитавању означено у прозору алата за програмере приликом тестирања у режиму за програмере.

Комбинујући Дев и Прод

Сада смо смислили како да тестирамо СВ у дев моду. Међутим, такође морамо пронаћи начин да убризгамо свој прилагођени код у СВ који генерише ЦРА у производној верзији.

Ако задржите све како је са конфигурацијама које смо до сада направили и покренете процес израде и проверите изградњу у свом прегледачу, приметићете да је генерисана СВ датотека прилагођена коју смо креирали. Ово је проблем, јер желимо да будемо у могућности да комбинујемо доброту онога што нам РАК нуди са сопственим кодом.

То можемо урадити са sw-precacheбиблиотеком. Ову библиотеку сам представио у свом претходном посту. Овде је ГитХуб веза до sw-precacheбиблиотеке.

Инсталирајте библиотеку помоћу yarn add sw-precache. Када то учините, креирајте sw-precache-config.jsдатотеку у свом главном директоријуму. Ево моје датотеке:

Већину ове датотеке представио сам у претходном посту. Једина нова бит је importScriptsопција. Ово је прилично саморазумљиво, једноставно увози датотеку наведену путем, а ми покушавамо да увежемо нашу прилагођену СВ датотеку.

Приметићете да путањи датотеке недостаје ./publicпрефикс, упркос томе што је датотека присутна у нашем publicдиректоријуму. Објаснићу ти ово мало.

Сада ажурирајте своју package.jsonдатотеку модификацијом buildнаредбе. Наредите своју buildнаредбу:

react-scripts build && sw-precache --config=sw-precache-config.js

Сада се вратимо на путању до датотеке коју смо навели за опцију импортСцриптс. Ако приметите, он sw-precacheсе у суштини изводи као процес израде накнадно. Сада, ако само покренете процес градње и отворите креирани директоријум израде, приметићете своју датотеку прилагођеног услужног радника у фасцикли израде. Када пружимо пут до importScriptsопције, пружамо је у односу на директоријум изградње!

Једном када сте све то урадили, изволите и покрените верзију за изградњу верзије своје апликације и приметићете да се извештај дневника поново појављује у конзоли прегледача.

Па, ето ти! Сада можете убризгати неки прилагођени СВ код у задати СВ који генерише ЦРА!