如何讓網(wǎng)站用上HTML5 Manifest
Manifest是用來做離線頁面的，即使斷網(wǎng)也能正常打開頁面，用起來簡單，但是在實際使用中存在以下問題：
(1)如何自動緩存所有的頁面的資源?因為manifest不能使用*通配符進行cache
(2)如果網(wǎng)站資源更新，怎么讓manifest文件自動更新?不然如果用戶不清緩存即使聯(lián)網(wǎng)也會加載老頁面
我覺得很多網(wǎng)站沒有使用Manifest是因為上面提到的兩個原因，有些人有嘗試過，但使用起來比較麻煩，離線應用價值好像不太大。但是使用Manifest還是有很多好處的，特別是像博客等之類的偏向于展示的網(wǎng)站，或者是在線APP，這種網(wǎng)站的數(shù)據(jù)動態(tài)變化頻率比較低，不需要頻繁地向服務請求數(shù)據(jù)。這樣當用戶需要頻繁退回首頁或者頻繁地在幾個頁面來回切換的時候，由于幾乎所有資源都在本地，所以加載起來是瞬時的。
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表示哪些資源需要聯(lián)網(wǎng)加載，一般需要寫成NETWORK *，表示除了CACHE外的其它所有資源都需要聯(lián)網(wǎng)，包括一些動態(tài)請求，如果你不是寫的*，而是寫了具體路徑，那些既沒有在CAHCE的，也沒有在NETWORK的就會報加載失敗的錯誤，如下所示：
即使聯(lián)網(wǎng)也會這樣，所以一般寫成*。
FALLBACK表示替代資源，這些資源加載不到就替代加載哪些資源，如上面的文件https://github.com訪問不了就使用一個靜態(tài)的html訪問：https://github.com/html/manifest/html/home.html。
打開支持Manifest的網(wǎng)站，例如https://fed.renren.com，可以觀察到Chrome控制臺cache的過程：
然后再刷新頁面，你會發(fā)現(xiàn)頁面幾乎所有資源都是在本地緩存取的，如下圖所示：
并且你把網(wǎng)斷了，刷新頁面，頁面依舊能夠正常加載出來。這個在Chrome/Firefox/Safari等瀏覽器均支持。
除了Manifest之外，還有另外一個緩存的手段，就是設置HTTP報文頭的Cache-Control字段進行緩存，這個可以緩存JS/CSS/圖片資源，但是如果你把HTML也緩存了就會有一個問題，如果用戶不清除緩存，即使你的頁面更新了，用戶仍然會加載老的頁面，直到緩存設定Max-Age時間到了。所以用Manifest可以解決這個問題。
Manifest怎么知道當前頁面數(shù)據(jù)更新了呢?只要把你把manifest文件如上面的home.appcache更改一下就可以了，瀏覽器打開頁面時都會去加載這個文件，一旦發(fā)現(xiàn)這個文件發(fā)生了變化下次刷新的時候就會重新加載所有Cache的文件，最簡單的可以把注釋里的時間改成當前的時間就可以了：
- #9/29/2017, 9:08:49 AM
所以當網(wǎng)站的資源發(fā)生更改就可以改變這個manifest的內容，進而聯(lián)網(wǎng)的瀏覽器就能進行更新。
使用Manifest需要注意以下問題：
(1)Manifest有大小限制，它其實也算本地存儲，本地存儲一般每個域有限制使用的空間，PC Chrome是5Mb，參考如下表格：
(2)Manifest文件如home.appcahce不能跨域，如果跨域需要支持CORS
(3)Manifest Cache的資源不能跨域，同樣如果跨域該資源需要支持CORS，一般瀏覽器會自動處理
2. 解決Manifefst的自動生成和更新問題
由于Manifest不能使用通配符匹配資源，所以需要把要進行cache的資源一個個列出來，而網(wǎng)站的內容經(jīng)常是動態(tài)更新的，所以這個就比較麻煩。為此筆者寫了一個自動生成manifest的NPM包generate-manifest，用起來非常簡單：
- npm install -g generate-manifest
- generate-manifest --url=https://github.com
它就會生成一個home.appchache的Manifest文件，這個文件包括頁面上的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。
這樣就解決了自動生成的問題，自動更新應該怎么辦呢?
由于我是一個博客網(wǎng)站，網(wǎng)站內容發(fā)生變化的地方主要有：1. 發(fā)表/更改博客; 2. 用戶發(fā)表評論; 3. 網(wǎng)站的瀏覽量發(fā)生變化，***個解決的方法寫了一個接口，只要發(fā)表博客就調一下這個接口去生成一個新的manifest文件：
https://fed.renren.com/refresh-manifest.php?
link=https://fed.renren.com/2017/09/26/manifest/
然后就會調上面的generate-manifest的包，生成一個manifest.appcache的文件，在html里面是根據(jù)路徑的***一個部分決定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"?>>
這個和生成的文件名一一對應。
第二個問題：用戶發(fā)表評論——在調發(fā)表接口那里自動地調一下這個接口，需要注意的是這個接口需要防腳本注入，不然比較危險，
第三個問題：閱讀量數(shù)據(jù)變化的——寫一個Linux定時任務，使用crontab添加一個定時任務，執(zhí)行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/
- #..其它...
***點提到的發(fā)表文章，也會添加一行命令到這個腳本里面。
由于閱讀量這個數(shù)據(jù)不是很重要，所以一天更新一次就好了。這樣可以讓用戶在同一天的操作有緩存。如果第二天再來看的話就更新一下。
因此基本上就解決了自動更新的問題。
還有一個問題是，Manifest改了之后的***次刷新還是老的頁面，只有第二次刷新的時候才是對的，所以我們希望改了manifest之后能夠一刷新就是新的，而不是之前緩存的那個，也不需要刷兩次。
那么怎么辦呢?Manifest有一個更新的事件，一旦manifest文件有更新就會觸發(fā)這個事件，所以我們可以監(jiān)聽這個事件，然后自動刷新頁面讓頁面重新加載就可以了，如下代碼：
- function onUpdateReady() {
- window.location.reload(true);
- }
- window.applicationCache.addEventListener('updateready', onUpdateReady);
- if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
- onUpdateReady();
- }
綜上，我們很好地利用Manifest做了一個離線頁面應用，解決了自動生成和自動更新的問題。即使用戶沒有離線，第二次加載的資源都是在本地緩存的，所以當用戶在幾個頁面來回切換的時候這個速度是很快的，如很多人可能會在主頁的列表和內容頁之間來回切換。
雖然Manifest已經(jīng)被deprecated了，被Service Worker取代了，但是由于它的簡單易用以及兼容性好，我們還是可以用一用。
原文鏈接：https://fed.renren.com/2017/09/29/manifest/
【本文是51CTO專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉載請通過51CTO聯(lián)系原作者獲取授權】
