H5緩存-Manifest的範例程式碼分享（圖文）-H5教程-PHP中文網

首頁

web前端

H5教程

H5緩存-Manifest的範例程式碼分享（圖文）

黄舟

Apr 01, 2017 am 11:56 AM

在app中更新h5頁面一直有緩存問題。只能卸載重裝(are u kidding me?)。一點之後，頁面加入no-cache.

<meta http-equiv="Cache-Control" content="no-cache">

告訴瀏覽器不要快取頁面。不是說每次都全新下載，而是更新了就會重新下載。 4s更新了，6sp還是老樣子。了。嘆號的圖片和人物的頭像都顯示不出來。，man

est

no-cache+更新檔名+更新位址待測

manifest

介紹可以先看w3shool的：www.w3school.com.cn/html5/html_5_app_cache.asp ,這裡就說下使用的情況。

 location / {
           root   html;           expires -1;
           index  index.html index.htm;
        }

3.設定nginx mime

nginx -s reload

mime types檔案都在conf目錄下。 ##這個圖說明2個事情，一個是流程上會先下載index.appcache，然後會陸續觸發checking event,download event，progress event 和updateReady event.二個是預設快取了當前頁面。而且居然是帶個參數也緩存。看樣子只要地址不一樣的當前頁都給緩存了(上面的緩存目錄我只寫了一個zepto)。再刷新頁面：

index.appcache沒有更新就不會觸發檢查。

載入快取的檔案

狀態

是200，size一欄是from cache。從瀏覽器載入的是304，時間上一個是幾毫秒，一個是十幾毫秒。 f12進入開發者模式，在Application cache一欄可以看見已快取的檔案。

但在這個地方是無法清理的，需要在Application 中的

clear

storage來清理。

更新已快取的檔案

最明顯的就是首頁，預設為快取下來。這個時候你改變首頁內容而不修改index.appache是完全沒有作用的。例如你刪掉一個js的引用

，客戶端還是下載了這個js。這個時候你需要修改這個快取檔案：

<html manifest="index.appcache">

注意到雖然index.appache和index位於同一級，但不能寫index.html，得寫相當於網站的路徑，其他資源也是一樣。這時候觸發更新了，但頁面還是載入的快取資源，所以還需要做一個處理：

  window.applicationCache.addEventListener("updateready", function(){
    location.reload()
  });

这样才会加载最新的页面。如果首页再发生修改，可以随意(加个空格，加空行)修改缓存文件，就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式，框架js，图片)缓存下来，经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。当然，如果无所谓消息或者reload的影响。no-cache还是很方便，毕竟这个index.appache一旦加上，难以去掉，除非清理缓存。

以上是H5緩存-Manifest的範例程式碼分享（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

理解H5：含義和意義May 11, 2025 am 12:19 AM

H5是HTML5，是HTML的第五個版本。 HTML5提升了網頁的表現力和交互性，引入了語義化標籤、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術的發展。

H5：可訪問性和網絡標準合規性May 10, 2025 am 12:21 AM

無障礙訪問和網絡標準遵循對網站至關重要。 1）無障礙訪問確保所有用戶都能平等訪問網站，2）網絡標準遵循提高網站的可訪問性和一致性，3）實現無障礙訪問需使用語義化HTML、鍵盤導航、顏色對比度和替代文本，4）遵循這些原則不僅是道德和法律要求，還能擴大用戶群體。

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

See all articles