使用PWA客户端接管的SSR

使用Quasar CLI,您可以使用SSR + PWA的杀手组合来构建您的应用程序。 为了在SSR构建中启用PWA,您需要首先编辑/quasar.conf.js

// quasar.conf.js
return {
  // ...
  ssr: {
    pwa: true
  }
}

第一个请求将从WEB服务器得到服务。 安装PWA,然后接管客户端。

有关PWA的更多信息,请转到PWA简介,并阅读整个PWA指南部分。

注意事项

需要注意的一个警告是,与普通的PWA构建相反,您还需要指定要缓存的URL路由。 quasar.conf.js > ssr > pwa可以具有对象形式,指定将会得到应用的Workbox选项(在quasar.conf.js > pwa > workboxOptions配置的顶部)。 因此,我们将使用它来将路由添加到运行时缓存中:

// quasar.conf.js
return {
  // ...
  ssr: {
    // 我们现在使用“pwa”的对象形式:
    pwa: {
      runtimeCaching: [
        {
          urlPattern: '/user',
          handler: 'networkFirst'
        },
        {
          // 使用正则表达式,特别有用
          // 当您具有带有参数的Vue路由时
          urlPattern: /\/dashboard\/.*/,
          handler: 'networkFirst'
        }
      ]
    }
  }
}

index路由(/)是默认添加的,但是您可以根据需要覆盖它。 在上面的示例中,我们在缓存路由//user/dashboard/**