PWA配置

我们将使用Quasar CLI开发和构建PWA。 构建SPA、移动应用、Electron应用、PWA或SSR的区别仅在于“quasar dev”和“quasar build”命令中的“mode”参数。

安装

为了构建PWA,我们首先需要将PWA模式添加到我们的Quasar项目中:

$ quasar mode add pwa

如果您想直接进入并开始开发,可以跳过“quasar mode”命令并发出:

$ quasar dev -m pwa

如果没有添加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: {
    // ...
  },

  // 用于注入特定PWA元标记
  // 的变量(以下为默认值)
  metaVariables: {
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'default',
    appleTouchIcon120: 'statics/icons/apple-icon-120x120.png',
    appleTouchIcon180: 'statics/icons/apple-icon-180x180.png',
    appleTouchIcon152: 'statics/icons/apple-icon-152x152.png',
    appleTouchIcon167: 'statics/icons/apple-icon-167x167.png',
    appleSafariPinnedTab: 'statics/icons/safari-pinned-tab.svg',
    msapplicationTileImage: 'statics/icons/ms-icon-144x144.png',
    msapplicationTileColor: '#000000'
  }
}

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

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

选择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': 'statics/icons/icon-128x128.png',
        'sizes': '128x128',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-192x192.png',
        'sizes': '192x192',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-256x256.png',
        'sizes': '256x256',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-384x384.png',
        'sizes': '384x384',
        'type': 'image/png'
      },
      {
        'src': 'statics/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负责为您嵌入正确的东西。

PWA清单

更多信息:PWA清单

WARNING

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

重新加载和更新Workbox

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

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

来源