警告!Beta 阶段
Quasar SSG 模式目前处于 “beta” 阶段。根据社区反馈,API 在未来可能会有所变动,因此每次升级 “@quasar/app-vite” 时请留意 release notes。
SSG 可以在首次访问时提供预渲染的 HTML,然后安装 service worker 以支持离线访问和后续导航。以下选项在 /quasar.config 的 ssg 配置节中生成:
ssg: {
/**
* 是否由 PWA 接管客户端,否则为 SPA。
* @default false
*/
pwa?: boolean;
/**
* 使用 SSG+PWA 时,这是 PWA 客户端回退的
* index html 文件名。仅用于生产环境。
*
* 确保命名不会与 SSG 生成的 html 文件冲突。
* 它可以有意地与 `clientSideRenderingHtmlFilename` 相同,
* 以复用同一个应用外壳。
*
* @default ssr.pwaOfflineHtmlFilename(如已配置),否则 'offline.html'
*/
pwaOfflineHtmlFilename?: string;
/**
* 扩展/配置 Workbox GenerateSW 选项
* 指定将应用在 `pwa > extendPWAGenerateSWOptions()` 之上的
* Workbox 选项。
*
* https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
*
* 可以是异步的。可以直接修改 "config" 参数,
* 或返回一个新对象与默认配置合并。
*/
extendSSGGenerateSWOptions?: (
config: GenerateSWOptions
) => void | GenerateSWOptions | Promise<void | GenerateSWOptions>;
/**
* 扩展/配置 Workbox InjectManifest 选项
* 指定将应用在 `pwa > extendPWAInjectManifestOptions()` 之上的
* Workbox 选项。
*
* https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
*
* 可以是异步的。可以直接修改 "config" 参数,
* 或返回一个新对象与默认配置合并。
*/
extendSSGInjectManifestOptions?: (
config: InjectManifestOptions
) => void | InjectManifestOptions | Promise<void | InjectManifestOptions>;
}设置 pwa: true 以启用 PWA 接管。在启用此选项时添加 SSG 模式,也会在需要时安装 PWA 模式。通过常规的 pwa 配置 来配置 manifest、图标、Workbox 模式和 service worker。
生产构建会生成正常的 SSG 页面、PWA 资源和默认位于 dist/ssg/offline.html 的应用外壳。Service worker 使用该外壳作为导航回退。不要将其命名为 index.html,也不要与生成的 SSG 页面同名。
自定义 Workbox
SSG 特定的扩展钩子在对应的 PWA 钩子之后运行:
ssg: {
pwa: true,
extendSSGGenerateSWOptions (workboxConfig) {
workboxConfig.navigateFallbackDenylist.push(
/^\/api\//,
/^\/admin\//
)
}
}对 Workbox GenerateSW 使用 extendSSGGenerateSWOptions,对 InjectManifest 使用 extendSSGInjectManifestOptions。Service worker 的实际缓存行为取决于这些设置;不应假设每个后续请求都一定从缓存提供。
WARNING
部署整个输出目录,包括 service worker、manifest、图标、Workbox 文件、生成的页面和离线外壳。Service worker 在生产环境中还需要 HTTPS(localhost 除外)。
有关 PWA 的更多信息,请前往 PWA 简介 并阅读整个 PWA 指南章节。