@quasar/app-webpack/lib/modes/pwa/pwa-config.js

Quasar Framework App CLI with Webpack

const {
  createWebpackChain,
  extendWebpackChain,
  createBrowserEsbuildConfig,
  extendEsbuildConfig
} = require('../../config-tools.js')

const { log } = require('../../utils/logger.js')
const { PwaManifestPlugin } = require('./plugin.webpack.pwa-manifest.js')

const { injectWebpackHtml } = require('../../utils/html-template.js')
const { escapeRegexString } = require('../../utils/escape-regex-string.js')

function injectWebpackPwa(webpackChain, quasarConf) {
  const { ctx } = quasarConf

  // must be first plugin because it fills in quasarConf.htmlVariables.pwaManifest
  // which is later used by injectWebpackHtml()
  webpackChain.plugin('pwa-manifest').use(PwaManifestPlugin, [quasarConf])

  const opts = {}
  const pluginMode = quasarConf.pwa.workboxMode

  if (ctx.dev === true) {
    // dev resources are not optimized (contain maps, unminified code)
    // so they might be larger than the default maximum size for caching
    opts.maximumFileSizeToCacheInBytes = Number.MAX_SAFE_INTEGER
  }

  if (pluginMode === 'GenerateSW') {
    Object.assign(opts, {
      sourcemap: quasarConf.build.sourcemap !== false,
      mode:
        quasarConf.metaConf.debugging === true ||
        quasarConf.build.minify === false
          ? 'development'
          : 'production',
      cacheId: ctx.pkg.appPkg.name || 'quasar-pwa-app',
      cleanupOutdatedCaches: true,
      clientsClaim: true,
      skipWaiting: true
    })

    if (ctx.dev === true && quasarConf.build.ignorePublicFolder === true) {
      // we don't have a public folder, so we can't use the glob* props,
      // but then we need a runtime caching at least
      opts.runtimeCaching = [
        {
          urlPattern: `${quasarConf.build.publicPath || '/'}${quasarConf.pwa.manifestFilename}`,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'static-manifest',
            expiration: {
              maxEntries: 4,
              maxAgeSeconds: 60 * 60
            }
          }
        }
      ]
    }

    if (ctx.prod === true) {
      opts.navigateFallback =
        ctx.mode.ssr === true
          ? quasarConf.ssr.pwaOfflineHtmlFilename
          : quasarConf.build.htmlFilename

      opts.navigateFallbackDenylist = [
        new RegExp(escapeRegexString(quasarConf.pwa.swFilename) + '$'),
        /workbox-(.)*\\.js$/
      ]
    } else {
      // no one to serve workbox files if they are externalized
      opts.inlineWorkboxRuntime = true
    }

    if (typeof quasarConf.pwa.extendGenerateSWOptions === 'function') {
      quasarConf.pwa.extendGenerateSWOptions(opts)
    }

    opts.swDest = quasarConf.pwa.swFilename

    log(
      '[GenerateSW] Will generate a service-worker file. Ignoring your custom written one.'
    )
  } else {
    if (typeof quasarConf.pwa.extendInjectManifestOptions === 'function') {
      quasarConf.pwa.extendInjectManifestOptions(opts)
    }

    opts.swSrc = ctx.appPaths.resolve.entry('compiled-custom-sw.js')
    opts.swDest = quasarConf.pwa.swFilename
    opts.compileSrc = false // don't use Webpack to compile it again

    if (typeof quasarConf.pwa.extendInjectManifestOptions === 'function') {
      quasarConf.pwa.extendInjectManifestOptions(opts)
    }

    log('[InjectManifest] Using your custom service-worker written file')
  }

  if (ctx.mode.ssr) {
    if (pluginMode === 'GenerateSW') {
      if (typeof quasarConf.ssr.pwaExtendGenerateSWOptions === 'function') {
        quasarConf.ssr.pwaExtendGenerateSWOptions(opts)
      }
    } else if (
      typeof quasarConf.ssr.pwaExtendInjectManifestOptions === 'function'
    ) {
      quasarConf.ssr.pwaExtendInjectManifestOptions(opts)
    }

    opts.exclude = opts.exclude || []
    opts.exclude.push('../quasar.manifest.json')
  }

  const WorkboxPlugin = ctx.cacheProxy.getModule('workboxWebpackPlugin')
  webpackChain.plugin('workbox').use(WorkboxPlugin[pluginMode], [opts])
}

module.exports.injectWebpackPwa = injectWebpackPwa

const quasarPwaConfig = {
  webpack: async quasarConf => {
    const webpackChain = await createWebpackChain(quasarConf, {
      compileId: 'webpack-pwa',
      threadName: 'PWA UI'
    })

    injectWebpackPwa(webpackChain, quasarConf)
    injectWebpackHtml(webpackChain, quasarConf)

    return extendWebpackChain(webpackChain, quasarConf, { isClient: true })
  },

  // used by ssr-config.js as well
  customSw: async quasarConf => {
    const { ctx } = quasarConf
    const { appPaths } = ctx

    const cfg = await createBrowserEsbuildConfig(quasarConf, {
      compileId: 'browser-custom-sw'
    })

    const fallbackHtmlFile =
      quasarConf.build.publicPath +
      (ctx.mode.ssr === true && ctx.prod === true
        ? quasarConf.ssr.pwaOfflineHtmlFilename
        : quasarConf.build.htmlFilename)

    cfg.define['process.env.PWA_FALLBACK_HTML'] =
      JSON.stringify(fallbackHtmlFile)

    cfg.define['process.env.PWA_SERVICE_WORKER_REGEX'] = JSON.stringify(
      `${escapeRegexString(quasarConf.pwa.swFilename)}$`
    )

    cfg.entryPoints = [quasarConf.sourceFiles.pwaServiceWorker]
    cfg.outfile = appPaths.resolve.entry('compiled-custom-sw.js')

    return extendEsbuildConfig(
      cfg,
      quasarConf.pwa,
      ctx,
      'extendPWACustomSWConf'
    )
  }
}

module.exports.quasarPwaConfig = quasarPwaConfig
module.exports.modeConfig = quasarPwaConfig