瀏覽器快取與緩存（Etag 與 If-None-Match）
這邊會先示範使用 Etag 與 If-None-Match 來進行緩存，首先server會先在回應請求時在 header 附加上etag，etag 通常會是由response內容進行 hash 而成，然後傳給前端，之後前端下次發送相同 API 給 server 時會把該 etag 轉為 If-None-Match 發送給 server，server 會比對是否跟上次 response內容進行 hash 而成的etag 相同，如果相同則返回304 status code。
這個部分 If-None-Match 瀏覽器會自動實作（value自動在下次請求時設為 Etag 的 value），但Etag附加以及If-None-Match 的比對需要自行在 Server實作。
const http = require('http');
const fs = require('fs');
const etag = require('etag');
const server = http.createServer(function (req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTION, PUT, POST, DELETE');
res.setHeader('Access-Control-Allow-Headers', '*');
if (req.url === '/test') {
fs.readFile("./test.html", function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(data);
res.end();
});
}
if (req.url === '/cc') {
const payload = {
a: 11112222,
c: 222
};
if (etag(JSON.stringify(payload)) === req.headers["if-none-match"]) {
res.statusCode = 304;
res.end(JSON.stringify(payload));
} else {
res.setHeader('ETag', etag(JSON.stringify(payload)))
res.end(JSON.stringify(payload))
}
}
});
server.listen(5000);
console.log('Node.js web server running at port 5000')
<!doctype HTML>
<html>
<head>
<title>
Hi
</title>
<script>
fetch('http://localhost:5000/cc')
.then(data => {
console.log(data)
})
</script>
</head>
<body>
<h1>
Hello
</h1>
</body>
</html>
1.如果是跨域請求會在request header 顯示 provisional headers are shown ，所以會看不到 If-None-Match
2.有時chrome 304沒顯示可以用firebox試看看。
3.記得要點選瀏覽器的 disable cache 然後再點掉，讓他忘記快取
