Публичная папка React (CRA) SW Cache

После выполнения приложения create-response-app и включения рабочих служб в index.js все соответствующие файлы из папки src кэшируются. Однако некоторые из моих ресурсов находятся в каталоге public. Когда я запускаю npm run build, asset-manifest.json и precache-manifest.HASH.js содержат только HTML, искаженный JS и CSS (все материалы из папки src).

Как я могу сказать сервисному работнику, чтобы он дополнительно кэшировал определенные файлы из папки public?

Вот фактически сгенерированный precache-manifest.e431838417905ad548a58141f8dc754b.js

self.__precacheManifest = [
  {
    "revision": "cb0ea38f65ed9eddcc91",
    "url": "/grafiti/static/js/runtime~main.cb0ea38f.js"
  },
  {
    "revision": "2c226d1577937984bf58",
    "url": "/grafiti/static/js/main.2c226d15.chunk.js"
  },
  {
    "revision": "c88c70e5f4ff8bea6fac",
    "url": "/grafiti/static/js/2.c88c70e5.chunk.js"
  },
  {
    "revision": "2c226d1577937984bf58",
    "url": "/grafiti/static/css/main.7a6fc926.chunk.css"
  },
  {
    "revision": "980026e33c706b23b041891757cd51be",
    "url": "/grafiti/index.html"
  }
];

Но я хочу, чтобы он также содержал записи для этих URL-адресов:

  • /grafiti/icon-192.png
  • /grafiti/icon-512.png

Они идут из папки public.

В качестве альтернативы: как я могу добавить свои значки для файла manifest.webmanifest в папку src таким образом, чтобы я мог ссылаться на них из веб-манифеста?


create-react-app android service-worker static-files
person Constantin Berhard    schedule 23.02.2019    source источник
comment
Есть новости по этому поводу?   -  person Sailesh Kotha    schedule 07.10.2019

Ответы (1)


arrow_upward
3
arrow_downward

Я предполагаю, что вы ищете решение (как и я), которое работает без выброса. Этот подход сработал для меня:

  1. Установите модуль react-app-rewired через yarn add -D react-app-rewired

  2. Замените react-scripts в своих сценариях npm (не требуется для извлечения) внутри вашего package.json

    /* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"

  3. Создайте файл config-overrides.js на том же уровне, что и ваш package.json.

Мой файл выглядит так (потому что я также хочу добавить собственного сервис-воркера с более сложными параметрами кеширования для моего API), но globPatterns и globDirectory - это то, что вы ищете. После добавления этих шаблонов соответствующие файлы (в моем случае изображения, музыка и звуки) были добавлены в сгенерированный файл preache-manifest- {hash}.

const {InjectManifest} = require('workbox-webpack-plugin');
const path = require('path');

module.exports = {
  webpack: function(config, env) {
    config.plugins.push(
      new InjectManifest({
        globPatterns: [
          'images/*.png',
          'models/*.glb',
          'music/*.mp3',
          'sound/*.mp3'
        ],
        globDirectory: 'build',
        swSrc: path.join('src', 'custom-service-worker.js'),
        swDest: 'service-worker.js'
      })
    );

    return config;
  }
}

PS: если вам нужен файл custom-service.worker.js для его работы, workbox.precaching.precacheAndRoute([]) должно быть достаточно в качестве содержимого для этого файла, но документы рабочей панели также очень интересны для тех, кто занимается кешированием

person Fabian    schedule 24.11.2019
comment
Привет @Fabian, что делать, если у меня нет файла custom worker? как использовать по умолчанию приложение create-response-app? Благодарю. - person dli; 19.12.2019
comment
Привет, @dli, именно для этого кеша и материала для предварительного кеширования я добавил своего пользовательского сервис-воркера. :) Насколько мне известно, изменить сгенерированный сервис-воркер cra (без извлечения) невозможно. Вот почему я предложил response-app-rewired + InjectManifest, поэтому вам не нужно запускать eject. - person Fabian; 19.12.2019
comment
Спасибо @Fabian, попробую. - person dli; 20.12.2019