<a href="http://s2.51cto.com/wyfs02/M02/A7/04/wKioL1nfJkmyakCkAACX04P3Aj8561.jpg-wh_651x-s_1561490140.jpg" target="_blank"></a>
Manifest是用來做離線頁面的，即使斷網也能正常打開頁面，用起來簡單，但是在實際使用中存在以下問題：
(1)如何自動緩存所有的頁面的資源?因為manifest不能使用*通配符進行cache
(2)如果網站資源更新，怎麼讓manifest檔案自動更新?不然如果使用者不清緩存即使聯網也會加載老頁面
我覺得很多網站沒有使用Manifest是因為上面提到的兩個原因，有些人有嘗試過，但使用起來比較麻煩，離線應用價值好像不太大。但是使用Manifest還是有很多好處的，特别是像部落格等之類的偏向于展示的網站，或者是線上APP，這種網站的資料動态變化頻率比較低，不需要頻繁地向服務請求資料。這樣當使用者需要頻繁退回首頁或者頻繁地在幾個頁面來回切換的時候，由于幾乎所有資源都在本地，是以加載起來是瞬時的。
1. 使用Manifest
使用Manifest很簡單，就是在html标簽上加一個manifest屬性：
<html manifest="/static/manifest/home.appcache">
這個屬性指向一個manifest的檔案，這個檔案指明了目前頁面哪些資源需要進行離線緩存，如下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
這個檔案第一行必須以CACHE
MANIFEST開頭，否則浏覽器解析會報錯，注釋使用#開頭，在這一行下面跟着需要緩存的資源，接着的NETWORK表示哪些資源需要聯網加載，一般需要寫成NETWORK
*，表示除了CACHE外的其它所有資源都需要聯網，包括一些動态請求，如果你不是寫的*，而是寫了具體路徑，那些既沒有在CAHCE的，也沒有在NETWORK的就會報加載失敗的錯誤，如下所示：
<a href="http://s3.51cto.com/wyfs02/M02/08/4D/wKiom1nfJxijChBTAABE3-rwr8E409.jpg" target="_blank"></a>
即使聯網也會這樣，是以一般寫成*。
打開支援Manifest的網站，例如https://fed.renren.com，可以觀察到Chrome控制台cache的過程：
<a href="http://s4.51cto.com/wyfs02/M01/08/4D/wKiom1nfJzDSEBsKAABkvZKUYbs283.jpg" target="_blank"></a>
然後再重新整理頁面，你會發現頁面幾乎所有資源都是在本地緩存取的，如下圖所示：
<a href="http://s2.51cto.com/wyfs02/M01/08/4D/wKiom1nfJ0yAO8lGAABKGKDft8w797.jpg" target="_blank"></a>
并且你把網斷了，重新整理頁面，頁面依舊能夠正常加載出來。這個在Chrome/Firefox/Safari等浏覽器均支援。
除了Manifest之外，還有另外一個緩存的手段，就是設定HTTP封包頭的Cache-Control字段進行緩存，這個可以緩存JS/CSS/圖檔資源，但是如果你把HTML也緩存了就會有一個問題，如果使用者不清除緩存，即使你的頁面更新了，使用者仍然會加載老的頁面，直到緩存設定Max-Age時間到了。是以用Manifest可以解決這個問題。
Manifest怎麼知道目前頁面資料更新了呢?隻要把你把manifest檔案如上面的home.appcache更改一下就可以了，浏覽器打開頁面時都會去加載這個檔案，一旦發現這個檔案發生了變化下次重新整理的時候就會重新加載所有Cache的檔案，最簡單的可以把注釋裡的時間改成目前的時間就可以了：
#9/29/2017, 9:08:49 AM
是以當網站的資源發生更改就可以改變這個manifest的内容，進而聯網的浏覽器就能進行更新。
使用Manifest需要注意以下問題：
(1)Manifest有大小限制，它其實也算本地存儲，本地存儲一般每個域有限制使用的空間，PC Chrome是5Mb，參考如下表格：
<a href="http://s3.51cto.com/wyfs02/M01/08/4D/wKiom1nfJ37zRqmNAABpAT41ySk298.jpg" target="_blank"></a>
(2)Manifest檔案如home.appcahce不能跨域，如果跨域需要支援CORS
(3)Manifest Cache的資源不能跨域，同樣如果跨域該資源需要支援CORS，一般浏覽器會自動處理
2. 解決Manifefst的自動生成和更新問題
由于Manifest不能使用通配符比對資源，是以需要把要進行cache的資源一個個列出來，而網站的内容經常是動态更新的，是以這個就比較麻煩。為此筆者寫了一個自動生成manifest的NPM包generate-manifest，用起來非常簡單：
npm install -g generate-manifest
generate-manifest --url=https://github.com
它就會生成一個home.appchache的Manifest檔案，這個檔案包括頁面上的img/js/css的資源連結：
https://assets-cdn.github.com/assets/frameworks-bedfc518345498ab3204d330c1727cde7e733526a09cd7df6867f6a231565091.css
https://assets-cdn.github.com/assets/compat-91f98c37fc84eac24836eec2567e9912742094369a04c4eba6e3cd1fa18902d9.js
這樣就解決了自動生成的問題，自動更新應該怎麼辦呢?
由于我是一個部落格網站，網站内容發生變化的地方主要有：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的名字：
<?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"?>>
這個和生成的檔案名一一對應。
第二個問題：使用者發表評論——在調發表接口那裡自動地調一下這個接口，需要注意的是這個接口需要防腳本注入，不然比較危險，
第三個問題：閱讀量資料變化的——寫一個Linux定時任務，使用crontab添加一個定時任務，執行crontab -e添加：
0 3 * * * /home/fed/manifest/update-all.sh
上面的意思是每天3:00的時候跑一下update-all.sh這個腳本，這個腳本把所有頁面的更新指令都寫進去：
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/
#..其它...
第一點提到的發表文章，也會添加一行指令到這個腳本裡面。
由于閱讀量這個資料不是很重要，是以一天更新一次就好了。這樣可以讓使用者在同一天的操作有緩存。如果第二天再來看的話就更新一下。
是以基本上就解決了自動更新的問題。
還有一個問題是，Manifest改了之後的第一次重新整理還是老的頁面，隻有第二次重新整理的時候才是對的，是以我們希望改了manifest之後能夠一重新整理就是新的，而不是之前緩存的那個，也不需要刷兩次。
那麼怎麼辦呢?Manifest有一個更新的事件，一旦manifest檔案有更新就會觸發這個事件，是以我們可以監聽這個事件，然後自動重新整理頁面讓頁面重新加載就可以了，如下代碼：
function onUpdateReady() {
window.location.reload(true);
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();
綜上，我們很好地利用Manifest做了一個離線頁面應用，解決了自動生成和自動更新的問題。即使使用者沒有離線，第二次加載的資源都是在本地緩存的，是以當使用者在幾個頁面來回切換的時候這個速度是很快的，如很多人可能會在首頁的清單和内容頁之間來回切換。
雖然Manifest已經被deprecated了，被Service Worker取代了，但是由于它的簡單易用以及相容性好，我們還是可以用一用。
本文作者：人人網FED
來源：51CTO
![第一個APP——GeoQuiz[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)