http/headers/cache-control (zh-TW translation) (#658)

* Cache-Control (zh-TW translation)

* fix: 移除多餘空白、替換括號、略為修正譯文

1 files changed, 219 insertions, 0 deletions

diff --git a/files/zh-tw/web/http/headers/cache-control/index.html b/files/zh-tw/web/http/headers/cache-control/index.html
new file mode 100644
index 0000000000..f52d0c9c0a
--- /dev/null
+++ b/files/zh-tw/web/http/headers/cache-control/index.html
@@ -0,0 +1,219 @@
+---
+title: Cache-Control
+slug: Web/HTTP/Headers/Cache-Control
+tags:
+  - Cache-Control
+  - General Header
+  - HTTP
+  - HTTP Header
+  - Reference
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><strong><code>Cache-Control</code></strong> 標頭中的<em>指令</em>用來控制 HTTP 請求、回應的<a href="/en-US/docs/Web/HTTP/Caching">快取</a>行為。HTTP 請求跟回應可以擁有不同的快取控制指令。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("CORS-safelisted response header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">語法</h2>
+
+<p>快取指令必須遵守這些規則：</p>
+
+<ul>
+ <li>大小寫沒差（但儘量用小寫）</li>
+ <li>指令之間用逗號（,）分開</li>
+ <li>Some directives have an optional argument, which can be either a <em>token</em> or a <em>quoted-string</em>. (See spec for definitions)</li>
+</ul>
+
+<h3 id="Cache_request_directives">請求用指令</h3>
+
+<p>可以在 HTTP 請求中使用的標準 <code>Cache-Control</code> 指令</p>
+
+<pre class="brush: html">Cache-Control: max-age=&lt;秒數&gt;
+Cache-Control: max-stale[=&lt;秒數&gt;]
+Cache-Control: min-fresh=&lt;秒數&gt;
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: only-if-cached
+</pre>
+
+<h3 id="Cache_response_directives">回應用指令</h3>
+
+<p>可以在 HTTP 回應中使用的標準  <code>Cache-Control</code> 指令</p>
+
+<pre class="brush: html">Cache-Control: must-revalidate
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: public
+Cache-Control: private
+Cache-Control: proxy-revalidate
+Cache-Control: max-age=&lt;秒數&gt;
+Cache-Control: s-maxage=&lt;秒數&gt;
+</pre>
+
+<h3 id="Extension_Cache-Control_directives">擴充 Cache-Control 指令</h3>
+
+<p>這些擴充的 <code>Cache-Control</code> 指令不是 HTTP 快取的核心標準。使用前請檢查<a href="#browser_compatibility">相容性</a>，客戶端會直接忽略不支援的指令。</p>
+
+<pre class="brush: html">Cache-Control: immutable
+Cache-Control: stale-while-revalidate=&lt;秒數&gt;
+Cache-Control: stale-if-error=&lt;秒數&gt;
+</pre>
+
+<h2 id="Directives">指令</h2>
+
+<h3 id="Cacheability">可快取性</h3>
+
+<p>這些指令定義 HTTP 請求/回應是否可以做快取、儲存在哪，以及使用前是否要跟後端伺服器做驗證</p>
+
+<dl>
+ <dt><code>public</code></dt>
+ <dd>此回應可以被<em>任何快取軟體</em>儲存起來，即使它本身通常是不可快取的。</dd>
+ <dt><code>private</code></dt>
+ <dd>此回應只可以被<em>瀏覽器</em>儲存起來，即使它本身通常是不可快取的。<strong>如果你真的不要任何快取軟體儲存你的回應，可以使用 <code>no-store</code> 。</strong><em>這個指令不是用來防止快取軟體儲存回應的。</em></dd>
+ <dt><code>no-cache</code></dt>
+ <dd>此回應可以被<em>任何快取軟體</em>儲存起來，即使它本身通常是不可快取的。不過，在使用儲存起來的 HTTP 回應之前，<em>必須</em>必須向後端伺服器做驗證，因此你不能拿 <code>no-cache</code> 跟 <code>immutable</code> 一起使用。<strong>如果你真的不要任何快取軟體儲存你的回應，可以使用 <code>no-store</code> 。</strong><em>這個指令不是用來防止快取軟體儲存回應的。</em></dd>
+ <dt><code>no-store</code></dt>
+ <dd>此回應<strong>不能</strong>被<em>任何快取軟體</em>儲存起來。當然它無法防止 <em>先前儲存起來</em> 的回應被回傳。客戶端可以用 <code>max-age=0</code> 來清除快取，並強制向後端伺服器做驗證。（其他指令跟 <code>no-store</code> 一起使用都無效）</dd>
+</dl>
+
+<h3 id="Expiration">過期</h3>
+
+<dl>
+ <dt><code>max-age=&lt;秒數&gt;</code></dt>
+ <dd>快取有效的最大時間。跟 <code>Expires</code> 不一樣，這個指令是相對於請求當下的時間。</dd>
+ <dt><code>s-maxage=&lt;秒數&gt;</code></dt>
+ <dd>覆寫 <code>max-age</code> 或者 <code>Expires</code> 標頭，不過只對共用快取軟體生效（比如 nginx）。私有快取會無視這個指令。</dd>
+ <dt><code>max-stale[=&lt;秒數&gt;]</code></dt>
+ <dd>表示客戶端可以接受過期回應。可以宣告客戶端最多能接受過期多久。</dd>
+ <dt><code>min-fresh=&lt;秒數&gt;</code></dt>
+ <dd>表示客戶端想要有效時間<em>至少</em>在指定秒數以上的回應。</dd>
+ <dt><code>stale-while-revalidate=&lt;秒數&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>表示客戶端可以接受過期回應，但同時在背景檢查最新版本。<em>秒數</em>用來控制客戶端最多能接受過期多久。何時過期取決於 <code>max-age</code> 的值。想了解更多細節請到 "<a href="https://web.dev/stale-while-revalidate">Keeping things fresh with <code>stale-while-revalidate</code></a>" 。</dd>
+ <dt><code>stale-if-error=&lt;秒數&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>表示客戶端會執行驗證，若驗證錯誤了就直接使用過期回應。<em>秒數</em>用來控制客戶端最多能接受過期多久。</dd>
+</dl>
+
+<h3 id="Revalidation_and_reloading">驗證與重新讀取</h3>
+
+<dl>
+ <dt><code>must-revalidate</code></dt>
+ <dd>表示一旦過期，必須向後端伺服器做<a href="/en-US/docs/Web/HTTP/Caching#cache_validation">驗證</a>。</dd>
+ <dt><code>proxy-revalidate</code></dt>
+ <dd>跟 <code>must-revalidate</code> 類似，不過只對共用快取軟體生效（比如 nginx）。私有快取會無視這個指令。</dd>
+ <dt><code>immutable</code></dt>
+ <dd>表示回應內容<strong>不會改變</strong> 。這個資源<em>不會過期</em>，因此即使使用者手動重新整理頁面，客戶端也不會用驗證標頭 （比如 <code>If-None-Match</code> 或 <code>If-Modified-Since</code>）。 Clients that aren't aware of this extension must ignore them as per the HTTP specification. 在 Firefox 中， <code>immutable</code> 只有在使用 <code>https://</code> 時會生效。想知道更多資訊，可以閱讀<a href="https://bitsup.blogspot.de/2016/05/cache-control-immutable.html">這篇文章</a>。</dd>
+</dl>
+
+<h3 id="Other">其他</h3>
+
+<dl>
+ <dt><code>no-transform</code></dt>
+ <dd>位於中間的快取軟體或代理軟體不能修改回應內容、{{HTTPHeader("Content-Encoding")}}、{{HTTPHeader("Content-Range")}}、{{HTTPHeader("Content-Type")}}。因此它可能造成某些代理軟體或瀏覽器的功能失效，比如說 <a href="https://support.google.com/webmasters/answer/6211428">Google’s Web Light</a>可以替很慢的網路事先壓縮圖片。</dd>
+ <dt><code>only-if-cached</code></dt>
+ <dd>由<em>客戶端</em>設定，表示不想經由網路得到回應。所以快取軟體可能會回傳先前儲存的回應，或者是 {{HTTPStatus("504")}} 狀態碼。使用驗證標頭如 <code>If-None-Match</code> 是沒有意義的。由伺服器在 HTTP 回應中設定 <code>only-if-cached</code> 指令也沒有意義。</dd>
+</dl>
+
+<h2 id="Examples">範例</h2>
+
+<h3 id="Preventing_caching">防止被快取</h3>
+
+<p>想要禁止快取一個資源，你可以在回應中設定這個標頭：</p>
+
+<dl>
+ <dt>Good:</dt>
+ <dd>
+ <pre class="example-good brush: http no-line-numbers">Cache-Control: no-store</pre>
+
+ <div class="notecard note">
+ <p>這個 <code>no-store</code> 指令使得回應再也不會被儲存，但它無法防止使用先前儲存、而且仍有效的快取。多設定 <code>max-age=0</code> 可以強制執行驗證（也就會清除既有快取）。</p>
+
+ <pre class="brush: html">Cache-Control: no-store, max-age=0
+</pre>
+ </div>
+ </dd>
+ <dt>Bad:</dt>
+ <dd>
+ <pre class="example-bad brush: http no-line-numbers">Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0</pre>
+ </dd>
+</dl>
+
+<h3 id="Caching_static_assets">快取靜態檔案</h3>
+
+<p>對於那些不會更新的檔案，你可以在回應中使用下列這個激進的標頭。比如說用在圖片、CSS 檔案，以及 JavaScript 檔案。附帶一提，也可以看看 <code>Expires</code> 標頭。</p>
+
+<pre class="brush: http no-line-numbers">Cache-Control: public, max-age=604800, immutable
+</pre>
+
+<h3 id="Requiring_revalidation">必須執行驗證</h3>
+
+<p><code>no-cache</code>、<code>max-age=0, must-revalidate</code> 是同樣的意思。<br>
+ 表示客戶端可以儲存資源，但使用它前必須做驗證。這表示每次都會發生 HTTP 請求，不過只要沒過期就不用下載完整內容</p>
+
+<pre class="brush: http no-line-numbers">Cache-Control: no-cache</pre>
+
+<pre class="brush: http no-line-numbers">Cache-Control: max-age=0, must-revalidate</pre>
+
+<p><strong>附帶一提</strong>： 這個設定可以在伺服器掛掉的時候使用過期資源</p>
+
+<pre class="brush: http no-line-numbers">Cache-Control: max-age=0</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC(8246, "HTTP Immutable Responses")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(7234, "Hypertext Transfer Protocol (HTTP/1.1): Caching")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(5861, "HTTP Cache-Control Extensions for Stale Content")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("http.headers.Cache-Control")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">HTTP Caching FAQ</a></li>
+ <li><a href="https://www.mnot.net/cache_docs/">Caching Tutorial for Web Authors and Webmasters</a></li>
+ <li>Guide: <em><a href="https://csswizardry.com/2019/03/cache-control-for-civilians"><code>Cache-Control</code> for civilians</a></em></li>
+ <li>{{HTTPHeader("Age")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>