How to make site available offline using Laravel Mix Workbox

Question

I have a Laravel Vue PWA using Laravel Mix Workbox.

In webpack.mix.js I have:

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .generateSW({
        additionalManifestEntries: [{url: 'index.php', revision: '1'}]
    })

Note here I have manually added index.php as an additional manifest entry. This is because the html contained in index.php is my application shell and needs to be cached in order to make my application available offline.

In my main app.js I have:

import { Workbox } from 'workbox-window'
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'
import { registerRoute, NavigationRoute } from 'workbox-routing'

if ('serviceWorker' in navigator) {

    const wb = new Workbox('/service-worker.js')

    precacheAndRoute([
        { url: '/index.php', revision: '383676' }
    ])

    const handler         = createHandlerBoundToURL('/index.php')
    const navigationRoute = new NavigationRoute(handler)
    registerRoute(navigationRoute)

    wb.register()
}

I'm using Workbox Window as it claims to make everything easier.

Note I'm calling precacheAndRoute here as otherwise I get the error createHandlerBoundToURL('/index.php') was called, but that URL is not precached. I don't understand why this is necessary as I can see that index.php is already in the array passed to precacheAndRoute in my server-worker.js.

I have tried using Workbox Window messageSW function instead passing 'CACHE_URLS' with index.php but this didn't fix the error.

The aim of this bit of code is to register a navigation route so I can return specific response for all navigation requests as per Google's documentation on navigation requests.

I can now view the site in Chrome, see the service worker is installed, but when I check "Offline" and reload the page I just get the message "No internet".

Looking at the network I can see the request to /dashboard is failing.

How can I make my site work offline?

And why isn't the service worker using the cached index.php to respond to the request?