Angular Universal在浏览器中缓存

Question

使用Angular (v12)与Universal我有一个网站，在一些浏览器中缓存了一个旧版本的Angular，所以你在某些情况下看到的是旧版本。

我不能强制浏览器在所有情况下清除缓存，因为这是一个公共网站。所以一些东西被添加到"强制"中。但是它不能工作，有些浏览器仍然显示旧版本。

在index.html中添加:

<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta name="Revisit" content="10 days">

编译完成后，手动修改angular .js，添加一个日期作为参数，样式为"main.js?t=20221115"

关于如何强制所有浏览器加载新版本有什么想法或指导吗?我这样说是因为在某些情况下，他们仍然显示三月版本。

感谢您的宝贵时间。

用www.DeepL.com/Translator(免费版)翻译

Answer 1

我也遇到了同样的问题。为了检查网站是否是最新的，我需要一个"版本"。文件(file?t=)，并将其与"环境"中的版本进行比较。文件。如果版本不相同，我会显示一个带有重新加载按钮的弹出窗口

我在"环境"中生成版本。和";version"构建前的文件

package.json

"scripts": { 
"build": "yarn run build:browser && yarn run build:server",
"build:browser": "yarn versionning && ng build --configuration=production",
"build:server": "ng run website:server --configuration=production",
"versionning": "node replace-version.js"
}

replace-version.js

var fs = require('fs')
var version =  Math.floor(Math.random()*100000000);
console.log('version',  version)
fs.readFile('src/environments/environment.prod.ts', 'utf8', function (err,data) {
if (err) { return console.log(err);}
var result = data.replace(/versions*:.*/, 'version : ' + version);
fs.writeFile('src/environments/environment.prod.ts', result, 'utf8', function (err) {
if (err) return console.log(err);
});
});

fs.writeFile('src/assets/version.json', '{ "version" : '+version+' }' , 'utf8', function (err) {
if (err) return console.log(err);
});

environment.prod.ts

export const environment = {
production: true,
versionFile: 'assets/version.json',
version : 60065676
};

资产/version.json

{ "version" : 60065676 }

加载站点时(在app.component中)，我调用checkVersion()

this.versionService.checkVersion(environment.versionFile, environment.version, environment.production)

version.service.ts

import {HttpClient} from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
@Injectable({  providedIn: 'root' })
export abstract class VersionService {
constructor(  @Inject(PLATFORM_ID) private platformId: Object, private http: HttpClient) {}

public checkVersion(url, version, prod) {
if (isPlatformBrowser(this.platformId) && prod) {
this.http.get(url + '?t=' + new Date().getTime()).subscribe(
(response: any) => {
const hashChanged = response.version && version !== response.version;
if (hashChanged) {
this.showPopupNewVersion();
}
},
(err) => {
console.error(err, 'Could not get version');
}
);
}
}

showPopupNewVersion(){
// SHOW alert or Popup or snackbar to warn the user
// Exec  window.location.reload(); after XXXsec or user click
}  
}

如果旧版本因为缓存而显示，它对我来说工作得很好。希望这能回答你的问题