如何讓網(wǎng)站用上HTML5 Manifest

作者：人人網(wǎng)FED 2017-10-12 15:58:10

Manifest是用來(lái)做離線頁(yè)面的，即使斷網(wǎng)也能正常打開頁(yè)面，用起來(lái)簡(jiǎn)單，但是在實(shí)際使用中存在以下問題：

(1)如何自動(dòng)緩存所有的頁(yè)面的資源?因?yàn)閙anifest不能使用*通配符進(jìn)行cache

(2)如果網(wǎng)站資源更新，怎么讓manifest文件自動(dòng)更新?不然如果用戶不清緩存即使聯(lián)網(wǎng)也會(huì)加載老頁(yè)面

我覺得很多網(wǎng)站沒有使用Manifest是因?yàn)樯厦嫣岬降膬蓚€(gè)原因，有些人有嘗試過，但使用起來(lái)比較麻煩，離線應(yīng)用價(jià)值好像不太大。但是使用Manifest還是有很多好處的，特別是像博客等之類的偏向于展示的網(wǎng)站，或者是在線APP，這種網(wǎng)站的數(shù)據(jù)動(dòng)態(tài)變化頻率比較低，不需要頻繁地向服務(wù)請(qǐng)求數(shù)據(jù)。這樣當(dāng)用戶需要頻繁退回首頁(yè)或者頻繁地在幾個(gè)頁(yè)面來(lái)回切換的時(shí)候，由于幾乎所有資源都在本地，所以加載起來(lái)是瞬時(shí)的。

1. 使用Manifest

使用Manifest很簡(jiǎn)單，就是在html標(biāo)簽上加一個(gè)manifest屬性：

<html manifest="/static/manifest/home.appcache">

這個(gè)屬性指向一個(gè)manifest的文件，這個(gè)文件指明了當(dāng)前頁(yè)面哪些資源需要進(jìn)行離線緩存，如下home.appcache：

CACHE MANIFEST 
#9/27/2017, 3:04:25 PM 
#html 
https://github.com/ 
#img 
https://assets-cdn.github.com/images/modules/site/universe-octoshop.png 
https://assets-cdn.github.com/images/modules/site/universe-wordmark.png 
#css 
https://assets-cdn.github.com/assets/frameworks-bedfc518345231565091.css 
#js 
https://assets-cdn.github.com/assets/compat-94eba6e3cd1fa18902d9.js 
NETWORK: 
* 
  
FALLBACK 
https://github.com/ /html/manifest/html/home.html

這個(gè)文件***行必須以CACHE MANIFEST開頭，否則瀏覽器解析會(huì)報(bào)錯(cuò)，注釋使用#開頭，在這一行下面跟著需要緩存的資源，接著的NETWORK表示哪些資源需要聯(lián)網(wǎng)加載，一般需要寫成NETWORK *，表示除了CACHE外的其它所有資源都需要聯(lián)網(wǎng)，包括一些動(dòng)態(tài)請(qǐng)求，如果你不是寫的*，而是寫了具體路徑，那些既沒有在CAHCE的，也沒有在NETWORK的就會(huì)報(bào)加載失敗的錯(cuò)誤，如下所示：

即使聯(lián)網(wǎng)也會(huì)這樣，所以一般寫成*。

FALLBACK表示替代資源，這些資源加載不到就替代加載哪些資源，如上面的文件https://github.com訪問不了就使用一個(gè)靜態(tài)的html訪問：https://github.com/html/manifest/html/home.html。

打開支持Manifest的網(wǎng)站，例如https://fed.renren.com，可以觀察到Chrome控制臺(tái)cache的過程：

然后再刷新頁(yè)面，你會(huì)發(fā)現(xiàn)頁(yè)面幾乎所有資源都是在本地緩存取的，如下圖所示：

并且你把網(wǎng)斷了，刷新頁(yè)面，頁(yè)面依舊能夠正常加載出來(lái)。這個(gè)在Chrome/Firefox/Safari等瀏覽器均支持。

除了Manifest之外，還有另外一個(gè)緩存的手段，就是設(shè)置HTTP報(bào)文頭的Cache-Control字段進(jìn)行緩存，這個(gè)可以緩存JS/CSS/圖片資源，但是如果你把HTML也緩存了就會(huì)有一個(gè)問題，如果用戶不清除緩存，即使你的頁(yè)面更新了，用戶仍然會(huì)加載老的頁(yè)面，直到緩存設(shè)定Max-Age時(shí)間到了。所以用Manifest可以解決這個(gè)問題。

Manifest怎么知道當(dāng)前頁(yè)面數(shù)據(jù)更新了呢?只要把你把manifest文件如上面的home.appcache更改一下就可以了，瀏覽器打開頁(yè)面時(shí)都會(huì)去加載這個(gè)文件，一旦發(fā)現(xiàn)這個(gè)文件發(fā)生了變化下次刷新的時(shí)候就會(huì)重新加載所有Cache的文件，最簡(jiǎn)單的可以把注釋里的時(shí)間改成當(dāng)前的時(shí)間就可以了：

#9/29/2017, 9:08:49 AM

所以當(dāng)網(wǎng)站的資源發(fā)生更改就可以改變這個(gè)manifest的內(nèi)容，進(jìn)而聯(lián)網(wǎng)的瀏覽器就能進(jìn)行更新。

使用Manifest需要注意以下問題：

(1)Manifest有大小限制，它其實(shí)也算本地存儲(chǔ)，本地存儲(chǔ)一般每個(gè)域有限制使用的空間，PC Chrome是5Mb，參考如下表格：

(2)Manifest文件如home.appcahce不能跨域，如果跨域需要支持CORS

(3)Manifest Cache的資源不能跨域，同樣如果跨域該資源需要支持CORS，一般瀏覽器會(huì)自動(dòng)處理

2. 解決Manifefst的自動(dòng)生成和更新問題

由于Manifest不能使用通配符匹配資源，所以需要把要進(jìn)行cache的資源一個(gè)個(gè)列出來(lái)，而網(wǎng)站的內(nèi)容經(jīng)常是動(dòng)態(tài)更新的，所以這個(gè)就比較麻煩。為此筆者寫了一個(gè)自動(dòng)生成manifest的NPM包generate-manifest，用起來(lái)非常簡(jiǎn)單：

npm install -g generate-manifest 
generate-manifest --url=https://github.com

它就會(huì)生成一個(gè)home.appchache的Manifest文件，這個(gè)文件包括頁(yè)面上的img/js/css的資源鏈接：

CACHE MANIFEST 
#9/27/2017, 3:04:25 PM 
#html 
https://github.com/ 
#img 
https://assets-cdn.github.com/images/modules/site/universe-octoshop.png 
https://assets-cdn.github.com/images/modules/site/universe-wordmark.png 
#css 
https://assets-cdn.github.com/assets/frameworks-bedfc518345498ab3204d330c1727cde7e733526a09cd7df6867f6a231565091.css 
#js 
https://assets-cdn.github.com/assets/compat-91f98c37fc84eac24836eec2567e9912742094369a04c4eba6e3cd1fa18902d9.js 
NETWORK: 
* 
  
FALLBACK 
https://github.com/ /html/manifest/html/home.html

還可以支持其它參數(shù)定制，詳見：generate-manifest。

這樣就解決了自動(dòng)生成的問題，自動(dòng)更新應(yīng)該怎么辦呢?

由于我是一個(gè)博客網(wǎng)站，網(wǎng)站內(nèi)容發(fā)生變化的地方主要有：1. 發(fā)表/更改博客; 2. 用戶發(fā)表評(píng)論; 3. 網(wǎng)站的瀏覽量發(fā)生變化，***個(gè)解決的方法寫了一個(gè)接口，只要發(fā)表博客就調(diào)一下這個(gè)接口去生成一個(gè)新的manifest文件：

https://fed.renren.com/refresh-manifest.php?

link=https://fed.renren.com/2017/09/26/manifest/

然后就會(huì)調(diào)上面的generate-manifest的包，生成一個(gè)manifest.appcache的文件，在html里面是根據(jù)路徑的***一個(gè)部分決定manifest的名字：

<?php 
    $uri = "$_SERVER[REQUEST_URI]"; 
    $uriArray = explode("/", $uri); 
    $uriName = count($uriArray) > 2 ? $uriArray[count($uriArray) - 2] : "home"; 
?> 
<!DOCTYPE html> 
<html <?php language_attributes(); ?> manifest=<?php echo "/html/manifest/appcache/$uriName.appcache"?>>

這個(gè)和生成的文件名一一對(duì)應(yīng)。

第二個(gè)問題：用戶發(fā)表評(píng)論——在調(diào)發(fā)表接口那里自動(dòng)地調(diào)一下這個(gè)接口，需要注意的是這個(gè)接口需要防腳本注入，不然比較危險(xiǎn)，

第三個(gè)問題：閱讀量數(shù)據(jù)變化的——寫一個(gè)Linux定時(shí)任務(wù)，使用crontab添加一個(gè)定時(shí)任務(wù)，執(zhí)行crontab -e添加：

0 3 * * * /home/fed/manifest/update-all.sh

上面的意思是每天3:00的時(shí)候跑一下update-all.sh這個(gè)腳本，這個(gè)腳本把所有頁(yè)面的更新命令都寫進(jìn)去：

generate-manifest --url=https://fed.renren.com 
generate-manifest --url=https://fed.renren.com/page/2/ 
generate-manifest --url=https://fed.renren.com/page/3/ 
#..其它...

***點(diǎn)提到的發(fā)表文章，也會(huì)添加一行命令到這個(gè)腳本里面。

由于閱讀量這個(gè)數(shù)據(jù)不是很重要，所以一天更新一次就好了。這樣可以讓用戶在同一天的操作有緩存。如果第二天再來(lái)看的話就更新一下。

因此基本上就解決了自動(dòng)更新的問題。

還有一個(gè)問題是，Manifest改了之后的***次刷新還是老的頁(yè)面，只有第二次刷新的時(shí)候才是對(duì)的，所以我們希望改了manifest之后能夠一刷新就是新的，而不是之前緩存的那個(gè)，也不需要刷兩次。

那么怎么辦呢?Manifest有一個(gè)更新的事件，一旦manifest文件有更新就會(huì)觸發(fā)這個(gè)事件，所以我們可以監(jiān)聽這個(gè)事件，然后自動(dòng)刷新頁(yè)面讓頁(yè)面重新加載就可以了，如下代碼：

function onUpdateReady() { 
    window.location.reload(true); 
} 
window.applicationCache.addEventListener('updateready', onUpdateReady); 
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { 
    onUpdateReady(); 
}

綜上，我們很好地利用Manifest做了一個(gè)離線頁(yè)面應(yīng)用，解決了自動(dòng)生成和自動(dòng)更新的問題。即使用戶沒有離線，第二次加載的資源都是在本地緩存的，所以當(dāng)用戶在幾個(gè)頁(yè)面來(lái)回切換的時(shí)候這個(gè)速度是很快的，如很多人可能會(huì)在主頁(yè)的列表和內(nèi)容頁(yè)之間來(lái)回切換。

雖然Manifest已經(jīng)被deprecated了，被Service Worker取代了，但是由于它的簡(jiǎn)單易用以及兼容性好，我們還是可以用一用。

原文鏈接：https://fed.renren.com/2017/09/29/manifest/

【本文是51CTO專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過51CTO聯(lián)系原作者獲取授權(quán)】

戳這里，看該作者更多好文

責(zé)任編輯：武曉燕來(lái)源： 51CTO專欄