首頁 web前端 html教學 HTML 5 應用程式快取

HTML 5 應用程式快取

Dec 27, 2016 pm 02:48 PM

HTML 5 應用程式快取

簡介

使用 HTML5,透過建立 cache manifest 文件,可以輕鬆地建立 web 應用的離線版本。

 

什麼是應用程式快取(Application Cache)?

HTML5 引入了應用程式緩存,這意味著 web 應用可進行緩存,並可在沒有因特網連接時進行存取。

應用程式快取為應用程式帶來三個優點:

離線瀏覽- 用戶可在應用離線時使用它們

速度- 已快取資源加載得更快

減少伺服器負載- 瀏覽器將只從伺服器下載更新過或更改過的資源。

瀏覽器支援

所有主流瀏覽器均支援應用程式緩存,除了 Internet Explorer。

HTML5 Cache Manifest 實例

下面的例子展示了帶有cache manifest 的HTML 文件(供離線瀏覽):

實例

<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
登入後複製

Cache Manifest 基礎的快取

實例

<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
登入後複製

Cache Manifest 基礎緩存

實例如需啟用> 標籤中包含manifest 屬性:

CACHE MANIFEST /theme.css /logo.gif /main.js
登入後複製

每個指定了manifest 的頁面在使用者對其存取時都會被快取。如果未指定 manifest 屬性,則頁面不會被快取(除非在 manifest 檔案中直接指定了該頁面)。

manifest 檔案的建議的檔案副檔名是:".appcache"。

請注意,manifest 檔案需要配置正確的 MIME-type,即 "text/cache-manifest"。必須在 web 伺服器上進行設定。

Manifest 文件

manifest 文件是簡單的文字文件,它告知瀏覽器被快取的內容(以及不快取的內容)。

manifest 檔案可分為三個部分:

CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取

NETWORK - 在此標題下列出的檔案需要與伺服器的連接,且不會被快取

FALLBACK - 在此標題下列出的檔案規定當頁面無法存取時的回退頁面(例如404 頁)

CACHE MANIFEST

第一行,CACHE MANIFEST,是必需的:

NETWORK: login.asp
登入後複製

上面的manifest 文件列出了三個資源:一個 CSS 文件,一個GIF 圖像,以及一個 JavaScript 文件。當 manifest 檔案載入後,瀏覽器會從網站的根目錄下載這三個檔案。然後,無論用戶何時與網際網路斷開連接,這些資源仍然是可用的。

NETWORK

下面的NETWORK 小節規定文件"login.asp" 永遠不會被緩存,離線時是不可用的:

NETWORK: *
登入後複製

可以使用星號來指示所有其他資源/文件都需要因特網連接:

FALLBACK: /html5/ /404.html
登入後複製

FALLBACK

下面的FALLBACK 小節規定如果無法建立因特網連接,則用"offline.html" 替代/html5/ 目錄中的所有文件:

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
登入後複製

註釋:第一個URI 是資源,第二個是替補。

更新緩存

一旦應用被緩存,它就會保持緩存直到發生下列情況:

用戶清空瀏覽器緩存

manifest 文件被修改(參閱下面的提示)

由程序來更新應用緩存

實例- 完整的Manifest 檔案

rrreee

重要的提示:以"#" 開頭的是註解行,但也可滿足其他用途。應用程式的快取會在其 manifest 檔案更改時被更新。如果您編輯了一幅圖片,或是修改了一個 JavaScript 函數,這些改變都不會重新快取。更新註解行中的日期和版本號碼是一種使瀏覽器重新快取檔案的方法。

關於應用程式快取的註解

請留心快取的內容。

一旦檔案被緩存,則瀏覽器會繼續展示已快取的版本,即使您修改了伺服器上的檔案。為了確保瀏覽器更新緩存,您需要更新 manifest 檔案。


註釋:瀏覽器對快取資料的容量限制可能不太一樣(某些瀏覽器設定的限制是每個網站 5MB)。

 以上就是HTML 5 應用程式快取的內容,更多相關內容請關注PHP中文網(www.php.cn)!

🎜🎜🎜
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles