Question

我正在使用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来执行此操作。所以我试图用ouput复制sw.js文件：

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

我认为没有必要说我对Webpack完全不熟悉。

Answer 1

首先，您必须在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文件＆＃34; sw-precache-confi.js＆＃34;在项目的根文件夹中：

SW-预缓存-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 2

我建议使用这个名为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

Answer 3

针对仍在为此奋斗的人们。请参阅https://create-react-app.dev/docs/making-a-progressive-web-app。

服务工作者在CRA中配置，并将为您处理缓存！您只需要更改：-

serviceWorker.unregister();

到

serviceWorker.register();

在您的src/index.js文件中；

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

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 4

现在应该在create-react-app构建中包含服务工作者和离线功能，请参阅this pr

如何使用create-react-app配置服务工作者

4 个答案:

package.json中的更改：

SW-预缓存-config.js：

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