国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js構建離線應用

phoenixsky / 2515人閱讀

摘要：技術實現離線應用的核心是離線緩存技術，歷史上曾先后出現兩種離線緩存技術。新的線程取得控制權后，將會觸發其事件。接入用構建接入的離線應用時，要解決的問題在于如何生成之前提到的文件。

內容主要引用自吳浩麟著《webpack深入淺出》 離線應用 
離線應用的優點：
在沒有網絡的情況下能打開網頁。
由于部分緩存的資源直接從本地加載，所以對用戶來說可以加快網頁的加載速度，減少服務器壓力。
技術實現：

離線應用的核心是離線緩存技術，歷史上曾先后出現兩種離線緩存技術。

AppCache：又叫做Application Cache，目錄已經從web標準中刪除，盡量不要使用。

Service Workers：目前最新的離線緩存技術，是Web Worker的一部分，它通過攔截網絡請求實現離線緩存，比 AppCache更靈活。因為它可以通過js代碼去控制緩存的邏輯。


Service Workers

Service Workers是一個在瀏覽器后臺運行的腳本，它的生命周期完全獨立于網頁，它無法直接訪問DOM。它可以通過postMessage接口發送消息來和UI進程通信。   
攔截網絡功能是Service Workers的重要功能。通過Service Workers能完成離線緩存，編輯響應，過濾響應等功能。


目前Chrome,Firefox,Opera都已經全面支持Service Workers。但只有高版本的Android支持移動端的瀏覽器。，由于Service Workers無法通過注入Polyfill實現兼容，所以在打算使用它前，請先確認自己的網頁的運行場景。




注：Polyfill：
墊片，就是幫你加一層東西來解決問題，不光是兼容性問題，pollyfill是個概念舉個例子，有些舊瀏覽器不支持Number.isNaN方法，Polyfill就可以是這樣的：


·if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}·


啥意思呢，就是假如瀏覽器沒有Number.isNaN方法，那咱們就給它添加上去，所謂Polyfill就是這樣解決API的兼容問題的。
判斷瀏覽器是否支持Service Workers的最簡單方法是通過以下代碼：
if(navigator.serviceWorker){alert(true)}



注冊Service Workers

要為網頁接入Service Workers，需要在網頁加載后注冊一個描述Service Workers邏輯的腳本，代碼如下：


`if(navigator.serviceWorker)
{
    window.addEventListener("DOMContentLoaded",function(){
        navigator.serviceWorker.register("./sw.js")
    })
}`



一旦這個腳本文件被加載，Service Workers的安裝就開始了，在這個腳本被安裝到瀏覽器中后，
就算是用戶關閉了當前網頁，它仍會存在，也就是第一次打開該網頁時，Service Workers的邏輯不會生效。
因為腳本還沒有被加載和注冊，但是以后再次打開該網頁時腳本里的邏輯將會生效。


在Chrome中可以通過打開網址chrome://inspect/#service-workers來查看當前瀏覽器中所有已注冊的Service Workers。

更新緩存

瀏覽器針對Service Workers有如下機制：



每次打開接入了Service Workers的網頁時，瀏覽器都會重新下載Service Workers腳本文件，所以要注意該腳本文件不要太大，如果發現和當前已經注冊過的文件存在字節差異，就將其視為“新服務工作線程”。


新的Service Workers線程將會啟動，且將會觸發其install事件。


當網站上當前打開的頁面關閉時，舊的Service Workers線程將會被終止，新的Service Workers線程將會取得控制權。


新的Service Workers線程取得控制權后，將會觸發其activate事件。




新的Service Workers線程中的activate事件就是清理舊緩存的最佳時間點


Service Workers在注冊成功后會在其生命周期中派發一些事件，通過監聽對應的事件，在特定的時間上做一些事情。


在Service Workers腳本中引入了新的關鍵字self，代表當前的Service Workers實例。


在Service Workers安裝成功后會派發出install事件，需要在這個事件中執行緩存資源的邏輯。




接入webpack

用webpack構建接入Service Workers的離線應用時，要解決的問題在于如何生成之前提到的sw.js文件。
并且sw.js文件中的cacheFileList變量，代表需要被緩存文件的URL列表，需要根據輸出文件列表所對應的URL來決定。而不是寫成靜態值。


webpack沒有原生功能可以完成以上需求，可以使用插件serviceworker-webpack-plugin
·


const ServiceWorkerWebpackPlugin=require("serviceworker-webpack-plugin")
    new ServiceWorkerWebpackPlugin({
            // 自定義的 sw.js 文件所在路徑
            // ServiceWorkerWebpackPlugin 會把文件列表注入到生成的 sw.js 中
            entry: path.join(__dirname, "sw.js"),
        })
    devServer: {
        //Service Workers依賴HTTPS，使用DevServer提供的HTTPS功能。
        https:true
    }


·
在目錄下新建sw.js文件，手動寫手更新緩存里的代碼，。


serviceworker-webpack-plugin為了保證靈活性，允許使用都自定義sw.js，構建輸出的sw.js文件中會在頭部注入一個變量serviceWorkerOption.assets到全局，里面存放著所有需要被緩存的文件的URL列表。


需要將sw.js里的文件列表變量寫成動態的
·


var cacheFileList=global.serviceWorkerOption.assets

在main.js代碼中注冊:
if (navigator.serviceWorker) {
    window.addEventListener("DOMContentLoaded",function() {
        // 調用 serviceWorker.register 注冊，參數 /sw.js 為腳本文件所在的 URL 路徑
        navigator.serviceWorker.register("sw.js");
    });
}


·


**
注：使用Service Workers技術需要依賴HTTPS，可以使用DevServer提供的HTTPS功能。DevServer會自動生成一份HTTPS證書。
**
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93872.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    構建離線web應用（一）
    
                                                     
    摘要：我喜歡移動，而且也是那些堅持使用技術構建移動應用程序的人之一。我們準備做這樣的一個漸進式應用是典型的旨在提高用戶離線體驗的應用。當我們開始構建應用時，你就能理解上面的場景了。的作用范圍是針對相對路徑的。最佳的做法是在應用的入口。

我喜歡移動app，而且也是那些堅持使用Web技術構建移動應用程序的人之一。
經過技術的不斷迭代（可能還有一些其它的東西），移動體驗設計愈來愈平易近人，給予用戶...
    
                                                   
                          
    
                                
    
                                    Sanchi
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    創建一個離線優先，數據驅動的漸進式 Web 應用程序
    
                                                     
    摘要：原文地址譯文出自我的個人博客概述在本文中，您將學習如何使用和創建離線優先數據驅動的漸進式應用程序。在離線的情況下也可以使用后臺同步功能將應用程序與服務器同步。保存數據到中現在我們保存數據到剛創建的數據庫中的對象中。

原文地址：Build an offline-first, data-driven PWA譯文出自：我的個人博客

概述
在本文中，您將學習如何使用 Workbox 和 In...
    
                                                   
                          
    
                                
    
                                    csRyan
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    構建離線WEB應用
    
                                                     
    摘要：使用離線應用構建應用服務端服務器配置創建文件客戶端構建，并在標簽上添加屬性，屬性值是服務器上配置的緩存資源列表的文件名配置相關事件，創建離線文件內容將狀態代碼轉化成狀態離線應用創建即使沒有互聯網連接也可以使用的應用程序。

HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應用的場景，今天我們說說application cache這種方案...
    
                                                   
                          
    
                                
    
                                    shleyZ
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    構建離線WEB應用
    
                                                     
    摘要：使用離線應用構建應用服務端服務器配置創建文件客戶端構建，并在標簽上添加屬性，屬性值是服務器上配置的緩存資源列表的文件名配置相關事件，創建離線文件內容將狀態代碼轉化成狀態離線應用創建即使沒有互聯網連接也可以使用的應用程序。

HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應用的場景，今天我們說說application cache這種方案...
    
                                                   
                          
    
                                
    
                                    lk20150415
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<