ZEIT Now Angular PWA 手柄 404答案

【问题标题】：ZEIT Now Angular PWA handle 404ZEIT Now Angular PWA 手柄 404
【发布时间】：2020-02-08 06:31:44
【问题描述】：

我现在在 ZEIT 上托管了一个 PWA IONIC/Angular。我注意到有时在部署后应用程序启动时会出现空白页。经过研究，我看到部署后，浏览器想要获取一些缓存的.js文件。

通常，ZEIT Now 只会显示 404 或其他内容或引发 http 404 状态。但我注意到响应是浏览器无法处理的index.html（状态为 202），因为它需要一个 javascript 而不是 text/html。

我现在的now.json

{
    "version": 2,
    "name": "my-app",
    "routes": [
      {
        "src": "dist/main.*.js",
        "headers": { "Cache-Control": "s-maxage=0, max-age=0" }
      },
      {
        "src": "dist/ngsw.json",
        "headers": { "Cache-Control": "s-maxage=0, max-age=0" }
      }
    ] 
  }

我该如何处理？

【问题讨论】：

标签： angular vercel

【解决方案1】：

也许您可以尝试 404 不存在的散列 .js 文件？这里有几个步骤：

使用Advanced Project Settings 去掉dist 前缀。
如果您想使用routes (reference)，请在修复“dist”前缀问题后尝试：

    "routes": [
      { "handle": "filesystem"},
      {
        "src": "/main.*", "status": "404", "dest": "/404"
      }
    ]

【讨论】：

嗯从来没想过。我去看看

【解决方案2】：

自动检测 Angular 并添加通配符路由，以便任何与静态资产不匹配的路由都将服务于 /index.html。

https://zeit.co/docs/v2/build-step#optimized-frameworks

听起来对您来说最好的解决方案是禁用文件哈希，这样您的 js/css 资产就不会每次都重命名。

ZEIT 现在已经清除了 CDN 缓存，因此您无需担心过时的文件。

https://zeit.co/docs/v2/network/caching

【讨论】：

但这会破坏 Service Worker 检测到我部署的应用程序的新版本吗？
你没有分享你的 Service Worker 的内容，所以我不能确定。但是，您使用的是 Service Worker，这让我认为问题在于 Service Worker 的缓存，而不是 CDN 缓存。