2016-05-20 8 views
1

プログレッシブWebアプリケーションを作成しています。 インストールセクションで説明したガイドラインに従っています。https://github.com/GoogleChrome/sw-toolbox#installing-service-worker-toolbox 1. companion.jsへのパスをindex.html に追加しました。2.インポートスクリプト( 'bower_components/sw-toolbox/sw-toolbox.js')を追加しました。私のservice-worker.jsに転送します。sw-toolbox.jsを使用するときに「Uncaught ReferenceError:require is not defined」を取得する

しかし、デバッグした後、私は "キャッチされないのReferenceError:必要が定義されていない:サービスworker.js 18" 取得しています

サービス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 
};) 

を私として私を助けてください把握できないのですが、何が問題なのですか?

答えて

0

ブラウザーでパッケージをインポートするには、 'require.js'または 'webpack'を使用する必要があります。

関連する問題