Can't get InjectManifest to work

[tamirvs]

I've tried to use this plugin with the InjectManifest option:

// gridsome.config.js

module.exports = {
  plugins: [
   {
      use: '@allanchain/gridsome-plugin-pwa',
      options: {
        name: 'timee',
        theme: '#424242',
        icon: './src/favicon.png',
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
          swSrc: './src/service-worker.js',
          /*exclude: [
            '_redirects',
            'netlify.toml',
            /^img\/.+\.svg$/
          ]*/
        },
      }
    }
  ]
}

// service-worker.js

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

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  new NavigationRoute(createHandlerBoundToURL('index.html'))
);

The build is successful, but I get this error in the browser console:

Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('http://localhost:5000/') with script ('http://localhost:5000/service-worker.js'): ServiceWorker script evaluation failed

And for some reason, index.html is not being precached.

Do you have a working example of how to configure the InjectManifest method?

[AllanChain]

To be honest, I haven't fully tested InjectManifest mode. I just test the option passed to workbox-webpack-plugin is correct not correct now. And I will try to provide an example.

And for some reason, index.html is not being precached.

This is expected. index.html is not webpack asset. And precaching all pages may impact performance. You can still precache index by additionalManifestEntries workbox option (in workbox v5 :smile:). But I personally prefer runtime caching for pages.

[AllanChain]

Working on branch injectManifest :)

[tamirvs]

This is expected. index.html is not webpack asset.

On the first load I get the error i mentioned, but after refresh I get this:

Uncaught non-precached-url: non-precached-url :: [{"url":"index.html"}]

[AllanChain]

Released as v0.2.5

However, precaching non-asset files still sucks. If you want to precache with revision, you need to manually provide the revision.

Maybe I will switch to workbox-build in v0.3.0

[tamirvs]

Thank you for the quick response! I've created a simple app to test it and it works.

However, precaching non-asset files still sucks. If you want to precache with revision, you need to manually provide the revision.

Are you refering to /index.html? Does it mean this file will not be updated for users after the first cache?

[AllanChain]

Yes, at this time you should pass revision to workbox options manually.

I didn't realize the need to precache index.html. I will use workbox-build which support precaching html files, and publish v0.3.0 in this week.

---

Edit: Oh no! I forgot that service-worker.js cannot be complied by webpack if using workbox-build!

[tamirvs]

Do you know how vue-cli handles this issue? Their PWA plugin works well

[AllanChain]

@tamirvs vue-cli uses workbox-webpack-plugin but is different because index.html is an asset. Gridsome renders html after webpack building assets. Nuxt has its own sw template and is not friendly to injectManifest.

It's possible to build service-worker.js first, and inject manifest after build. But it's tricky to handle config (e.g. swSrc in config is not swSrc for workbox-build)

[tamirvs]

I don't fully understand the build process of Gridsome but I can't use sha1 of index.html as a revision because it is built only after the service worker? As a quick and dirty solution I guess I could use a randomHash() of some sort for the revision then?

[AllanChain]

Yes. And you can simply use build time as revision.

---

🎉 Released v0.3.0-alpha.0 which use workbox-build and automatically compiles your service-worker.js

[tamirvs]

Amazing! I will look at your commit to try and understand how the hell this thing works