title: Service Worker termination by a timeout timer was canceled because DevTools is attached
body: <p>OS: Windows 10 Pro<br>
  webpack: 1.14.0<br>
  sw-precache-webpack-plugin: 0.9.1<br>
  sw-precache: 5.0.0</p>
  
  <p>So, I launch my site and don't actively do anything for a few moments, and then the above specified error message is generated in devTools. If some process is carried out, the the error does not arise</p>
  
  <p>My React code is as follows:</p>
  
  <p>webpack.config.prod.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var path = require('path');
  var webpack = require('webpack');
  var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
  
  module.exports = {
    devtool: 'source-map',
    context: __dirname,
    entry: {
      main: path.resolve(__dirname, './client/app'),
    },
    output: {
      path: path.join(__dirname, '/public'),
      filename: 'bundle.js',
      publicPath: '/public/'
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': "'production'"
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false
        }
      }),
      new SWPrecacheWebpackPlugin(
        {
          cacheId: 'flamingoCity',
          filename: 'my-service-worker.js',
          stripPrefix: path.join(__dirname, 'public').replace(/\\/g,"/"),
          maximumFileSizeToCacheInBytes: 6194304,
          minify: true,
          runtimeCaching: [{
            handler: 'cacheFirst',
            urlPattern: /[.]mp3$/,
          }],
        }
      ),
    ],
    module: {
      loaders: [
      // js
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'client')
      },
      // CSS
      { 
        test: /\.styl$/, 
        include: path.join(__dirname, 'client'),
        loader: 'style-loader!css-loader!stylus-loader'
      }
      ]
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>/*
    Import Dependencies
  */
  import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import { Router, Route, IndexRoute } from 'react-router'
  import 'babel-polyfill';
  
  /*
    Import Components
  */
  import App from './components/App';
  import Single from './components/Single';
  import PhotoGrid from './components/PhotoGrid';
  
  /* Import CSS */
  import css from  './styles/style.styl';
  
  /* Import our data store */
  import store, { history } from './store';
  
  /*
    Error Logging
  */
  
  import Raven from 'raven-js';
  import { sentry_url } from './data/config';
  if(window) {
    Raven.config(sentry_url).install();
  }
  
  /*
    Register Service Worker
  */
  
  if('serviceWorker' in navigator  &amp;&amp; process.env.NODE_ENV === 'production') {
    navigator.serviceWorker.register('./my-service-worker.js').then(function(reg) {
    // updatefound is fired if my-service-worker.js changes.
    reg.onupdatefound = function() {
      // The updatefound event implies that reg.installing is set; see
      // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
      var installingWorker = reg.installing;
  
      installingWorker.onstatechange = function() {
        switch (installingWorker.state) {
          case 'installed':
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and the fresh content will
              // have been added to the cache.
              // It's the perfect time to display a "New content is available; please refresh."
              // message in the page's interface.
              console.log('New or updated content is available.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a "Content is cached for offline use." message.
              console.log('Content is now available offline!');
            }
            break;
  
          case 'redundant':
            console.error('The installing service worker became redundant.');
            break;
        }
      };
    };
    }).catch(function(e) {
      console.error('Error during service worker registration:', e);
    });
  }
  
  /*
    Rendering
    This is where we hook up the Store with our actual component and the router
  */
  render(
    &lt;Provider store={store}&gt;
      { /* Tell the Router to use our enhanced history */ }
      &lt;Router history={history}&gt;
        &lt;Route path="/" component={App}&gt;
          &lt;IndexRoute component={PhotoGrid} /&gt;
          &lt;Route path="/view/:postId" component={Single}&gt;&lt;/Route&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is the issue here?</p>