Allow users to disable web app manifest injection in PWA plugin

[kmohrf]

What problem does this feature solve?

I’m currently implementing an app for community radios called thekno. This app should only have one build so that other radios can use it as-is and is configurable via a JSON file that is loaded at runtime and contains data on the primary API endpoint, livestream and trackservice endpoints, social profiles, and so forth.

I’d like to include the possibility to add a PWA configuration in this file, similar but not necessarily the same as the PWA plugin configuration that includes information on theme color, icons, etc. But right now the PWA plugin injects a manifest on its own which I have to configure up-front at build time. I’d like to keep all the service worker logic that the PWA plugin manages for me but disable the default web app manifest. That way the PWA plugin would take care of any service worker related tasks but allows me to inject a web app manifest at runtime.

What does the proposed API look like?

I‘d like to introduce a boolean field called disableWebAppManifestInjection that controls web app manifest injection at build time. Any other name for this field is fine with me.

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    disableWebAppManifestInjection: true,
 
    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  }
}

[LinusBorg]

How about this

"build": "vue-cli-service build && rm dist/manifest.json"

[kmohrf]

That would still leave the generated index.html with a lot of code that I’d have to remove. There are quite a bunch meta tags (msapplication-TileImage, apple-touch-icon, …) and though I probably could filter these out in some post-processing step, I’d have to keep tabs on the content the PWA plugin injects.

I’d understand if this is a feature that is so rarely needed it doesn’t justify a new configuration option. Just thought I bring it up before I hack around it :).

[LinusBorg]

chainWebpack: config => config.plugins.delete('pwa')

You might be interested in learning about the inspect command which will allow you to inspect the current webpack config, find which plugins etc it uses and then manipulate those with the chainWebpack API.

[LinusBorg]

Just realized this plugin should be meantioned in cli-pwa's README but isn't.

[kmohrf]

That seems like a viable solution to me :).

[parker-codes]

For anyone needing a clean fix, we removed @vue/cli-plugin-pwa from devDependencies and then skipped the plugin when running vue-cli, like:

"serve": "vue-cli-service serve --skip-plugins pwa",
"build": "vue-cli-service build --modern --skip-plugins pwa",

[matrunchyk]

I still need a PWA plugin, but don't want manifest.json to be injected (I create & inject it manually).
So this flag would be a nice solution for my case.

[jordib123]

+1. Some option to disable auto injection would be nice. The problem I currently have is that we have dynamic customer pages f.e. https://example.com/customer1, https://example.com/customer2, ... The pages all have different logo, favicon, app name, ... based on the customer but because these properties are all auto injected in index.php during build we are unable to create dynamic PWAs.

[nicklasos]

Fixed this issue in Dockerfile

RUN npm install
RUN npm run build-stage

RUN sed -i 's|| |g' /var/www/html/dist/index.html
RUN rm /var/www/html/dist/manifest.json