Неизвестный работник сервиса регистрируется - PullRequest
0 голосов
/ 12 февраля 2020

Я использую встроенный сервисный работник, найденный в create-react-app. Я зарегистрировал его в index.tsx с serviceWorker.register();. Если я создаю производственную сборку и запускаю ее, или запускаю на сервере heroku, я успешно регистрирую сервисного работника. Однако после дальнейшей проверки на вкладке «Приложение» в инструментах разработчика, я вижу service-worker.js как имя моего работника сервиса, которое НЕ то, что называется моим. Осматривая работника, он также сильно отличается от кода по умолчанию для create-реакции-приложения, его содержимое ниже -

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://developers.google.com/web/tools/workbox/guides/service-worker-checklist
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "/precache-manifest.740fac3abc44b443a1d2c6ac9789a1e1.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

workbox.core.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://developers.google.com/web/tools/workbox/modules/workbox-precaching
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {

  blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
});

Между тем работник службы создания-реакции-приложения должен выглядеть следующим образом this .

Мне интересно, откуда этот другой работник службы, и как я могу убедиться, что мой собственный зарегистрирован вместо этого?

1 Ответ

1 голос
/ 12 февраля 2020

Я не читал их обоих, но, похоже, ваш был скомпилирован / перенесен веб-пакетом в этот.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json

Этот сервис рабочий cdn - это workbox v4.3.1, который вы можете увидеть в приведенном выше пакете. json - это зависимость. Затем он используется в конфигурационном файле веб-пакета.

Typescript - это способ написать JavaScript, но его необходимо изменить на JavaScript, прежде чем его можно будет запустить в большинстве случаев.

Редактировать: где это используется

https://github.com/facebook/create-react-app/blob/589b41aecaa10d410713794f66a648bf3a72fb62/packages/react-scripts/config/webpack.config.js#L674

https://create-react-app.dev/docs/making-a-progressive-web-app/

И в заключение : serviceWorker.ts не является работником службы. Он используется для регистрации одного. Тот, который вы видите на Heroku? Это сервисный работник, на которого вы зарегистрировались, по умолчанию создайте приложение по реакции.

...