我有一个Angular 11应用程序,我正在使用以下命令构建用于在生产中部署的应用程序:
npm install npm run build -- --prod --outputHashing=all
我遇到的问题是,一旦部署,当我用浏览器访问应用程序的URL时,我仍然看到应用程序的旧版本。
我最初认为这是一个缓存问题,即使我是使用 --outputHashing=all 选项进行编译的(从我所能看出的情况来看,它似乎是有效的, dist 文件夹中的输出文件似乎具有随机的文件名)。事实似乎是这样的:如果我在Chrome的dev选项中禁用缓存后刷新页面,它现在会显示更新后的应用程序。
--outputHashing=all
dist
然而,这里有一个问题:如果我关闭浏览器并再次打开它...我又开始看老应用了!因此,清除缓存似乎是一种临时解决方案。
经过进一步的调查,我怀疑这与angular的 service workers 有关,因为当我打开Chrome的开发工具加载页面时,我可以看到许多网络调用被标记为 Served from service worker 。
service workers
Served from service worker
然而,我不是一个足够的Angular专家,不知道如何进一步诊断。我已经阅读了angular网站上关于服务人员的文档,但它并没有帮助我准确地找出问题所在。有谁能给我指个方向吗?这是我的服务工作者配置文件,它是在创建应用程序时自动生成的。如果还有其他文件需要我提供,请告诉我:
{ "$schema": "./node_modules/@angular/service-worker/config/schema.json", "index": "/index.html", "assetGroups": [ "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js" "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ "/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" }
如果有什么不同的话,应用程序托管在运行嵌入式Katana see服务器的.NET核心服务中,但它看不出这有什么不同,它只是提供文件,而不是进一步的操作。
发布于 2021-04-01 21:51:45
即使文件名都是散列的,也帮不了多少忙。唯一的方法就是按Ctrl + Shift +R进行硬性刷新,或者任何硬性刷新是唯一的方法,在javascript中, location.reload() 就是函数。
location.reload()
好事情是我们有PWA (服务工作者)可以检测到您的网站的所有变化,在您的浏览器上。
只需添加 ng add @angular/pwa ,您就可以与service worker集成。
ng add @angular/pwa
并且仅仅使用它来检测变化。
将此代码转换为 app.component.ts
app.component.ts
hasUpdate = false; constructor( private swUpdate: SwUpdate, ngOnInit(): void { // check for platform update if (this.swUpdate.isEnabled) { interval(60000).subscribe(() => this.swUpdate.checkForUpdate().then(() => { // checking for updates this.swUpdate.available.subscribe(() => { this.hasUpdate = true;