0

在我的 Angular 8 项目中，我集成了 PWA、SSR 和服务工作者。

当我使用此命令在本地运行项目时：npm run build:ssr && npm run serve:ssr，我面临以下问题：

  1. API url，图片不缓存。如果我在离线模式下运行，它们不会显示。
  2. 主页加载正常。但是当我导航到任何其他页面时，它会将所有HTTP 调用显示为 pending。

在此处输入图像描述

ngsw-config.json

"assetGroups": [
{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
    "files": [
      "/favicon.ico",
      "/index.html",
      "/*.css",
      "/*.js"
    ]
  }
}, {
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**",
      "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
    ],
    "urls": [
      "https://fonts.googleapis.com/**"
    ]
  }
 }
],
"dataGroups": [
{
  "name": "api-performance",
  "urls": [
    "/api/siteInfo/home_carousel",
    "/api/siteInfo/categories",
    "/api/siteInfo/testimonials",
    "/api/siteInfo/footer",
    "/api/siteInfo/contact",
    "/api/gallery/fetch",        
    "/api/offer/fetch",
    "/api/offer/check",
    "https://maps.gstatic.com/**"
  ],
  "cacheConfig": {
    "strategy": "performance",
    "maxAge": "1h",
    "maxSize": 100,
    "timeout": "5s"
  }
 }    
]

构建后，这是生成的 ngsw.json 文件内容：

"dataGroups": [
{
  "name": "api-performance",
  "patterns": [
    "\\/api\\/siteInfo\\/home_carousel",
    "\\/api\\/siteInfo\\/categories",
    "\\/api\\/siteInfo\\/testimonials",
    "\\/api\\/siteInfo\\/footer",
    "\\/api\\/siteInfo\\/contact",
    "\\/api\\/gallery\\/fetch",
    "\\/api\\/offer\\/fetch",
    "\\/api\\/offer\\/check",
    "https:\\/\\/maps\\.gstatic\\.com\\/.*"
  ],
  "strategy": "performance",
  "maxSize": 100,
  "maxAge": 3600000,
  "timeoutMs": 5000,
  "version": 1
 }
],

注意：推荐或其他网址没有任何问题，因为当我这样做时，ng serve所有 http 调用都以 200 状态正确进行。

4

1 回答 1

1

如果提供图像的响应没有被缓存，则意味着 SW 无法匹配请求 URL。推荐的 API URL 是否与 dataGroups 中定义的一样正确？

您还可以检查生成的ngsw.json文件以查看有效的目标 URL。

但是为什么要使用 SSR 和 service worker？这样你会失去客户端缓存的好处，很可能这就是为什么某些路由没有被缓存的原因。

您应该看看另一个完全解决您的问题的SO 答案：

Service Worker 实际上并不适合 SSR 应用。生成的 ngsw.json 文件不会包含您拥有的所有页面。您将不得不手动修改此文件，或者不将其作为静态文件提供，而是动态创建它。

我还发现了另一篇描述 PWA 和 SSR 的可能解决方案的文章，尽管所描述的解决方案没有直接使用 Angular。为您提供进一步的见解可能仍然有用。

于 2019-12-03T07:27:50.247 回答