PWA配置 | Quasar Framework 中文网

Quasar CLI with Webpack - @quasar/app-webpack

PWA配置

Service Worker

向Quasar项目添加PWA模式意味着将创建一个新文件夹：/src-pwa，其中包含PWA特定文件：

.
└── src-pwa/
    ├── register-service-worker-dev.js   # (或.ts)应用代码**管理**Service Worker
    └── custom-service-worker.js    # (或.ts)可选的自定义的service worker文件
                                    # (仅InjectManifest模式)

您可以自由编辑这些文件。注意一些事情：

register-service-worker.[js|ts]会自动导入您的应用程序（与任何其他/src文件一样）。它注册service worker（由Workbox或您的自定义工具创建，具体取决于工作箱插件模式 - quasar.conf.js> pwa> workboxPluginMode），您可以监听Service Worker的事件。您可以使用ES6代码。
如果工作箱插件模式设置为“InjectManifest”（quasar.conf.js> pwa> workboxPluginMode：‘InjectManifest’），custom-service-worker.[js|ts]将成为您的service worker文件。否则，Workbox将为您创建一个service-worker文件。
仅在生产版本上运行Lighthouse测试是有意义的。

TIP

阅读更多关于register-service-worker.[js|ts]的信息以及如何与处理Service Worker文档页面上的Service Worker进行交互。

quasar.config.js

在这里您可以配置Workbox行为并调整manifest.json。

pwa: {
  // workboxPluginMode: 'InjectManifest',
  // workboxOptions: {},
  manifest: {
    // ...
  },

  // 使用这个或metaVariablesFn，但不能同时使用这两个；
  // 用于注入特定PWA元标记
  // 的变量（以下为默认值）
  metaVariables: {
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'default',
    appleTouchIcon120: 'icons/apple-icon-120x120.png',
    appleTouchIcon180: 'icons/apple-icon-180x180.png',
    appleTouchIcon152: 'icons/apple-icon-152x152.png',
    appleTouchIcon167: 'icons/apple-icon-167x167.png',
    appleSafariPinnedTab: 'icons/safari-pinned-tab.svg',
    msapplicationTileImage: 'icons/ms-icon-144x144.png',
    msapplicationTileColor: '#000000'
  },

  //可选，覆盖上面的metaVariables；
  //使用这个或metaVariables，但不能同时使用这两个；
  metaVariablesFn (manifest) {
    // ...
    return [
      {
        // 此条目将生成：
        // <meta name="theme-color" content="ff0">

        tagName: 'meta',
        attributes: {
          name: 'theme-color',
          content: '#ff0'
        }
      },

      {
        // 此条目将生成：
        // <link rel="apple-touch-icon" sizes="180x180" href="icons/icon-180.png">
        // 引用/public/icons/icon-180.png

        tagName: 'link',
        attributes: {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: 'icons/icon-180.png'
        },
        closeTag: false // 这是可选的;
                        // 指定标签是否还需要显式结束标签；
                        // 默认情况下是布尔值false
      }
    ]
  },

  // 可选的；当InjectManifest模式下使用workbox时，
  // 则仅是自定义service worker（/src-pwa/custom-service-worker.[js|ts]）
  // 的webpack配置对象。
  extendWebpackCustomSW (cfg) {
    // 直接改变cfg的属性。
    // 不需要返回任何东西
  },

  // 可选；与 extendWebpackCustomSW() 等同，但使用 webpack-chain。
  // 当InjectManifest模式下使用workbox时
  // 仅用于自定义的service worker（/src-pwa/custom-service-worker.[js|ts]） 
  chainWebpackCustomSW (chain) {
    // chain是一个Webpack配置
    // 的webpack-chain 实例

    // 例:
    // chain.plugin('eslint-webpack-plugin')
    //   .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  }
}

更多信息：Workbox Webpack插件, Workbox.

只有Quasar本身使用metaVariables对象（对Workbox没有意义）才能将特定值属性注入到渲染的HTML页面中的某些PWA元标记中。示例：<meta name =“apple-mobile-web-app-status-bar-style”>将value属性分配给metaVariables.appleMobileWebAppStatusBarStyle的内容。

您可以使用metaVariablesFn(manifest)来替代metaVariables。它可以返回一个对象数组（参见上面代码中它们的形式）。如果您将此函数配置为不返回数组或返回空数组，则Quasar App CLI将理解为不添加任何标签，因此您可以直接在/src/index.template.html中手动添加自定义标签.

选择Workbox模式

有两种Workbox操作模式：GenerateSW（默认）和InjectManifest。第一种基于quasar.conf.js > pwa > workboxOptions（如果有）自动生成service worker，而第二种模式则允许您编写自己的service worker文件。

通过quasar.config.js设置要使用的模式：

// quasar.config.js
pwa: {
  // workboxPluginMode: 'InjectManifest',
  // workboxOptions: { ... }
}

WARNING

确保您的workboxOptions匹配您选择的Workbox模式，否则Workbox Webpack插件可能会使您的应用停止编译。

GenerateSW

何时使用GenerateSW：

您要预缓存文件。
您具有简单的运行时配置需求（例如，该配置允许您定义路由和策略）。

何时不使用GenerateSW：

您要使用其他Service Worker功能（即Web Push）。
您要导入其他脚本或添加其他逻辑。

TIP

请在Workbox网站上检查此模式下可用的workboxOptions。

InjectManifest

何时使用InjectManifest:

您想更好地控制service worker。
您要预缓存文件。
您在路由方面有更复杂的需求。
您想将service worker与其他APIS（例如Web Push）一起使用。

何时不使用InjectManifest:

您想要将service worker添加到站点的最简单方法。

提示

如果要使用此模式，则必须自己编写service worker（/src-pwa/custom-service-worker.[js|ts]）文件。
请在Workbox网站上检查此模式下可用的workboxOptions。

下面的片段是自定义service worker的默认代码（/src-pwa/custom-service-worker.[js|ts]）。

import { precacheAndRoute } from 'workbox-precaching'

// 与预存储注入（precache injection）一起使用
precacheAndRoute(self.__WB_MANIFEST)

配置Manifest文件

Manifest文件由Quasar CLI通过使用sw-precache-webpack-plugin软件包及其默认配置生成。然而你可以在/quasar.conf.js调整这个配置。

// quasar.config.js
pwa: {
  // workboxPluginMode: 'InjectManifest',
  // workboxOptions: {},
  manifest: {
    name: 'Quasar Play',
    short_name: 'Quasar-Play',
    description: 'Quasar Framework Showcase',
    icons: [
      {
        'src': 'icons/icon-128x128.png',
        'sizes': '128x128',
        'type': 'image/png'
      },
      {
        'src': 'icons/icon-192x192.png',
        'sizes': '192x192',
        'type': 'image/png'
      },
      {
        'src': 'icons/icon-256x256.png',
        'sizes': '256x256',
        'type': 'image/png'
      },
      {
        'src': 'icons/icon-384x384.png',
        'sizes': '384x384',
        'type': 'image/png'
      },
      {
        'src': 'icons/icon-512x512.png',
        'sizes': '512x512',
        'type': 'image/png'
      }
    ],
    display: 'standalone',
    orientation: 'portrait',
    background_color: '#ffffff',
    theme_color: '#027be3'
  }
}

在深入研究之前，请阅读Manifest配置。

WARNING

请注意，您不需要编辑您的index.html文件（由/src/index.template.html生成）来链接到Manifest文件。 Quasar CLI负责为您嵌入正确的东西。

TIP

如果您的PWA在基本身份验证后面或需要Authorization标头，则将quasar.config.js > pwa > useCredentials设置为true，以在manifest.json的meta标签中包含crossorigin =“ use-credentials”。

PWA清单

更多信息：PWA清单

WARNING

不要在开发版本上运行Lighthouse，因为在此阶段，代码有意不进行优化，并包含嵌入式源映射（以及许多其他内容）。有关详细信息，请参阅这些文档的测试和审核部分。

自动加载和更新

对于那些不想在更新service worker时手动重新加载页面并且正在使用默认的GenerateSW工作箱模式的人，可以将其立即激活。如下所示更新quasar.conf.js中的workboxOptions配置：

// quasar.config.js
pwa: {
  workboxOptions: {
    skipWaiting: true,
    clientsClaim: true
  }
}

来源