![]() |
热情的登山鞋 · JS与jQuery中html-与-text方 ...· 12 月前 · |
![]() |
精明的铁链 · 【技术学习】postgresql学习笔记-- ...· 1 年前 · |
![]() |
发怒的西装 · Detectron2源码阅读 - 知乎· 1 年前 · |
我有一个Angular 11应用程序,我正在使用以下命令构建用于在生产中部署的应用程序:
npm install
npm run build -- --prod --outputHashing=all
我遇到的问题是,一旦部署,当我用浏览器访问应用程序的URL时,我仍然看到应用程序的旧版本。
我最初认为这是一个缓存问题,即使我是使用
--outputHashing=all
选项进行编译的(从我所能看出的情况来看,它似乎是有效的,
dist
文件夹中的输出文件似乎具有随机的文件名)。事实似乎是这样的:如果我在Chrome的dev选项中禁用缓存后刷新页面,它现在会显示更新后的应用程序。
然而,这里有一个问题:如果我关闭浏览器并再次打开它...我又开始看老应用了!因此,清除缓存似乎是一种临时解决方案。
经过进一步的调查,我怀疑这与angular的
service workers
有关,因为当我打开Chrome的开发工具加载页面时,我可以看到许多网络调用被标记为
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()
就是函数。
好事情是我们有PWA (服务工作者)可以检测到您的网站的所有变化,在您的浏览器上。
只需添加
ng add @angular/pwa
,您就可以与service worker集成。
并且仅仅使用它来检测变化。
将此代码转换为
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;
![]() |
发怒的西装 · Detectron2源码阅读 - 知乎 1 年前 |