我正在嘗試使用 create-react-app 中的服務工作者，但我不斷收到...不會注冊 sw。當前環境：開發

Question

我正在使用 create-react-app 但 service worker 不工作。 我使用本地主機

我正在嘗試使其成為 PWA，我正在使用創建反應應用程序時生成的庫存清單文件和服務工作者，我還 rand npm run-script build 並獲得了生成的 service-worker.js 文件. 問題是我一直在控制台中得到這個。 不會注冊sw。 當前環境：開發幫助？

window.addEventListener("load", () => {
   const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

   if (isLocalhost) {
    // This is running on localhost. Let's check if a service worker 
       still exists or not.
        checkValidServiceWorker(swUrl, config);

    // Add some additional logging to localhost, pointing developers to 
      the
    // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            "This web app is being served cache-first by a service " +
              "worker. To learn more"
          );
        });
      } else {
        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);
      }
    });
  } else {
    console.log("wont register sw. Current env:", process.env.NODE_ENV);
  }
}

Answer 1

以下是步驟：

第 1 步：需要在public文件夾中創建一個新的 JavaScript 文件： svcWorker.js 。 在其中添加以下代碼：

var CACHE_NAME = 'task-manager-pwa';
var urlsToCache = [
  '/',
  '/completed'
];

// Install service worker
self.addEventListener('install', event => {
  // Perform the install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Cache opened');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return the requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Return response as Cache is hit 
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update service worker
self.addEventListener('activate', event => {
  var cacheWhitelist = ['task-manager-pwa'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

第 2 步：更改 index.html 文件以檢查客戶端瀏覽器是否支持 Service Worker，以及應用程序是否呈現樣式並正常工作，而沒有任何 JavaScript 加載痕跡。 在<style> </style>和<body> </body>標簽之間添加了用於此的代碼。 這是 index.html 中的完整代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo512.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React PWA App</title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .navbar {
        background-color: #4169e1;
      }
      .navbar h3 {
        display: inline-block;
        text-align: left;
        padding: 10px;
        color: black;
        text-decoration: none;
      }
      .navbar a {
        display: inline-block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
      }
      .page-info {
        padding: 10px;
      }
      .Current {
        color: #2e8b57;
      }
      .Completed {
        color: #ff6347;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <noscript>Enable JavaScript to run this app.</noscript>
    <div id="root">
      <div class="navbar">
        <h3>Task Manager</h3>
        <a href="/">Present Tasks</a>
        <a href="/completed">Finished Tasks</a>
      </div>
      <p class="page-info">
        App Loading...
      </p>
    </div>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('svcWorker.js').then(function(registration) {
            console.log('Worker registration is successful', registration.scope);
          }, function(err) {
            console.log('Worker registration has failed', err);
          }).catch(function(err) {
            console.log(err);
          });
        });
      } else {
        console.log('Service Worker is not supported by your browser.');
      }
    </script>
  </body>
</html>

第 3 步：在 index.js 中，確保使用： serviceWorker.register()以下是index.js 中的代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();

我已經在我的博客文章中編寫了所有這些步驟和其他步驟來創建一個簡單的 React PWA 應用程序，並在 GitHub 中使用工作代碼。 請參考： http : //softwaredevelopercentral.blogspot.com/2019/10/react-pwa-tutorial.html

Answer 2

主要認為您需要知道：在公共文件夾中創建 servieWorker 以便將其視為 .js 文件而不是 text/html 文件。

然后在您的 index.js 中注冊該服務

第一步，創建public/sw.js

self.addEventListener('message', async (event) => {
  console.log('Got message in the service worker', event);
});

第二步，創建src/sw-register.js

export default function LocalServiceWorkerRegister() {
  const swPath = `${process.env.PUBLIC_URL}/sw-build.js`;
  if ('serviceWorker' in navigator && process.env.NODE_ENV !== 'production') {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register(swPath).then(registration => {
        console.log('Service worker registered');
      });
    });
  }
}

第三步，在src/index.js 中，添加這兩行

import LocalServiceWorkerRegister from './sw-register';
...
LocalServiceWorkerRegister();

您可以根據需要更改一些內容，但是通過這些更改，您應該能夠在 create-react-app 應用程序中使用自定義服務工作者

我正在嘗試使用 create-react-app 中的服務工作者，但我不斷收到...不會注冊 sw。當前環境：開發

問題描述

2 個解決方案

解決方案1
4 2019-10-25 19:20:31

解決方案2
3 2020-05-13 14:02:23

我正在嘗試使用 create-react-app 中的服務工作者，但我不斷收到...不會注冊 sw。 當前環境：開發

問題描述

2 個解決方案

解決方案1 4 2019-10-25 19:20:31

解決方案2 3 2020-05-13 14:02:23

我正在嘗試使用 create-react-app 中的服務工作者，但我不斷收到...不會注冊 sw。當前環境：開發

解決方案1
4 2019-10-25 19:20:31

解決方案2
3 2020-05-13 14:02:23