應(yīng)用緩存 AllicationCache
瀏覽器本身的緩存機(jī)制
- 瀏覽器會(huì)對(duì)靜態(tài)文件(html,css,js,圖片等)進(jìn)行自動(dòng)緩存
- 下次訪問(wèn)該網(wǎng)頁(yè)烫幕,會(huì)讀取緩存
- 讀取緩存之前進(jìn)行判斷俺抽,第一次判斷緩存時(shí)間和服務(wù)器上傳文件的最后一次修改時(shí)間。
- 如果緩存時(shí)間大于最后一次修改時(shí)間较曼,證明緩存之后磷斧,服務(wù)器上沒(méi)有對(duì)文件進(jìn)行修改,此時(shí)捷犹,瀏覽器會(huì)直接讀取緩存文件
- 如果緩存時(shí)間小于最后一次修改時(shí)間弛饭,證明緩存之后,服務(wù)器又對(duì)對(duì)文件進(jìn)行修改伏恐,此時(shí)孩哑,瀏覽器會(huì)重新下載服務(wù)器上的靜態(tài)文件,并重新進(jìn)行緩存
應(yīng)用緩存的優(yōu)點(diǎn)
- 進(jìn)行離線瀏覽
- 速度翠桦,已緩存資源加載得更快
- 減少服務(wù)器負(fù)載,瀏覽器將只從服務(wù)器下載更新過(guò)或修改過(guò)的資源
Cache Manifest
- manifest屬性:如果啟用應(yīng)用程序緩存胳蛮,在文檔的
<html>
標(biāo)簽中包含manifest屬性销凑,每個(gè)指定了manifest的頁(yè)面在用戶對(duì)其訪問(wèn)時(shí)都會(huì)被緩存。如果未指定 manifest 屬性仅炊,則頁(yè)面不會(huì)被緩存(除非在 manifest 文件中直接指定了該頁(yè)面)斗幼。 - manifest 文件的建議的文件擴(kuò)展名是:".appcache"。
- 在html中使用屬性
manifest
引入 manifest文件 - 請(qǐng)注意抚垄,manifest 文件需要配置正確的 MIME-type蜕窿,即 "text/cache-manifest"。必須在 web 服務(wù)器上進(jìn)行配置呆馁。
- Manifest文件
- manifest 文件是簡(jiǎn)單的文本文件桐经,它告知瀏覽器被緩存的內(nèi)容(以及不緩存的內(nèi)容)。
- manifest 文件可分為三個(gè)部分:
- CACHE - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
- NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接浙滤,且不會(huì)被緩存
- FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面(比如 404 頁(yè)面)
如:
CACHE MANIFEST
#version: 0.0.1
緩存文件.html
緩存文件.css
NETWORK:
不緩存的文件.html
FALLBACK:
404.html
-
更新緩存
- 一旦應(yīng)用被緩存阴挣,它就會(huì)保持緩存直到發(fā)生下列情況:用戶清空瀏覽器緩存;manifest 文件被修改纺腊;由程序來(lái)更新應(yīng)用緩存
- 一旦文件被緩存畔咧,則瀏覽器會(huì)繼續(xù)展示已緩存的版本,即使您修改了服務(wù)器上的文件揖膜。為了確保瀏覽器更新緩存誓沸,您需要更新 manifest 文件。
applicationCache對(duì)象
- 屬性
- status 返回緩存的狀態(tài)
- 方法
- update() 發(fā)起應(yīng)用緩存下載進(jìn)程
- abort() 取消正在進(jìn)行的緩存下載
- swapcache() 切換成本地最新的緩存環(huán)境
- 事件
- checking 用戶代理檢測(cè)更新或者在第一次嘗試下載manifest文件的時(shí)候壹粟,本事件往往是第一個(gè)觸發(fā)的
- noupdate 檢測(cè)出manifest文件沒(méi)有更新
- downloading 用戶代理發(fā)現(xiàn)更新并且正在取資源拜隧,或者第一次下載manifest文件列表中列舉的資源
- progress 用戶代理正在下載資源manifest文件中的需要緩存的資源
- updateready manifest中列舉的文件已經(jīng)重新下載并更新成功,接下來(lái)js可以使用swapCache()方法更新到應(yīng)用程序中
- error
- absolete manifest的請(qǐng)求出現(xiàn)404或者410錯(cuò)誤,應(yīng)用程序緩存被取消
WebRTC
- WebRTC是“網(wǎng)絡(luò)實(shí)時(shí)通信”(Web Real Time Communication)的縮寫虹蓄,它主要用來(lái)讓瀏覽器實(shí)時(shí)獲取和交換視頻犀呼、音頻和數(shù)據(jù)。
作用
- 調(diào)用系統(tǒng)的攝像頭和麥克風(fēng)
使用
-
navigator.getUserMedia(options薇组, success, error)
- streams:表示包括哪些多媒體設(shè)備的對(duì)象
- success:回調(diào)函數(shù)外臂,獲取多媒體設(shè)備成功時(shí)調(diào)用,接受一個(gè)MediaStream的實(shí)例作為參數(shù)
- error:回調(diào)函數(shù),獲取多媒體設(shè)備失敗時(shí)調(diào)用律胀,接受一個(gè)error對(duì)象作為參數(shù)
-
options
{ video:true/false, audio:true/false }
MediaStream
成功后的回調(diào)函自動(dòng)傳入該對(duì)象作為參數(shù)
觸摸屏的事件
事件類型
- touchstart
- touchend
- touchmove
touchEvent
- targetTouches 屬性 獲取touchlist對(duì)象宋光,一個(gè) TouchList 對(duì)象,是包含了如下觸點(diǎn)的 Touch 對(duì)象:觸摸起始于當(dāng)前事件的目標(biāo) element 上炭菌,并且仍然沒(méi)有離開觸摸平面的觸點(diǎn). 只讀屬性.
touchList
- 表示所有touch對(duì)象的集合
- 一個(gè)touch對(duì)象表示一個(gè)觸摸點(diǎn)
touch對(duì)象
*clientX 觸點(diǎn)相對(duì)于可見(jiàn)視區(qū)(visual viewport)左邊沿的的X坐標(biāo). 不包括任何滾動(dòng)偏移. 只讀屬性.
*clientY 觸點(diǎn)相對(duì)于可見(jiàn)視區(qū)(visual viewport)上邊沿的的Y坐標(biāo). 不包括任何滾動(dòng)偏移. 只讀屬性.
*pageX 觸點(diǎn)相對(duì)于HTML文檔左邊沿的的X坐標(biāo). 當(dāng)存在水平滾動(dòng)的偏移時(shí), 這個(gè)值包含了水平滾動(dòng)的偏移. 只讀屬性.
*pageY 觸點(diǎn)相對(duì)于HTML文檔上邊沿的的Y坐標(biāo). 當(dāng)存在水平滾動(dòng)的偏移時(shí), 這個(gè)值包含了垂直滾動(dòng)的偏移. 只讀屬性.
*screenX
*screenY
*....