我是怎樣讓網站用上HTML5 Manifest

01-27

Manifest是用來做離線頁面的，即使斷網也能正常打開頁面，用起來簡單，但是在實際使用中存在以下問題：

（1）如何自動緩存所有的頁面的資源？因為manifest不能使用*通配符進行cache

（2）如果網站資源更新，怎麼讓manifest文件自動更新？不然如果用戶不清緩存即使聯網也會載入老頁面

我覺得很多網站沒有使用Manifest是因為上面提到的兩個原因，有些人有嘗試過，但使用起來比較麻煩，離線應用價值好像不太大。但是使用Manifest還是有很多好處的，特別是像博客等之類的偏向於展示的網站，或者是在線APP，這種網站的數據動態變化頻率比較低，不需要頻繁地向服務請求數據。這樣當用戶需要頻繁退回首頁或者頻繁地在幾個頁面來回切換的時候，由於幾乎所有資源都在本地，所以載入起來是瞬時的。

1. 使用Manifest

使用Manifest很簡單，就是在html標籤上加一個manifest屬性：

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

這個屬性指向一個manifest的文件，這個文件指明了當前頁面哪些資源需要進行離線緩存，如下home.appcache：

CACHE MANIFESTn#9/27/2017, 3:04:25 PMn#htmlnhttps://github.com/n#imgnhttps://assets-cdn.github.com/images/modules/site/universe-octoshop.pngnhttps://assets-cdn.github.com/images/modules/site/universe-wordmark.pngn#cssnhttps://assets-cdn.github.com/assets/frameworks-bedfc518345231565091.cssn#jsnhttps://assets-cdn.github.com/assets/compat-94eba6e3cd1fa18902d9.jsnNETWORK:n*nnFALLBACKnhttps://github.com/ /html/manifest/html/home.htmln

這個文件第一行必須以CACHE MANIFEST開頭，否則瀏覽器解析會報錯，注釋使用#開頭，在這一行下面跟著需要緩存的資源，接著的NETWORK表示哪些資源需要聯網載入，一般需要寫成NETWORK *，表示除了CACHE外的其它所有資源都需要聯網，包括一些動態請求，如果你不是寫的*，而是寫了具體路徑，那些既沒有在CAHCE的，也沒有在NETWORK的就會報載入失敗的錯誤，如下所示：

即使聯網也會這樣，所以一般寫成*。

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

打開支持Manifest的網站，例如https://fed.renren.com，可以觀察到Chrome控制台cache的過程：

然後再刷新頁面，你會發現頁面幾乎所有資源都是在本地緩存取的，如下圖所示：

並且你把網斷了，刷新頁面，頁面依舊能夠正常載入出來。這個在Chrome/Firefox/Safari等瀏覽器均支持。

除了Manifest之外，還有另外一個緩存的手段，就是設置HTTP報文頭的Cache-Control欄位進行緩存，這個可以緩存JS/CSS/圖片資源，但是如果你把HTML也緩存了就會有一個問題，如果用戶不清除緩存，即使你的頁面更新了，用戶仍然會載入老的頁面，直到緩存設定Max-Age時間到了。所以用Manifest可以解決這個問題。

Manifest怎麼知道當前頁面數據更新了呢？只要把你把manifest文件如上面的home.appcache更改一下就可以了，瀏覽器打開頁面時都會去載入這個文件，一旦發現這個文件發生了變化下次刷新的時候就會重新載入所有Cache的文件，最簡單的可以把注釋里的時間改成當前的時間就可以了：

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

所以當網站的資源發生更改就可以改變這個manifest的內容，進而聯網的瀏覽器就能進行更新。

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

（1）Manifest有大小限制，它其實也算本地存儲，本地存儲一般每個域有限制使用的空間，PC Chrome是5Mb，參考如下表格：

BrowserApplication Cache (AppCache) Storage LimitSafari Desktop (Mac & Win)UnlimitedSafari Mobile (iOS)10 MBChrome Desktop (Mac & Win)5 MB *Chrome Mobile (Android)Unlimited **Firefox 4 BetaUnlimited (with user prompt)IENo idea. It sucks. ***

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

（3）Manifest Cache的資源不能跨域，同樣如果跨域該資源需要支持CORS，一般瀏覽器會自動處理

2. 解決Manifefst的自動生成和更新問題

由於Manifest不能使用通配符匹配資源，所以需要把要進行cache的資源一個個列出來，而網站的內容經常是動態更新的，所以這個就比較麻煩。為此筆者寫了一個自動生成manifest的NPM包generate-manifest，用起來非常簡單：

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

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

CACHE MANIFESTn#9/27/2017, 3:04:25 PMn#htmlnhttps://github.com/n#imgnhttps://assets-cdn.github.com/images/modules/site/universe-octoshop.pngnhttps://assets-cdn.github.com/images/modules/site/universe-wordmark.pngn#cssnhttps://assets-cdn.github.com/assets/frameworks-bedfc518345498ab3204d330c1727cde7e733526a09cd7df6867f6a231565091.cssn#jsnhttps://assets-cdn.github.com/assets/compat-91f98c37fc84eac24836eec2567e9912742094369a04c4eba6e3cd1fa18902d9.jsnNETWORK:n*nnFALLBACKnhttps://github.com/ /html/manifest/html/home.htmln

還可以支持其它參數定製，詳見：generate-manifest。

這樣就解決了自動生成的問題，自動更新應該怎麼辦呢？

由於我是一個博客網站，網站內容發生變化的地方主要有：1. 發表/更改博客; 2. 用戶發表評論; 3. 網站的瀏覽量發生變化，第一個解決的方法寫了一個介面，只要發表博客就調一下這個介面去生成一個新的manifest文件：

https://fed.renren.com/refresh-manifest.php?link=https://fed.renren.com/2017/09/26/manifest/

然後就會調上面的generate-manifest的包，生成一個manifest.appcache的文件，在html裡面是根據路徑的最後一個部分決定manifest的名字：

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

這個和生成的文件名一一對應。

第二個問題：用戶發表評論——在調發表介面那裡自動地調一下這個介面，需要注意的是這個介面需要防腳本注入，不然比較危險，

第三個問題：閱讀量數據變化的——寫一個Linux定時任務，使用crontab添加一個定時任務，執行crontab -e添加：

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

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

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

第一點提到的發表文章，也會添加一行命令到這個腳本裡面。

由於閱讀量這個數據不是很重要，所以一天更新一次就好了。這樣可以讓用戶在同一天的操作有緩存。如果第二天再來看的話就更新一下。

因此基本上就解決了自動更新的問題。

還有一個問題是，Manifest改了之後的第一次刷新還是老的頁面，只有第二次刷新的時候才是對的，所以我們希望改了manifest之後能夠一刷新就是新的，而不是之前緩存的那個，也不需要刷兩次。

那麼怎麼辦呢？Manifest有一個更新的事件，一旦manifest文件有更新就會觸發這個事件，所以我們可以監聽這個事件，然後自動刷新頁面讓頁面重新載入就可以了，如下代碼：

function onUpdateReady() {n window.location.reload(true);n}nwindow.applicationCache.addEventListener(updateready, onUpdateReady);nif(window.applicationCache.status === window.applicationCache.UPDATEREADY) {n onUpdateReady();n}n

綜上，我們很好地利用Manifest做了一個離線頁面應用，解決了自動生成和自動更新的問題。即使用戶沒有離線，第二次載入的資源都是在本地緩存的，所以當用戶在幾個頁面來回切換的時候這個速度是很快的，如很多人可能會在主頁的列表和內容頁之間來回切換。

雖然Manifest已經被deprecated了，被Service Worker取代了，但是由於它的簡單易用以及兼容性好，我們還是可以用一用。