av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

初學(xué)者使用ApplicationCache指南

 對(duì)于web app來說，離線應(yīng)用功能已經(jīng)越來越重要。誠(chéng)然，瀏覽器本身就有緩存機(jī)制，但是，這些緩存機(jī)制不夠可靠，可能并不會(huì)按你所想要的方式運(yùn)行。HTML5則通過ApplicationCache接口處理了離線應(yīng)用中的一些問題。

創(chuàng)新互聯(lián)10多年企業(yè)網(wǎng)站制作服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站制作及推廣,對(duì)廣告制作等多個(gè)行業(yè)擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

使用這個(gè)接口讓你的應(yīng)用擁有三方面的優(yōu)勢(shì)：

◆ 離線瀏覽——用戶在不能聯(lián)網(wǎng)的時(shí)候依然能瀏覽整個(gè)站點(diǎn)

◆ 高速——緩存資源是存儲(chǔ)在本地的，因此能更快加載。

◆ 更小的服務(wù)器負(fù)載——瀏覽器只需要從服務(wù)器端下載有改變的資源即可，相同資源不需要重復(fù)下載。

Application Cache(或 AppCache)讓一個(gè)開發(fā)者可以指定瀏覽器需要保存哪個(gè)文件。當(dāng)用戶在離線情況下時(shí)，即使他們按了刷新按鈕，你的應(yīng)用也能正確加載和工作。

CACHE MANIFEST 文件

cache manifest文件是一個(gè)簡(jiǎn)單的文本文件，其中列出了瀏覽器需要緩存的資源。

引用一個(gè)MANIFEST文件

為了讓一個(gè)應(yīng)用能啟用application cache，需要在文檔的html標(biāo)簽中包含manifest屬性，如下所示：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.    … 
    3. 
  
  
  
  3.   
    4.

你需要在你想要緩存的web app的每一頁中都包含 manifest 屬性。如果一個(gè)頁面沒有 manifest屬性，它將不會(huì)被緩存(除非在manifest文件中顯式指定了這個(gè)頁面)。這意味著只要用戶訪問的頁面包含manifest屬性，它都將會(huì)被加入application cache中。這樣，就不用在manifest文件中指定需要緩存哪些頁面了。

Manifest屬性可以指定一個(gè)絕對(duì)URL或是一個(gè)相對(duì)路徑，但是，一個(gè)絕對(duì)URL需要和web app是同源的。一個(gè)manifest文件可以是任何擴(kuò)展文件類型，但必須有正確的mime-type。如下所示：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.   … 
    3. 
  
  
  
  3.  
    4.

一個(gè)manifest文件需要正確的mime-type，即text/cache-manifest。你可以在你的web服務(wù)器中加入一個(gè)定制文件類型(a custom file type)，或者加入一個(gè) .htaccess 配置。

例如，為了在Apache中能夠解析這種mime-type，可以在你的配置文件中加入如下代碼：

 
 
 
    
  
  
  
  1. AddType text/cache-manifest .appcache 
    2.

或者，如果你的應(yīng)用是在Google App Engine中，那么在app.yaml文件中加入代碼：

 
 
 
    
  
  
  
  1. - url: /mystaticdir/(.*\.appcache) 
    2. 
  
  
  
  2.   static_files: mystaticdir/\1 
    3. 
  
  
  
  3.   mime_type: text/cache-manifest 
    4. 
  
  
  
  4.   upload: mystaticdir/(.*\.appcache) 
    5.

MANIFEST FILE的結(jié)構(gòu)

一個(gè)簡(jiǎn)單的manifest文件看起來可能是下面這樣的：

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

這個(gè)示例將會(huì)緩存指定使用這個(gè)manifest的頁面中的四個(gè)文件。

有幾點(diǎn)是需要注意的：

◆ 必須在***行包括 CACHE MANIFEST 字符串。

◆ 站點(diǎn)所能緩存的數(shù)據(jù)上限是5MB 。但是，如果你是在為Chrome Web Store做開發(fā)的話，你可以使用unlimitedStorage 來去除這個(gè)限制。

◆ 如果manifest文件或者是其中指定的某個(gè)資源下載失敗的話，整個(gè)cache的更新都會(huì)失敗。在這種情況下，瀏覽器將會(huì)使用老的application cache。

下面來看一個(gè)更復(fù)雜的例子：

 
 
 
    
  
  
  
  1. CACHE MANIFEST 
    2. 
  
  
  
  2. # 2010-06-18:v2 
    3. 
  
  
  
  3. # Explicitly cached ‘master entries’. 
    4. 
  
  
  
  4. CACHE: 
    5. 
  
  
  
  5. /favicon.ico 
    6. 
  
  
  
  6. index.html 
    7. 
  
  
  
  7. stylesheet.css 
    8. 
  
  
  
  8. images/logo.png 
    9. 
  
  
  
  9. scripts/main.js 
    10. 
  
  
  
  10. # Resources that require the user to be online. 
    11. 
  
  
  
  11. NETWORK: 
    12. 
  
  
  
  12. login.php 
    13. 
  
  
  
  13. /myapi 
    14. 
  
  
  
  14. http://api.twitter.com 
    15. 
  
  
  
  15. # static.html will be served if main.py is inaccessible 
    16. 
  
  
  
  16. # offline.jpg will be served in place of all images in images/large/ 
    17. 
  
  
  
  17. # offline.html will be served in place of all other .html files 
    18. 
  
  
  
  18. FALLBACK: 
    19. 
  
  
  
  19. /main.py /static.html 
    20. 
  
  
  
  20. images/large/ images/offline.jpg 
    21. 
  
  
  
  21. *.html /offline.html 
    22.

以“#”開頭的都是注釋，這些注釋還可以起到另外的作用。一個(gè)應(yīng)用只有在manifest文件發(fā)生變化時(shí)才會(huì)更新cache。例如，如果你編輯了圖像或是改寫了一個(gè)Javascript函數(shù)，cache并不會(huì)發(fā)生更新。你必須改寫manifest文件本身來通知瀏覽器需要更新cache文件了。通過在manifest文件中添加一行注釋，在其中寫上版本號(hào)，或者文件hash值，或者時(shí)間戳，你都可以確保用戶擁有你的軟件的***版本。如果有新版本出現(xiàn)，你同樣可以以編程的方式更新cache，就跟在Updating the cache 中所討論的那樣。

一個(gè)manifest文件可能包括三個(gè)部分：CACHE, NETWORK 以及 FALLBACK.

CACHE:

這是默認(rèn)部分，列在這個(gè)條目下的文件(或者緊跟在CACHE MANIFEST字符串之后的)都會(huì)在***次被下載后進(jìn)入cache。

NETWORK:

這一部分中所列出的資源都是需要聯(lián)網(wǎng)使用的資源。它們都不會(huì)進(jìn)入cache中，即使用戶處于離線狀態(tài)。這部分可能會(huì)使用Wildcards。

FALLBACK:

可選部分，指定了如果資源獲取失敗，將會(huì)呈現(xiàn)怎樣的頁面。***個(gè)URL是資源，第二個(gè)就是fallback頁面。兩個(gè)URL都必須是相對(duì)地址，并且由同一個(gè)manifest文件指定?？梢允褂肳ildcards。

注意：這三部分可以以任何順序在manifest文件中出現(xiàn)，并且每部分都可以在一個(gè)manifest文件中出現(xiàn)多次。

下面的manifest文件定義了一個(gè)“catch-all”頁面(offline.html)，這個(gè)頁面將會(huì)在用戶試圖離線訪問網(wǎng)站根節(jié)點(diǎn)時(shí)顯示。它還指明了需要聯(lián)網(wǎng)使用的其他資源(如遠(yuǎn)程站點(diǎn)上的資源)。

 
 
 
    
  
  
  
  1. CACHE MANIFEST 
    2. 
  
  
  
  2. # 2010-06-18:v3 
    3. 
  
  
  
  3. # Explicitly cached entries 
    4. 
  
  
  
  4. index.html 
    5. 
  
  
  
  5. css/style.css 
    6. 
  
  
  
  6. # offline.html will be displayed if the user is offline 
    7. 
  
  
  
  7. FALLBACK: 
    8. 
  
  
  
  8. / /offline.html 
    9. 
  
  
  
  9. # All other resources (e.g. sites) require the user to be online. 
    10. 
  
  
  
  10. NETWORK: 
    11. 
  
  
  
  11. * 
    12. 
  
  
  
  12. # Additional resources to cache 
    13. 
  
  
  
  13. CACHE: 
    14. 
  
  
  
  14. images/logo1.png 
    15. 
  
  
  
  15. images/logo2.png 
    16. 
  
  
  
  16. images/logo3.png 
    17.

注意：引用了你的manifest文件的HTML文件都會(huì)自動(dòng)被緩存，因此，沒有必要在你的manifest文件中再指定這個(gè)文件，但是，在manifest文件中指定這個(gè)文件是一種更好的做法。

注意：頁面上基于SSL的HTTP cache headers以及caching restrictions都會(huì)被cache manifests重寫。因此，基于https的頁面也能離線工作。

更新緩存(CACHE)

如果一個(gè)應(yīng)用是在離線情況下，那么它會(huì)保持它的緩存狀態(tài)，除非有以下事件發(fā)生：

◆ 用戶清除了瀏覽器中存儲(chǔ)有你的站點(diǎn)的數(shù)據(jù)。

◆ manifest file 被修改了。注意：修改了在manifest文件中列出的某個(gè)文件并不會(huì)讓瀏覽器重新緩存資源。必須是manifest文件本身改變了，才會(huì)重新進(jìn)行緩存。

◆ app cache通過編程更新了。

緩存狀態(tài)CACHE STATUS

在程序中，你可以通過window.applicationCache 對(duì)象來訪問瀏覽器的app cache。你可以查看 status 屬性來獲取cache的當(dāng)前狀態(tài)：

 
 
 
    
  
  
  
  1. var appCache = window.applicationCache; 
    2. 
  
  
  
  2. switch (appCache.status) { 
    3. 
  
  
  
  3.   case appCache.UNCACHED: // UNCACHED == 0 
    4. 
  
  
  
  4.     return ‘UNCACHED’; 
    5. 
  
  
  
  5.     break; 
    6. 
  
  
  
  6.   case appCache.IDLE: // IDLE == 1 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.     return ‘IDLE’; 
    9. 
  
  
  
  9.     break; 
    10. 
  
  
  
  10.   case appCache.CHECKING: // CHECKING == 2 
    11. 
  
  
  
  11.     return ‘CHECKING’; 
    12. 
  
  
  
  12.     break; 
    13. 
  
  
  
  13.  case appCache.DOWNLOADING: // DOWNLOADING == 3 
    14. 
  
  
  
  14.     return ‘DOWNLOADING’; 
    15. 
  
  
  
  15.     break; 
    16. 
  
  
  
  16.   case appCache.UPDATEREADY:  // UPDATEREADY == 4 
    17. 
  
  
  
  17.     return ‘UPDATEREADY’; 
    18. 
  
  
  
  18.     break; 
    19. 
  
  
  
  19.   case appCache.OBSOLETE: // OBSOLETE == 5 
    20. 
  
  
  
  20.     return ‘OBSOLETE’; 
    21. 
  
  
  
  21.     break; 
    22. 
  
  
  
  22.   default: 
    23. 
  
  
  
  23.     return ‘UKNOWN CACHE STATUS’; 
    24. 
  
  
  
  24.     break; 
    25. 
  
  
  
  25. }; 
    26.

為了通過編程更新cache，首先調(diào)用 applicationCache.update()。這將會(huì)試圖更新用戶的cache(要求manifest文件已經(jīng)改變)。***，當(dāng) applicationCache.status 處于 UPDATEREADY 狀態(tài)時(shí)，調(diào)用applicationCache.swapCache()，舊的cache就會(huì)被置換成新的。

 
 
 
    
  
  
  
  1. var appCache = window.applicationCache; 
    2. 
  
  
  
  2. appCache.update(); // Attempt to update the user’s cache. 
    3. 
  
  
  
  3. … 
    4. 
  
  
  
  4. if (appCache.status == window.applicationCache.UPDATEREADY) { 
    5. 
  
  
  
  5.   appCache.swapCache();  // The fetch was successful, swap in the new cache. 
    6. 
  
  
  
  6. } 
    7.

注意：像這樣使用 update()和swapCache()并不會(huì)將更新后的資源呈現(xiàn)給用戶。這僅僅是讓瀏覽器檢查manifest文件是否發(fā)生了更新，然后下載指定的更新內(nèi)容，重新填充app cache。因此，要讓用戶看到更新后的內(nèi)容，需要兩次頁面下載，一次是更新app cache，一次是更新頁面內(nèi)容。

好消息是，你可以避免兩次頁面下載帶來的麻煩。為了讓用戶能看到你的站點(diǎn)的***版本，設(shè)置一個(gè)監(jiān)聽器來監(jiān)聽頁面加載時(shí)的updateready 事件。

 
 
 
    
  
  
  
  1. // Check if a new cache is available on page load. 
    2. 
  
  
  
  2. window.addEventListener(‘load’, function(e) { 
    3. 
  
  
  
  3.   window.applicationCache.addEventListener(‘updateready’, function(e) { 
    4. 
  
  
  
  4.     if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { 
    5. 
  
  
  
  5.       // Browser downloaded a new app cache. 
    6. 
  
  
  
  6.       // Swap it in and reload the page to get the new hotness. 
    7. 
  
  
  
  7.       window.applicationCache.swapCache(); 
    8. 
  
  
  
  8.       if (confirm(‘A new version of this site is available. Load it?’)) { 
    9. 
  
  
  
  9.         window.location.reload(); 
    10. 
  
  
  
  10.       } 
    11. 
  
  
  
  11.     } else { 
    12. 
  
  
  
  12.       // Manifest didn’t changed. Nothing new to server. 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14.   }, false); 
    15. 
  
  
  
  15. }, false); 
    16.

APPCACHE事件(APPCACHE EVENTS)

也許你已經(jīng)想到了，還有更多事件可以反映出cache的狀態(tài)。在諸如下載、app cache更新、出現(xiàn)錯(cuò)誤等事件都會(huì)讓瀏覽器觸發(fā)相應(yīng)事件。下面的代碼片段為每一類cache event都設(shè)置了監(jiān)聽器：

 
 
 
    
  
  
  
  1. function handleCacheEvent(e) { 
    2. 
  
  
  
  2.   //… 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. function handleCacheError(e) { 
    5. 
  
  
  
  5.  alert(‘Error: Cache failed to update!’); 
    6. 
  
  
  
  6. }; 
    7. 
  
  
  
  7. // Fired after the first cache of the manifest. 
    8. 
  
  
  
  8. appCache.addEventListener(‘cached’, handleCacheEvent, false); 
    9. 
  
  
  
  9. // Checking for an update. Always the first event fired in the sequence. 
    10. 
  
  
  
  10. appCache.addEventListener(‘checking’, handleCacheEvent, false); 
    11. 
  
  
  
  11. // An update was found. The browser is fetching resources. 
    12. 
  
  
  
  12. appCache.addEventListener(‘downloading’, handleCacheEvent, false); 
    13. 
  
  
  
  13. // The manifest returns 404 or 410, the download failed, 
    14. 
  
  
  
  14. // or the manifest changed while the download was in progress. 
    15. 
  
  
  
  15. appCache.addEventListener(‘error’, handleCacheError, false); 
    16. 
  
  
  
  16. // Fired after the first download of the manifest. 
    17. 
  
  
  
  17. appCache.addEventListener(‘noupdate’, handleCacheEvent, false); 
    18. 
  
  
  
  18. // Fired if the manifest file returns a 404 or 410. 
    19. 
  
  
  
  19. // This results in the application cache being deleted. 
    20. 
  
  
  
  20. appCache.addEventListener(‘obsolete’, handleCacheEvent, false); 
    21. 
  
  
  
  21. // Fired for each resource listed in the manifest as it is being fetched. 
    22. 
  
  
  
  22. appCache.addEventListener(‘progress’, handleCacheEvent, false); 
    23. 
  
  
  
  23. // Fired when the manifest resources have been newly redownloaded. 
    24. 
  
  
  
  24. appCache.addEventListener(‘updateready’, handleCacheEvent, false); 
    25.

如果manifest文件或者該文件中指定的某個(gè)資源下載失敗，那么整個(gè)更新都會(huì)失敗。在這種情況下，瀏覽器會(huì)繼續(xù)試用老的application cache。


文章題目：初學(xué)者使用ApplicationCache指南
文章來源：http://uogjgqi.cn/article/cciihgd.html
掃二維碼與項(xiàng)目經(jīng)理溝通

我們?cè)谖⑿派?4小時(shí)期待你的聲音

解答本文疑問/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流