@quasar/app-vite/lib/modes/pwa/utils.js

Quasar Framework App CLI with Vite

import { readFileSync } from 'node:fs'

import { progress } from '../../utils/logger.js'

const workboxMethodMap = {
  GenerateSW: 'generateSW',
  InjectManifest: 'injectManifest'
}

export function createHeadTags (quasarConf) {
  const { publicPath } = quasarConf.build
  const { pwaManifest } = quasarConf.htmlVariables
  const { useCredentialsForManifestTag, injectPwaMetaTags, manifestFilename } = quasarConf.pwa

  let headTags
    = `<link rel="manifest" href="${ publicPath }${ manifestFilename }"${ useCredentialsForManifestTag === true ? ' crossorigin="use-credentials"' : '' }>`

  if (injectPwaMetaTags === true) {
    headTags
      += (pwaManifest.theme_color !== void 0
        ? `<meta name="theme-color" content="${ pwaManifest.theme_color }">`
          + `<link rel="mask-icon" href="${ publicPath }icons/safari-pinned-tab.svg" color="${ pwaManifest.theme_color }">`
        : '')
      + '<meta name="mobile-web-app-capable" content="yes">'
      + '<meta name="apple-mobile-web-app-status-bar-style" content="default">'
      + (pwaManifest.name !== void 0 ? `<meta name="apple-mobile-web-app-title" content="${ pwaManifest.name }">` : '')
      + `<meta name="msapplication-TileImage" content="${ publicPath }icons/ms-icon-144x144.png">`
      + '<meta name="msapplication-TileColor" content="#000000">'
      + `<link rel="apple-touch-icon" href="${ publicPath }icons/apple-icon-120x120.png">`
      + `<link rel="apple-touch-icon" sizes="152x152" href="${ publicPath }icons/apple-icon-152x152.png">`
      + `<link rel="apple-touch-icon" sizes="167x167" href="${ publicPath }icons/apple-icon-167x167.png">`
      + `<link rel="apple-touch-icon" sizes="180x180" href="${ publicPath }icons/apple-icon-180x180.png">`
  }
  else if (typeof injectPwaMetaTags === 'function') {
    headTags += injectPwaMetaTags({ publicPath, pwaManifest })
  }

  return headTags
}

export function injectPwaManifest (quasarConf, ifNotAlreadyGenerated) {
  if (
    ifNotAlreadyGenerated === true
    && quasarConf.htmlVariables.pwaManifest !== void 0
  ) return

  const { appPkg } = quasarConf.ctx.pkg

  const id = appPkg.name || 'quasar-pwa'
  const pwaManifest = {
    id,
    name: appPkg.productName || appPkg.name || 'Quasar App',
    short_name: id,
    description: appPkg.description,
    display: 'standalone',
    start_url: quasarConf.build.publicPath,
    ...JSON.parse(readFileSync(quasarConf.metaConf.pwaManifestFile, 'utf-8'))
  }

  if (typeof quasarConf.pwa.extendManifestJson === 'function') {
    quasarConf.pwa.extendManifestJson(pwaManifest)
  }

  quasarConf.htmlVariables.pwaManifest = pwaManifest
}

export async function buildPwaServiceWorker (quasarConf, workboxConfig) {
  const { ctx: { cacheProxy }, pwa: { workboxMode } } = quasarConf

  const done = progress('Compiling of the ___ with Workbox in progress...', 'Service Worker')

  const buildMethod = workboxMethodMap[ workboxMode ]
  const workboxBuild = await cacheProxy.getModule('workboxBuild')

  await workboxBuild[ buildMethod ](workboxConfig)

  done('The ___ compiled with success by Workbox')
}