配置PWA

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

安装

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

$ quasar mode -a 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文件

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

  1. 这两个文件仅嵌入到生产版本中，而开发版本则跳过它们。
  2. “register-service-worker.js”会自动导入您的应用程序（与任何其他/src文件一样）。它注册service worker（由Workbox或您的自定义工具创建，具体取决于工作箱插件模式 - quasar.conf.js> pwa> workboxPluginMode），您可以监听Service Worker的事件。您可以使用ES6代码。
  3. 如果工作箱插件模式设置为“InjectManifest”（quasar.conf.js> pwa> workboxPluginMode：’InjectManifest’），“custom-service-worker.js”将成为您的service worker文件。否则，Workbox将为您创建一个service-worker文件。
  4. 在开发期间，将创建一个与HMR（热模块重新加载）很好地协作的无操作service worker。其唯一目的是覆盖任何可能的以前注册的service worker。
  5. 仅在生产版本上运行Lighthouse测试是有意义的。

Quasar.conf.js

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

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

More information: Workbox Webpack Plugin, Workbox.

配置Manifest文件

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

来自Quasar Play的quasar.conf.js的示例：

pwa: {
  // workboxPluginMode: 'InjectManifest',
  // workboxOptions: {},
  cacheId: '...' // 默认取自package.json > name字段或'quasar-pwa-app'
  cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3',
  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配置。

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

PWA清单

https://developers.google.com/web/progressive-web-apps/checklist

重要
请勿在开发版本上运行lighthouse。 它没有被优化，也没有包含真正的Service Worker。

介绍 构建命令