@kdujs/cli-plugin-pwa NPM

@kdujs/cli-plugin-pwa

pwa plugin for kdu-cli

Configuration

Configuration is handled via the pwa property of either the kdu.config.js file, or the "kdu" field in package.json.

pwa.workboxPluginMode
This allows you to the choose between the two modes supported by the underlying workbox-webpack-plugin.
- 'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app.
- 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it.
The "Which Plugin to Use?" guide can help you choose between the two modes.
pwa.workboxOptions
These options are passed on through to the underlying workbox-webpack-plugin.
For more information on what values are supported, please see the guide for GenerateSW or for InjectManifest.
pwa.name
- Default: "name" field in package.json
  Used as the value for the apple-mobile-web-app-title meta tag in the generated HTML. Note you will need to edit public/manifest.json to match this.
pwa.themeColor
- Default: '#03A9F4'
pwa.msTileColor
- Default: '#000000'
pwa.appleMobileWebAppCapable
- Default: 'no'
  This defaults to 'no' because iOS before 11.3 does not have proper PWA support. See this article for more details.
pwa.appleMobileWebAppStatusBarStyle
- Default: 'default'
pwa.assetsVersion
- Default: ''
  This option is used if you need to add a version to your incons and manifest, against browser’s cache. This will append ?v=<pwa.assetsVersion> to the URLs of the icons and manifest.
pwa.manifestPath
- Default: 'manifest.json'
  The path of app’s manifest.

pwa.iconPaths

Defaults:

{
  favicon32: 'img/icons/favicon-32x32.png',
  favicon16: 'img/icons/favicon-16x16.png',
  appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
  maskIcon: 'img/icons/safari-pinned-tab.svg',
  msTileImage: 'img/icons/msapplication-icon-144x144.png'
}

Change these values to use different paths for your icons.

Example Configuration

// Inside kdu.config.js
module.exports = {
  // ...other kdu-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#03A9F4',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  }
}