H5應用快取-Manifest的具體介紹-H5教程-PHP中文網

首頁

web前端

H5教程

H5應用快取-Manifest的具體介紹

黄舟

Apr 18, 2017 am 09:55 AM

導讀

Manifest 是H5提供的應用程式快取#機制, 基於它web應用可以實現離線訪問(offline cache). 為此, 瀏覽器還提供了應用緩存的api--applicationCache. 雖然manifest的技術已被web標準廢棄, 但這不影響我們嘗試去了解它. 也正是因為manifest的應用快取機制如此誘人, 餓了麼和office 365郵箱等都還在使用著它!

描述

對manifest熟悉的同學可以跳過此節.

鑑於manifest應用快取的技術, 我們可以做到:

離線存取: 即使伺服器掛了, 或沒有網路, 使用者依然可以正常瀏覽網頁內容.

存取更快: 資料存在於本地, 省去了瀏覽器發起http請求的時間, 因此訪問更快, 行動端效果更為明顯.

#降低負載: 瀏覽器只在manifest文件改動時才去伺服器下載需要快取的資源, 大大降低了伺服器負載.

manifest快取的過程如下(來自網路):

支援性

主流瀏覽器都支援manifest應用快取技術. 如下表格:

H5應用快取-Manifest的具體介紹

H5標準中, Offline Web applications 部分有如下描述:

This feature is in the process of being removed from the Web platform. 
(This is a long process that takes many years.) 
Using any of the offline Web application features at this time is highly discouraged. Use service workers instead. [SW]

登入後複製

因此後續我將在其他文章中繼續介紹service workers, 本篇繼續關注manifest.

如何開啟應用程式快取

manifest使用快取清單進行管理, 快取清單需要與html標籤進行關聯. 如下:

<html manifest="test.appcache">
  ...
</html>

登入後複製

在html標籤中指定manifest檔, 便表示該網頁使用manifest進行離線快取. 該網頁內需要快取的檔案清單需要在test.appcache 文字檔中指定.

manifest快取清單

就像寫作文一樣, manifest採用經典的三段式. 分別為: CACHE, NETWORK 和FALLBACK. 如下, 先看一個栗子

以上是H5應用快取-Manifest的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

h5是指什麼 Aug 02, 2023 pm 01:52 PM

H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。

manifest檔案有什麼用 Mar 13, 2023 pm 02:02 PM

manifest檔案的作用是聲明元件，並指定app的一些權限（permission）和instrumentation（安全控制和測試）；manifest作為整個Android應用程式的入口，其Manifest.xml描述了package中暴露的元件，他們各自的實現類，各種能被處理的數據和啟動位置。

如何區分H5,WEB前端,大前端,WEB全端? Aug 03, 2022 pm 04:00 PM

本文帶你快速區分H5、WEB前端、大前端、WEB全棧，希望對需要的朋友有幫助！

h5如何使用position Dec 26, 2023 pm 01:39 PM

在H5中使用position屬性可以透過CSS控制元素的定位方式：1、相對定位relative，語法為「style="position: relative;」；2、絕對定位absolute，語法為「style="position: absolute; 」；3、固定定位fixed，語法為「style="position: fixed;」等等。

h5怎麼實現web端向上滑動載入下一頁 Mar 11, 2024 am 10:26 AM

實現步驟：1、監聽頁面的滾動事件；2、判斷捲動至頁面底部；3、載入下一頁資料；4、更新頁面捲動位置即可。

vue3怎麼實作H5表單驗證元件 Jun 03, 2023 pm 02:09 PM

效果圖描述基於vue.js，不依賴其他外掛程式或函式庫實作；基礎功能使用保持和element-ui一致，內部實作做了一些行動裝置差異的調整。目前建置平台使用uni-app官方腳手架構建，因為當下行動端大多情況就h6和微信小程式兩種，所以一套程式碼跑多端十分適合技術選型。實作思路核心api：使用provide和inject，對應和。在元件中，內部用一個變數（陣列）去將所有實例儲存起來，同時把要傳遞的資料透過provide暴露出去；元件則在內部用inject去接收父元件提供過來的數據，最後把自身的屬性和方法提交