Question

我正在创建一个渐进式网络应用。我遵循了安装部分中提到的准则：https://github.com/GoogleChrome/sw-toolbox#installing-service-worker-toolbox 1.在我的index.html中添加了companion.js的路径 2.添加了importScripts（'bower_components / sw-toolbox / sw-toolbox.js'）;到我的service-worker.js。

但是在调试之后，我得到了“Uncaught ReferenceError：require not not defined：service-worker.js 18”

service-worker.js代码：

(
/*
Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';

require('serviceworker-cache-polyfill');
var options = require('./options');
var router = require('./router');
var helpers = require('./helpers');
var strategies = require('./strategies');

helpers.debug('Service Worker Toolbox is loading');

// Install
var flatten = function(items) {
return items.reduce(function(a, b) {
return a.concat(b);
}, []);
};

var validatePrecacheInput = function(items) {
var isValid = Array.isArray(items);
if (isValid) {
items.forEach(function(item) {
if (!(typeof item === 'string' || (item instanceof Request))) {
isValid = false;
}
});
}

if (!isValid) {
throw new TypeError('The precache method expects either an array of ' +
'strings and/or Requests or a Promise that resolves to an array of ' +
'strings and/or Requests.');
}

return items;
};

self.addEventListener('install', function(event) {
var inactiveCache = options.cache.name + '$$inactive$);
helpers.debug('install event fired');
helpers.debug('creating cache [' + inactiveCache + ']');
event.waitUntil(
helpers.openCache({cache: {name: inactiveCache}})
.then(function(cache) {
return Promise.all(options.preCacheItems)
.then(flatten)
.then(validatePrecacheInput)
.then(function(preCacheItems) {
helpers.debug('preCache list: ' +
(preCacheItems.join(', ') || '(none)'));
return cache.addAll(preCacheItems);
});
})
);
});

// Activate

self.addEventListener('activate', function(event) {
helpers.debug('activate event fired');
var inactiveCache = options.cache.name + '$$inactive$);
event.waitUntil(helpers.renameCache(inactiveCache, options.cache.name));
});

// Fetch

self.addEventListener('fetch', function(event) {
var handler = router.match(event.request);

if (handler) {
event.respondWith(handler(event.request));
} else if (router.default && event.request.method === 'GET') {
event.respondWith(router.default(event.request));
}
});

// Caching

function cache(url, options) {
return helpers.openCache(options).then(function(cache) {
return cache.add(url);
});
}

function uncache(url, options) {
return helpers.openCache(options).then(function(cache) {
return cache.delete(url);
});
}

function precache(items) {
if (!(items instanceof Promise)) {
validatePrecacheInput(items);
}

options.preCacheItems = options.preCacheItems.concat(items);
}

module.exports = {
networkOnly: strategies.networkOnly,
networkFirst: strategies.networkFirst,
cacheOnly: strategies.cacheOnly,
cacheFirst: strategies.cacheFirst,
fastest: strategies.fastest,
router: router,
options: options,
cache: cache,
uncache: uncache,
precache: precache
};)

请帮助我，因为我无法弄清楚，这有什么问题？

Answer 1

您应该使用'require.js'或'webpack'在浏览器中导入包。

使用sw-toolbox.js时，获取“未捕获的ReferenceError：require未定义”

1 个答案: