В настоящее время мы работаем над новым проектом с регулярными обновлениями, которым ежедневно пользуется один из наших клиентов. Этот проект разрабатывается с использованием angular 2, и мы сталкиваемся с проблемами кеширования, то есть наши клиенты не видят последних изменений на своих машинах.
В основном файлы html / css для файлов js, кажется, обновляются должным образом, не доставляя особых проблем.
ng buildдобавлением -prodтега к сгенерированным именам файлов добавляется хеш. Это заставляет перезагрузить все, кроме index.html. В этом сообщении на github было несколько советов по перезагрузке.
Ответы:
angular-cli решает эту проблему , предоставляя --output-hashingфлаг для команды сборки (версии 6/7, более поздние версии см. здесь ). Пример использования:
ng build --output-hashing=all
Объединение и встряхивание дерева предоставляет некоторые детали и контекст. Идет ng help build, документирует флаг:
--output-hashing=none|all|media|bundles (String)
Define the output filename cache-busting hashing mode.
aliases: -oh <value>, --outputHashing <value>
Хотя это применимо только к пользователям angular-cli , оно работает блестяще и не требует каких-либо изменений кода или дополнительных инструментов.
Обновить
В ряде комментариев полезно и правильно указано, что этот ответ добавляет хеш к .jsфайлам, но ничего не делает для них index.html. Поэтому вполне возможно, что файлы index.htmlостанутся кешированными после того, как ng buildкеш- .jsфайлы будут заблокированы.
На этом этапе я остановлюсь на том, как мы контролируем кеширование веб-страниц во всех браузерах?
Нашел способ сделать это, просто добавьте строку запроса для загрузки ваших компонентов, например:
@Component({
selector: 'some-component',
templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`,
styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`]
})
Это должно заставить клиента загрузить серверную копию шаблона, а не браузер. Если вы хотите, чтобы он обновлялся только через определенный период времени, вы можете использовать вместо этого ISOString:
new Date().toISOString() //2016-09-24T00:43:21.584Z
И подставьте несколько символов, чтобы они изменились только через час, например:
new Date().toISOString().substr(0,13) //2016-09-24T00
Надеюсь это поможет
templateUrl: './app/shared/menu/menu.html?v=' + Math.random()
В каждом шаблоне html я просто добавляю следующие метатеги вверху:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
Насколько я понимаю, каждый шаблон является автономным, поэтому он не наследует мета-правила кеширования, установленные в файле index.html.
Комбинация ответа @Jack и ответа @ ranierbit должна помочь.
Установите флаг сборки ng для --output-hashing так:
ng build --output-hashing=all
Затем добавьте этот класс в службу или в приложение.
@Injectable()
export class NoCacheHeadersInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const authReq = req.clone({
setHeaders: {
'Cache-Control': 'no-cache',
Pragma: 'no-cache'
}
});
return next.handle(authReq);
}
}
Затем добавьте это к своим поставщикам в app.module:
providers: [
... // other providers
{
provide: HTTP_INTERCEPTORS,
useClass: NoCacheHeadersInterceptor,
multi: true
},
... // other providers
]
Это должно предотвратить проблемы с кешированием на живых сайтах для клиентских машин.
У меня была аналогичная проблема с кешированием index.html браузером или с более сложными средними cdn / прокси (F5 вам не поможет).
Я искал решение, которое на 100% проверяет наличие у клиента последней версии index.html, к счастью, я нашел это решение от Хенрика Пейнара:
https://blog.nodeswat.com/automagic-reload-for-clients-after-deploy-with-angular-4-8440c9fdd96c
Решение также решает случай, когда клиент остается с открытым браузером в течение нескольких дней, клиент проверяет наличие обновлений через определенные промежутки времени и перезагружается, если развернута более новая версия.
Решение немного сложное, но работает как шарм:
ng cli -- prodсоздает хешированные файлы, один из которых называется main. [hash] .jsПоскольку решение Хенрика Пейнара было для angular 4, были внесены незначительные изменения, я также помещаю сюда исправленные скрипты:
VersionCheckService:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class VersionCheckService {
// this will be replaced by actual hash post-build.js
private currentHash = '{{POST_BUILD_ENTERS_HASH_HERE}}';
constructor(private http: HttpClient) {}
/**
* Checks in every set frequency the version of frontend application
* @param url
* @param {number} frequency - in milliseconds, defaults to 30 minutes
*/
public initVersionCheck(url, frequency = 1000 * 60 * 30) {
//check for first time
this.checkVersion(url);
setInterval(() => {
this.checkVersion(url);
}, frequency);
}
/**
* Will do the call and check if the hash has changed or not
* @param url
*/
private checkVersion(url) {
// timestamp these requests to invalidate caches
this.http.get(url + '?t=' + new Date().getTime())
.subscribe(
(response: any) => {
const hash = response.hash;
const hashChanged = this.hasHashChanged(this.currentHash, hash);
// If new version, do something
if (hashChanged) {
// ENTER YOUR CODE TO DO SOMETHING UPON VERSION CHANGE
// for an example: location.reload();
// or to ensure cdn miss: window.location.replace(window.location.href + '?rand=' + Math.random());
}
// store the new hash so we wouldn't trigger versionChange again
// only necessary in case you did not force refresh
this.currentHash = hash;
},
(err) => {
console.error(err, 'Could not get version');
}
);
}
/**
* Checks if hash has changed.
* This file has the JS hash, if it is a different one than in the version.json
* we are dealing with version change
* @param currentHash
* @param newHash
* @returns {boolean}
*/
private hasHashChanged(currentHash, newHash) {
if (!currentHash || currentHash === '{{POST_BUILD_ENTERS_HASH_HERE}}') {
return false;
}
return currentHash !== newHash;
}
}
изменить на основной компонент приложения:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private versionCheckService: VersionCheckService) {
}
ngOnInit() {
console.log('AppComponent.ngOnInit() environment.versionCheckUrl=' + environment.versionCheckUrl);
if (environment.versionCheckUrl) {
this.versionCheckService.initVersionCheck(environment.versionCheckUrl);
}
}
}
Скрипт после сборки, который делает волшебство, post-build.js:
const path = require('path');
const fs = require('fs');
const util = require('util');
// get application version from package.json
const appVersion = require('../package.json').version;
// promisify core API's
const readDir = util.promisify(fs.readdir);
const writeFile = util.promisify(fs.writeFile);
const readFile = util.promisify(fs.readFile);
console.log('\nRunning post-build tasks');
// our version.json will be in the dist folder
const versionFilePath = path.join(__dirname + '/../dist/version.json');
let mainHash = '';
let mainBundleFile = '';
// RegExp to find main.bundle.js, even if it doesn't include a hash in it's name (dev build)
let mainBundleRegexp = /^main.?([a-z0-9]*)?.js$/;
// read the dist folder files and find the one we're looking for
readDir(path.join(__dirname, '../dist/'))
.then(files => {
mainBundleFile = files.find(f => mainBundleRegexp.test(f));
if (mainBundleFile) {
let matchHash = mainBundleFile.match(mainBundleRegexp);
// if it has a hash in it's name, mark it down
if (matchHash.length > 1 && !!matchHash[1]) {
mainHash = matchHash[1];
}
}
console.log(`Writing version and hash to ${versionFilePath}`);
// write current version and hash into the version.json file
const src = `{"version": "${appVersion}", "hash": "${mainHash}"}`;
return writeFile(versionFilePath, src);
}).then(() => {
// main bundle file not found, dev build?
if (!mainBundleFile) {
return;
}
console.log(`Replacing hash in the ${mainBundleFile}`);
// replace hash placeholder in our main.js file so the code knows it's current hash
const mainFilepath = path.join(__dirname, '../dist/', mainBundleFile);
return readFile(mainFilepath, 'utf8')
.then(mainFileData => {
const replacedFile = mainFileData.replace('{{POST_BUILD_ENTERS_HASH_HERE}}', mainHash);
return writeFile(mainFilepath, replacedFile);
});
}).catch(err => {
console.log('Error with post build:', err);
});
просто поместите скрипт в (новую) папку сборки, запустите скрипт, используя node ./build/post-build.jsпосле создания папки dist, используяng build --prod
Вы можете управлять кешем клиента с помощью заголовков HTTP. Это работает в любой веб-платформе.
Вы можете установить директивы этих заголовков, чтобы иметь точный контроль над тем, как и когда включать | отключать кеш:
Cache-ControlSurrogate-ControlExpiresETag (очень хороший)Pragma (если вы хотите поддерживать старые браузеры)Хорошее кэширование - это хорошо, но очень сложно во всех компьютерных системах . Взгляните на https://helmetjs.github.io/docs/nocache/#the-headers для получения дополнительной информации.