Question

如何使用 create-react-app 配置 Service Worker

2016-08-06

27309

reactjs webpack service-worker progressive-web-apps

我正在使用 create-react-app 实用程序创建一个 ReactJS 应用程序。我该如何配置它以使用包含服务工作者的文件？

编辑：对我来说，从 Javascript 方面来说很清楚，在我的 index.js 中添加注册：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service_workers/sw.js')
  .then(function(registration) {
    // Registration was successful...
  }).catch(function(err) {
    // registration failed ...
  });
}

然后我在服务工作者文件中进行配置（对我来说是在 service_wokers/sw.js 中）：

self.addEventListener('install', function(event) {//my code here...});
self.addEventListener('activate', function(event) {//my code here...});
self.addEventListener('fetch', function(event) {//my code here...});

当我运行此命令时，控制台显示： ServiceWorker 注册失败：DOMException：无法注册 ServiceWorker：获取脚本时收到错误的 HTTP 响应代码 (404)。

该文件不存在，因为我没有配置 Webpack 来执行此操作。因此，我尝试复制带有输出的 sw.js 文件：

test: 
     /\.(js)$/,
     loader: "file?name=[path][name].[ext]&context=./service_workers",
     include: '/service_worker'

我想不用说，我对 Webpack 完全不熟悉。

Answer 1

对于那些仍然为此苦苦挣扎的人，请参阅 https://create-react-app.dev/docs/making-a-progressive-web-app 。

服务工作者在 CRA 中配置并将为您处理缓存！您只需要在 src/index.js 文件中将 :-

serviceWorker.unregister();

更改为

serviceWorker.register();

即可；

此外，服务工作者仅在生产模式下工作，因此请确保在为服务工作者测试您的应用之前，先构建您的应用程序并在本地提供服务。

npm i http-server -D

然后将其添加到脚本中的 package.json 。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start-sw": "http-server ./build"
}

现在运行：-

npm run build && npm run start-sw

希望有帮助！

Answer 2

首先，你必须在 package.json 中做一些更改：

package.json 中的更改：

{
  "name": "create-react-pwa",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0",
    "sw-precache": "^4.2.2"
  },
  "dependencies": {
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && sw-precache --config=sw-precache-config.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后在项目的根文件夹中创建一个 js 文件“sw-precache-confi.js”：

sw-precache-config.js：

 module.exports = {
    stripPrefix: 'build/',
    staticFileGlobs: [
      'build/*.html',
      'build/manifest.json',
      'build/static/**/!(*map*)'
    ],
    dontCacheBustUrlsMatching: /\.\w{8}\./,
    swFilePath: 'build/service-worker.js'
};

index.html 中的更改，在 index.html 中添加服务工作者：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/service-worker.js');
        });
      }
    </script>
  </body>
</html>

完成所有操作后，在项目根目录运行 npm install ，然后运行 npm start 。

进一步阅读： https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed

Answer 3

我推荐这个名为 cra-append-sw 的库，用于向 CRA 添加自定义服务工作者。

有关如何使用它的大部分细节都在 npm 页面中，但简单来说，你只需要安装该库（npm i --save cra-append-sw）。

对你的 package.json 做一些更改：

"start": "react-scripts start && cra-append-sw --mode dev ./public/custom-sw-import.js",
"build": "react-scripts build && cra-append-sw --skip-compile ./public/custom-sw-import.js"

最后在你的公共文件夹中创建一个名为 custom-sw-import.js 的文件，你在那里编写的所有服务工作线程代码都将简单地附加到 cra 的服务工作线程中。

我可以验证这是否有效，因为我应用了同样的原理来制作我的网站 www.futurist-invenzium.com ，它演示了 PWA 提供的所有功能。

如果您想要更深入的答案，我还发现这篇博文很有帮助： https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3