Getting "Uncaught ReferenceError: require is not defined" when using sw-toolbox.js

[acircuit]

I am creating a Progressive web app. I have followed the guidelines as mentioned in the install section : https://github.com/GoogleChrome/sw-toolbox#installing-service-worker-toolbox

1. Added path to companion.js to my index.html
2. Added importScripts('bower_components/sw-toolbox/sw-toolbox.js'); to my service-worker.js.

But after debugging, i am getting "Uncaught ReferenceError: require is not defined : service-worker.js 18"

service-worker.js code :

(
/*
  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
};)

Please help me as i am not able to figure out, what is wrong with this?

[wibblymat]

What exactly did you do for the install step? That looks like the raw code, while the version we ship with NPM and Bower is a compiled version (see https://github.com/GoogleChrome/sw-toolbox/blob/v3.1.1/sw-toolbox.js for the latest)

[acircuit]

Is there any way i can check whether my service worker is doing runtime caching. I am using service worker toolbox to cache my content. Service worker code to cache my content :

toolbox.router.get('/(.)', toolbox.fastest); toolbox.router.post('/(.)', toolbox.fastest); toolbox.router.get('/(.)', toolbox.fastest, {origin: 'https://example.cloudfront.net'}) toolbox.router.get('/(.)', toolbox.fastest, {origin: 'https://example.in'})

The code is running fine as i am not seeing any error in the console. But how can i check whether the images from cloudfront are getting cached and rendered from the cache itself.

[dheerajgoyal38]

is there any workaround available for this?

[kapoorji]

You can check your cache name passed in route in chrome dev tools(Application -> cache Storage).