razzle-plugin-pwa v2.2.3

razzle-plugin-pwa

A Razzle 2.x plugin for generating configuraable progressive web applications and web application manifests.

Usage

Example options for each plugin can be found inside of testdata. Once you have your desired options, pass it to modify which will return a Razzle plugin compliant modify function. It just works.

  // razzle.config.js
  const modifyBuilder = require('razzle-plugin-pwa').default

  const pwaConfig = {
    swDest: 'sw.js',
    clientsClaim: true,
    skipWaiting: true,
    runtimeCaching: [{
        urlPattern: new RegExp('https://www.mysite.co'),
        handler: 'networkFirst'
    }]
  }

  const manifestConfig = {
    filename: 'manifest.json',
    name: 'Razzle App',
    short_name: 'Razzle',
    description: 'Another Razzle App',
    orientation: 'portrait',
    display: 'fullscreen',
    start_url: '.',
    theme_color: '#ffffff',
    background_color: '#ffffff',
    related_applications: [],
    icons: [
      {
        'src': require.resolve(path.join(__dirname, 'public', 'favicon-16x16.png')),
        'sizes': '16x16',
        'type': 'image/png'
      },
      {
        'src': require.resolve(path.join(__dirname, 'public', 'favicon-32x32.png')),
        'sizes': '32x32',
        'type': 'image/png'
      },
      {
        'src': require.resolve(path.join(__dirname, 'public', 'favicon-144x144.png')),
        'sizes': '144x144',
        'type': 'image/png'
      },
      {
        'src': require.resolve(path.join(__dirname,'public', 'android-chrome-192x192.png')),
        'sizes': '192x192',
        'type': 'image/png'
      },
      {
          'src': require.resolve(path.join(__dirname, 'public', 'android-chrome-512x512.png')),
          'sizes': '512x512',
          'type': 'image/png'
      }
    ]
  }

  const modify = modifyBuilder({ pwaConfig, manifestConfig })

  module.exports = {
    plugins: [{ func: modify }]
  }

Configuration options

All available configuration options are defined in their respective repositories:

• workbox-webpack-plugin
• webpack-pwa-manifest