Quasar CLI with Vite - @quasar/app-vite
使用 Quasar CLI,您可以构建 SSR + PWA 终极组合的应用。为了给 SSR 构建启用 PWA,您需要先编辑 /quasar.config 文件:
return {
// ...
ssr: {
/**
* 是否由 PWA 接管客户端,否则为 SPA。
* @default false
*/
pwa?: boolean;
/**
* 使用 SSR+PWA 时,这是 PWA 客户端回退的
* index html 文件名。仅用于生产环境。
*
* 不要使用 index.html 作为名称,否则会导致 SSR 出错!
*
* @default ssg.pwaOfflineHtmlFilename(如已配置),否则 'offline.html'
*/
pwaOfflineHtmlFilename?: string;
/**
* 扩展/配置 Workbox GenerateSW 选项
* 指定将应用在 `pwa > extendPWAGenerateSWOptions()` 之上的
* Workbox 选项。
*
* https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
*
* 可以是异步的。可以直接修改 "config" 参数,
* 或返回一个新对象与默认配置合并。
*/
extendSSRGenerateSWOptions?: (
config: GenerateSWOptions
) => void | GenerateSWOptions | Promise<void | GenerateSWOptions>;
/**
* 扩展/配置 Workbox InjectManifest 选项
* 指定将应用在 `pwa > extendPWAInjectManifestOptions()` 之上的
* Workbox 选项。
*
* https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
*
* 可以是异步的。可以直接修改 "config" 参数,
* 或返回一个新对象与默认配置合并。
*/
extendSSRInjectManifestOptions?: (
config: InjectManifestOptions
) => void | InjectManifestOptions | Promise<void | InjectManifestOptions>;
}
}新客户端的第一个请求由 web 服务器处理,因此 SSR 提供初始页面内容。Service worker 安装完成后,可以处理后续导航。请求是从缓存、网络还是离线外壳提供,取决于所选的 Workbox 模式和配置。
有关 PWA 的更多信息,请前往 PWA 简介 并阅读整个 PWA 指南章节。