配置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。