web-dev-qa-db-ja.com

create-react-appを使用してService Workerを構成する方法

Create-react-appユーティリティを使用してReactJSアプリを作成しています。 Service Workerを含むファイルを使用するように構成するにはどうすればよいですか？

[〜＃〜] edit [〜＃〜]：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...});

これを実行すると、コンソールに次のメッセージが表示されます。

Webpackを構成していないので、ファイルはそこにありません。だから私はsw.jsファイルをouputでコピーしようとしています：

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

私はWebpackがまったく新しいと言う必要はないと思います。

reactjswebpackservice-workerprogressive-web-apps
14
LilSap

まず、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

8
Mohammad shaban

カスタムサービスワーカーをCRAに追加するには、このライブラリ cra-append-sw をお勧めします。

使用方法の詳細のほとんどは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"

最後に、public-sw-import.jsという名前のパブリックフォルダーにファイルを作成すると、そこに記述するすべてのService WorkerコードがcraのService Workerに追加されます。

私は自分のウェブサイト www.futurist-invenzium.com に同じ原則を適用して、PWAが提供するすべての機能のデモを提供するので、この動作を検証できます。

より詳細な回答が必要な場合は、このブログ投稿が役立つこともわかりました： https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and- custom-service-workers-376bd1fdc6d

3
AkhileshNS

サービスワーカーとオフライン機能がcreate-react-appビルドに含まれるようになりました。 this pr を参照してください

0
Will Farley