Skip to page content
Quasar CLI with Vite - @quasar/app-vite

SSR 配合 PWA 客户端接管

使用 Quasar CLI,您可以构建 SSR + PWA 终极组合的应用。为了给 SSR 构建启用 PWA,您需要先编辑 /quasar.config 文件:

/quasar.config file

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 指南章节。