จะป้องกัน Browser cache บนเว็บไซต์ Angular 2 ได้อย่างไร?

Question 1

ขณะนี้เรากำลังดำเนินการโครงการใหม่ที่มีการอัปเดตเป็นประจำซึ่งลูกค้ารายหนึ่งของเราจะใช้งานทุกวัน โครงการนี้กำลังพัฒนาโดยใช้ angular 2 และเรากำลังประสบปัญหาแคชนั่นคือลูกค้าของเราไม่เห็นการเปลี่ยนแปลงล่าสุดในเครื่องของพวกเขา

โดยส่วนใหญ่ไฟล์ html / css สำหรับไฟล์ js ดูเหมือนจะได้รับการอัปเดตอย่างถูกต้องโดยไม่ก่อให้เกิดปัญหามากนัก

Question 2

angular-cliแก้ไขปัญหานี้โดยระบุ--output-hashingแฟล็กสำหรับ คำสั่งbuild (เวอร์ชัน 6/7 สำหรับเวอร์ชันที่ใหม่กว่าโปรดดูที่นี่ ) ตัวอย่างการใช้งาน:

ng build --output-hashing=all

Bundling & Tree-Shakingให้รายละเอียดและบริบท ทำงาน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ไฟล์

ณ จุดนี้ฉันจะเลื่อนไปที่เราจะควบคุมการแคชหน้าเว็บในเบราว์เซอร์ทั้งหมดได้อย่างไร

Question 3

พบวิธีในการทำเช่นนี้เพียงแค่เพิ่มสตริงการสืบค้นเพื่อโหลดส่วนประกอบของคุณดังนี้:

@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

หวังว่านี่จะช่วยได้

Question 4

ในเทมเพลต 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

Question 5

การรวมกันของคำตอบของ @ แจ็คและคำตอบของ @ ranierbit น่าจะเป็นเคล็ดลับ

ตั้งค่าแฟล็ก ng build สำหรับ --output-hashing ดังนั้น:

ng build --output-hashing=all

จากนั้นเพิ่มคลาสนี้ในบริการหรือในไฟล์ app.module

@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
]

สิ่งนี้ควรป้องกันปัญหาการแคชบนไซต์ที่ใช้งานจริงสำหรับเครื่องไคลเอนต์

Question 6

ฉันมีปัญหาคล้ายกันกับ index.html ที่เบราว์เซอร์แคชหรือยุ่งยากมากขึ้นโดย cdn / proxies กลาง (F5 จะไม่ช่วยคุณ)

ฉันมองหาโซลูชันที่ตรวจสอบได้ 100% ว่าลูกค้ามี index.html เวอร์ชันล่าสุด แต่โชคดีที่พบโซลูชันนี้โดย Henrik Peinar:

https://blog.nodeswat.com/automagic-reload-for-clients-after-deploy-with-angular-4-8440c9fdd96c

โซลูชันยังแก้ปัญหาในกรณีที่ไคลเอนต์อยู่กับเบราว์เซอร์ที่เปิดเป็นเวลาหลายวันไคลเอ็นต์จะตรวจสอบการอัปเดตตามช่วงเวลาและโหลดซ้ำหากเวอร์ชันที่ใหม่กว่าปรับใช้

วิธีแก้ปัญหาค่อนข้างยุ่งยาก แต่ใช้งานได้เหมือนมีเสน่ห์:

ใช้ข้อเท็จจริงที่ng cli -- prodสร้างไฟล์ที่แฮชโดยหนึ่งในนั้นเรียกว่า main. [hash] .js
สร้างไฟล์ version.json ที่มีแฮชนั้น
สร้างบริการเชิงมุม VersionCheckService ที่ตรวจสอบ version.json และโหลดใหม่หากจำเป็น
โปรดทราบว่าสคริปต์ js ที่ทำงานหลังจากการปรับใช้จะสร้างให้คุณทั้ง version.json และแทนที่แฮชในบริการเชิงมุมดังนั้นจึงไม่จำเป็นต้องใช้งานด้วยตนเอง แต่การรัน post-build.js

เนื่องจากโซลูชันของ Henrik Peinar เป็นของเชิงมุม 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;
    }
}

เปลี่ยนเป็น AppComponent หลัก:

@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);
  });

เพียงวางสคริปต์ในโฟลเดอร์build (ใหม่) เรียกใช้สคริปต์โดยใช้node ./build/post-build.jsหลังจากสร้างโฟลเดอร์ dist โดยใช้ng build --prod

Question 7

คุณสามารถควบคุมแคชไคลเอนต์ด้วยส่วนหัว HTTP สิ่งนี้ใช้ได้กับกรอบงานเว็บใด ๆ

คุณสามารถตั้งค่าคำสั่งส่วนหัวเหล่านี้ให้มีการควบคุมแบบละเอียดว่าจะเปิดใช้งานอย่างไรและเมื่อใด | ปิดใช้งานแคช:

Cache-Control
Surrogate-Control
Expires
ETag (ดีมาก)
Pragma (หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่า)

แคชที่ดีเป็นสิ่งที่ดี แต่ที่ซับซ้อนมากในระบบคอมพิวเตอร์ทั้งหมด ดูข้อมูลเพิ่มเติมได้ที่https://helmetjs.github.io/docs/nocache/#the-headers