`runtimeCaching` doesn't use the `directoryIndex` option

Library Affected: workbox-runtime-caching

Browser & Platform: Google Chrome 72.0

Issue or Feature Request Description: runtimeCaching doesn’t seem to use the directoryIndex option. I want to serve and cache /index.html with runtimeCaching networkFirst approach, for all the routes ending in /.

Using urlPattern: 'index.html' doesn’t seem to work at all, while using urlPattern: /\/$/, makes every different pathname ending in / to be cached separately.

generateSW config

{
    skipWaiting: true,
    clientsClaim: true,
    exclude: [
        /\.map$/,
        /^manifest.*\.js$/,
        'index.html'
    ],
    runtimeCaching: [
    {
        urlPattern: '/\/$/',
        // Apply a network-first strategy.
        handler: 'networkFirst',
    }]
}

service-worker.js

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

importScripts(
  "/precache-manifest.32b375c53995d3f7716830693a179759.js"
);

workbox.core.setCacheNameDetails({prefix: "web"});

workbox.skipWaiting();
workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerRoute("index.html", workbox.strategies.networkFirst(), 'GET');

[franciscolourenco]

@guins @jeffposnick how do you import workbox in the GenerateSW configuration file?

[jeffposnick]

runtimeCaching doesn’t seem to use the directoryIndex option.

Yup, directoryIndex only applies to precaching.

I want to serve and cache /index.html with runtimeCaching networkFirst approach, for all the routes ending in /.

You’re going to need to write a custom handler to do that. Based on what you describe, the following would work:

runtimeCaching: [{
    urlPattern: new RegExp('/$'),
    handler: ({event}) => {
      const strategy = new workbox.strategies.NetworkFirst();
      return strategy.makeRequest({
        request: '/index.html',
        event,
      });
    },
  }],