Question

我是service workers的新人，刚刚开始学习它们。我已经读过，当我在自己的服务工作者中使用CRA时，我需要eject。

我现在的问题是，为什么我可以通过修改index.js中的这些行来实现CRA中我自己的服务工作者，或者我是否会错过某些内容？为什么这不起作用。也许有人可以给我一个解释。我确定，我忘了考虑一些问题，但我想明白，为什么这不起作用。提前谢谢。

我开始以这种方式修改index.js：

import registerServiceWorker from './registerServiceWorker';

到

import registerMyServiceWorker from './registerMyServiceWorker';

并致电

registerMyServiceWorker();

而不是

registerServiceWorker();最后。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerMyServiceWorker from './registerMyServiceWorker';

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

registerMyServiceWorker：

export default function registerMyServiceWorker() {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('service-worker.js').then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }
}

服务worker.js：

var CACHE_NAME = 'service-worker-test-app-v1';
var urlsToCache = [
  '/',
  '/index.html',
  '/favicon.ico'
  '/static/js/bundle.js',
  'sockjs-node/info',
  'sockjs-node/718/yzsjlzx4/websocket'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache - public');
        return cache.addAll(urlsToCache);
      })
      .catch(function(err) {
          console.log('Error: ' + err);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

在create-react-app中拥有自己的服务工作者

0 个答案: