React-Snap с Create-React-App и сервисными работниками

Question

Итак, мое понимание таково, что реагирует на привязку в соответствии с его функциями: "Работает" из коробки "с созданием приложения, никаких изменений кода не требуется".

Я прочитал документацию и понял, что для работы с Google Analytics потребовались некоторые изменения, которые я реализовал.

Тем не менее, он также предлагает внести изменения, если кто-то собирается использовать работника службы по умолчанию, который поставляется с CRA.

https://github.com/stereobooster/react-snap

Однако, что сбивает с толку, так это то, что кажется, что нужно выполнить EJECT, чтобы внести необходимые изменения.

navigateFallback: publicUrl + '/index.html',

Вам нужно изменить это на непредставленную версию index.html - 200.html, в противном случае вы увидите, что index.html будет мигать на других страницах (если они у вас есть). См. Настройка sw-precache без извлечения для получения дополнительной информации.

Мой вопрос - и заметьте, я довольно новичок - нужно ли изгонять? Я вроде хочу, чтобы все было просто. Единственное место, где я мог найти эту строку, было в WebPack. navigateFallback

Кроме того, если я не вижу отрицательной стороны вспышек на страницах в соответствии с документацией, можно ли пропустить этот шаг или возникнут проблемы с другими вещами?

Answer 1

Хотя этому вопросу больше года, я хотел бы воспользоваться возможностью, так как мне удалось реализовать сервис-воркеры в react-snap (хотя и с разной степенью успеха).

Вот ссылка на стереобустер в GitHub:https://github.com/stereobooster/react-snap/blob/master/doc/recipes.md#configure-sw-precache-without-ejecting

Вы можете настроить его, не выбрасывая. Что вам нужно сделать, это следующее: Скачать и установить sw-precache и ugfify-js:

  npm install sw-precache uglify-js --save-dev
  or
  yarn add sw-precache uglify-js -D

Затем в свой package.json добавьте следующие записи: (Замените скрипт сборки следующим)

"scripts": {
    "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
    "build": "react-scripts build && react-snap && yarn run generate-sw"
}

Затем создайте папку на корневом уровне (рядом с вашим package.json) с именем scriptsи добавить sw-precache-config.js файл.

module.exports = {
  // a directory should be the same as "reactSnap.destination",
  // which default value is `build`
  staticFileGlobs: [
    "build/static/css/*.css",
    "build/static/js/*.js",
    "build/shell.html",
    "build/index.html"
  ],
  stripPrefix: "build",
  publicPath: ".",
  // there is "reactSnap.include": ["/shell.html"] in package.json
  navigateFallback: "/shell.html",
  // Ignores URLs starting from /__ (useful for Firebase):
  // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  // By default, a cache-busting query parameter is appended to requests
  // used to populate the caches, to ensure the responses are fresh.
  // If a URL is already hashed by Webpack, then there is no concern
  // about it being stale, and the cache-busting can be skipped.
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  // configuration specific to this experiment
  runtimeCaching: [
    {
      urlPattern: /api/,
      handler: "fastest"
    }
  ]
};

Обратите внимание: если вы не используете оболочку приложения, но загружаете всю страницу (что означает отсутствие динамического содержимого), замените там, где написано navigateFallback: "/shell.html" с участием navigateFallback: "/200.html"

Это в основном позволяет кэшировать всю страницу

Вы можете найти дополнительную информацию здесь:https://github.com/stereobooster/an-almost-static-stack

Одна вещь, которую я бы рекомендовал проверить (я тоже близок к тому, чтобы начать этот процесс), - это workbox-sw.

Что делать, если React-Snap не работает

ошибка в / TypeError: невозможно прочитать свойство 'ok', равное нулю

Или же

ОШИБКА: процесс с PID 38776 (дочерний процесс PID 26920) не может быть завершен. \node_modules\minimalcss\src\run.js:13:35) Причина: нет запущенного экземпляра задачи.

Вы можете получить эти печально известные ошибки. Я не знаю точно, что их вызывает, но знаю, что они упоминаются здесь и здесь. В этом случае удалите build папку, откройте новое окно терминала и повторите попытку.

Если проблема не исчезла, разбейте сценарий:

Делать:

"scripts": {
  "build":  "react-scripts build"
  "postbuild": "react-snap",
  "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
}

И попробуйте запустить их самостоятельно.