title: Serviceworker never gets activated or receives messages but workbox functionality works on subpaths
body: <p>In my current project using webpack with (<code>workbox-webpack-plugin</code>) and workbox (with <code>workbox-window</code>) I have encountered an error where the serviceworker will never respond to messages when the page is loaded at a "deep url", like "/my-path/is-nested".
  It will work on "/my-path".</p>
  
  <p>In a minimal reproducible environment, this is supposed to happen.</p>
  
  <ul>
  <li>In a new tab, app is accessed (e.g. via <code>https://my-app.my-name.company-dev-envs.cloud/some-unique-id</code>)</li>
  <li>ServiceWorker gets registered via workbox (<code>.register()</code>)</li>
  <li>upon registration, <code>messageSW</code> is used to ask for the SWs "version"</li>
  <li>ServiceWorker responds using <code>event.ports[0].postMessage</code> with a string indicating the version</li>
  </ul>
  
  <p>Is the site accessed in a "deep" path, like /some-unique-id/test, the messaging will never work.</p>
  
  <p>Workbox does successfully "register" - but no events will be fired (except <code>externalactivated</code> when <code>Update on Reload</code> in the Application > Service Worker Tab is selected)
  The serviceworker will be reported as "active and running" with no other service workers displayed. It seems to handle fetches okay too. Only messages and events never respond/fire via the <code>wb</code> Workbox Window instance.</p>
  
  <p>The "application" tab reports the service worker as active and running:
  <a href="https://i.stack.imgur.com/RaSe9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RaSe9.png" alt="application &gt; service worker tab displaying sw correctly"></a></p>
  
  <p>index.js (main entry for application)</p>
  
  <pre class="lang-js prettyprint-override"><code>/* globals window, System */
  import './offline';
  
  // [...]
  </code></pre>
  
  <p>offline.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Workbox } from 'workbox-window';
  
  if ('serviceWorker' in navigator) {
    const wb = new Workbox('./sw.js');
  
    const attachDebugEventHandlers = (events) =&gt; {
      events.forEach((eventName) =&gt; {
        wb.addEventListener(eventName, () =&gt; {
          console.log(`[workbox sw] ${eventName} triggered`);
        });
      });
    };
  
    attachDebugEventHandlers([
      'activated',
      'controlling',
      'externalactivated',
      'externalinstalling',
      'externalwaiting',
      'installed',
      'message',
      'redundant',
      'waiting',
    ]);
  
    wb.register()
      .then((registration) =&gt; {
        console.log('workbox sw register successful');
  
        console.log("sending message")
        wb.messageSW({ type: 'GET_VERSION' }).then((ver) =&gt; console.log(`[workbox sw] version reported as ${ver}`))
      })
      .catch((err) =&gt; {
        console.error('[workbox sw] could not activate sw', err);
      });
  </code></pre>
  
  <p>sw.js</p>
  
  <pre><code>const SW_VERSION = '1.0.0';
  
  console.log("sw loaded")
  
  import {createHandlerBoundToURL, precacheAndRoute} from 'workbox-precaching';
  import { NavigationRoute, registerRoute } from 'workbox-routing'
  
  // auto generate from webpack manifest
  precacheAndRoute(self.__WB_MANIFEST, {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/] // main.js is loaded with a version hash
  });
  
  self.addEventListener('message', event =&gt; {
    console.log(`[Message] event: `, event.data);
  });
  self.addEventListener('install', function(event) {
    event.waitUntil(self.skipWaiting());
  });
  self.addEventListener('activate', (event) =&gt; {
    event.waitUntil(self.clients.claim())
  })
  
  addEventListener('message', (event) =&gt; {
    console.log("message")
    if (event.data &amp;&amp; event.data.type) {
      if (event.data.type === 'GET_VERSION') {
        event.ports[0].postMessage(SW_VERSION);
      }
    }
  })
  
  const handler = createHandlerBoundToURL('/index.html');
  const navigationRoute = new NavigationRoute(handler);
  registerRoute(navigationRoute);
  </code></pre>
  
  <p>webpack.config.js (shortened for brevity)</p>
  
  <pre class="lang-js prettyprint-override"><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  const WorkboxPlugin = require('workbox-webpack-plugin');
  
  module.exports = {
    devtool: 'eval-source-map',
    module: {
      rules: [
        {
          test: /\.(jsx?)$/,
          include: [
            path.resolve(__dirname, 'src'),
          ],
          use: ['babel-loader'],
        },
        // [...] (style loading)
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
            },
          ],
        },
      ],
    },
    devServer: {
      historyApiFallback: true,
      disableHostCheck: true
    },
    plugins: [
      // [...]
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'src/html/index.html')
      }),
      // [...]
      new WorkboxPlugin.InjectManifest({
        swSrc: './src/sw.js',
        swDest: 'sw.js',
        maximumFileSizeToCacheInBytes: 12 * 1024 * 1024,
      }),
    ],
  };
  </code></pre>
  
  <p>Versions used:</p>
  
  <pre><code>    "webpack": "^4.33.0",
      "webpack-cli": "^3.3.2",
      "workbox-window": "^5.1.3"
      "workbox-webpack-plugin": "^5.1.3"
  </code></pre>
  
  <p><strong><a href="https://laughing-nightingale-1e6e9e.netlify.app/" rel="nofollow noreferrer">Checkout this Demo to see the issue</a></strong> (<a href="https://gitlab.com/andre-meyer/service-worker-issue-repro" rel="nofollow noreferrer">Source</a>)</p>