Firebase Hosting（Angular 8 + Service Worker）没有在刷新时更新

Posted 2023-02-23

【中文标题】Firebase Hosting（Angular 8 + Service Worker）没有在刷新时更新

【英文标题】：Firebase Hosting (Angular 8 + Service Worker) not updating on a refresh

【发布时间】：2020-04-14 21:10:22

【问题描述】：

我拥有quackr.io，但在用户看不到我的代码的新版本时遇到了一些麻烦。 quackr 是部署在 Firebase 主机上的 PWA（Angular s-s-r + Service Worker）。

每当我部署新版本时，之前查看过该网站的任何人都会看到旧版本。如果您进行硬刷新，您将看到新版本。但是，如果您再次进行正常的页面刷新，它将恢复到旧版本。

页面刷新：接收旧版本 硬刷新：接收新版本（但在我再次正常刷新后立即获取旧版本） 在 chrome 中取消注册 service worker 并进行正常刷新：接收新版本（但在我进行第二次刷新时也会获取旧版本）。 我已清除所有浏览器缓存、cookie 和存储空间。同样，这适用于初始刷新，但不适用于任何后续刷新。

这是我的 firebase.json（我希望向 service worker js 添加 no-cache，它会在部署时失效，但它不起作用）：

  "hosting": 
    "public": "dist/browser",
    "headers": [
    
      "source": "/@(ngsw-worker.js|ngsw.json)",
      "headers": [
        
          "key": "Cache-Control",
          "value": "no-cache"
        
      ]
   
  ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      
        "source": "**",
        "function": "s-s-r"
      
    ]
  ,
  "functions": 
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  

ngsw-config.json:

  "index": "/index.html",
  "appData": 
    "name": "quackr.io",
    "description": "v2.0"
  ,
  "assetGroups": [
    "name": "app",
    "installMode": "prefetch",
    "resources": 
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    
  , 
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": 
      "files": [
        "/assets/**"
      ]
    
  ,
  
    "name": "fonts",
    "resources": 
      "urls": [
        "https://fonts.googleapis.com/**"
      ]
    
  ]

https://quackr.io/ngsw-worker.js

任何帮助将不胜感激，谢谢大家！

【参考方案1】：

您将需要使用 Angular 的服务工作者更新功能，该功能将监视应用程序中的任何新更改，然后刷新页面或通知用户有关更新并让他们选择刷新自己：

看这个例子：

constructor(
        private swUpdate: SwUpdate,
        private snackbar: MatSnackBar
    ) 
        this.swUpdate.available.subscribe(evt => 
            const snack: any = this.snackbar.open(`Updates Available`, 'Reload');

            snack.onAction().subscribe(() => 
                window.location.reload();
            );

            snack.setTimeout(() => 
                snack.dismiss();
            , 6000);
        );
    

原始文档：https://angular.io/api/service-worker/SwUpdate

更多信息：https://alligator.io/angular/service-worker-updates/

这是我的 Firebase.json 文件

  "hosting": 
    "public": "dist/myApp",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      
        "source": "**/*.@(eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          
            "key": "Access-Control-Allow-Origin",
            "value": "max-age=31557600"
          
        ]
      ,
      
        "source": "**/*.@(js|css)",
        "headers": [
          
            "key": "Cache-Control",
            "value": "max-age=31557600"
          
        ]
      ,
      
        "source": "**/*.@(svg|ico|json|mp3)",
        "headers": [
          
            "key": "Cache-Control",
            "value": "max-age=31557600"
          
        ]
      
    ],
    "rewrites": [
      
        "source": "**",
        "function": "s-s-r"
      
    ]
  ,
  "functions": 
    "predeploy": [
      "npm --prefix %RESOURCE_DIR% run lint",
      "npm --prefix %RESOURCE_DIR% run build"
    ],
    "source": "functions"
  ,
  "emulators": 
    "functions": 
      "port": "5005"
    
  ,
  "firestore": 
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  

【讨论】：

感谢纳迪尔的快速回复！不幸的是，这并不能解决我的问题。即使订阅了 service worker 的更改，每当 window.location.reload() 被调用时，它都会重新加载并仍然选择旧版本的应用程序。

你为什么需要这个："headers": [ "source": "/@(ngsw-worker.js|ngsw.json)", "headers": [ "key": “缓存控制”，“值”：“无缓存”]

我认为您不需要 Firebase 托管来为您缓存 Service Worker

我做了一些研究，并认为这可能会通过不缓存服务工作者 js 来解决我的问题，因此在刷新时它会获取最新的并注册它。但它没有用！

我正在使用 firebase 和 Angular SW，我发布了用于刷新 sw 的内容，我将发布我的 firebase.json 文件供您比较