PWA配置

Service Worker

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

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

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

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

TIP

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

Quasar.conf.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'
  },

  // (@quasar/app v1.6.2+)
  //可选,覆盖上面的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
      }
    ]
  }
}

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

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

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

选择Workbox模式

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

通过quasar.conf.js设置要使用的模式:

// quasar.conf.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)文件。
  • 请在Workbox网站上检查此模式下可用的workboxOptions。

配置Manifest文件

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

// quasar.conf.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

(@quasar/app v2.1.10+)如果您的PWA在基本身份验证后面或需要Authorization标头,则将quasar.conf.js > pwa > useCredentials设置为true,以在manifest.json的meta标签中包含crossorigin =“ use-credentials”

PWA清单

更多信息:PWA清单

WARNING

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

自动加载和更新

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

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

来源