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

資訊專欄INFORMATION COLUMN

pwa-之service worker 基本概念

olle / 2410人閱讀

摘要:是瀏覽器和服務器之間的腳本,主要作用是攔截請求,修改響應,以及一些其他的作用。這是出于安全因素的考慮。這個注冊的過程是發生在之外的。在安裝完成,激活之前,它不會攔截任何請求。將會始終攔截請求,重啟頁面也是為了這個。

pwa-之service worker 基本概念
pwa-之service worker 離線文件處理

學習service worker 基本概念

在本章,將涵蓋以下內容

service worker準備工作

注冊service worker

注冊service worker細節

調試

出現錯誤時提供穩定版本

創建mock響應

處理請求超時

簡介

如果你是一個旅行愛好者,應該會經常陷入沒有網絡的情況。這是令人沮喪的。特別是你有事情的時候。

service worker是一個在==瀏覽器后臺==運行的腳本。無論網絡連接如何,能夠使用Web應用程序意味著用戶可以在飛機,地鐵或連接受限或不可用的地方不間斷地操作。 該技術將有助于提高客戶端的工作效率,并將提高應用程序的可用性。

通過service worker,我們可以預先緩存網站的某些資源。 我們作為資源引用的是JavaScript文件,CSS文件,圖像和一些字體。 這將有助于我們加快加載時間,而不必每次訪問同一網站時都必須從服務器獲取。 當然,最重要的是,當我們網絡不暢時,這些資源將可供我們使用。

Service workers

service worker是瀏覽器和服務器之間的腳本,主要作用是攔截請求,修改響應,以及一些其他的作用。

網站可以正常工作的前提是能獲取到html,css,js等資源。在之前這些資源主要由瀏覽器管理,對于開發者而言是不可見的?,F在通過service worker我們可以掌控這些資源。當然最終還是通過瀏覽器控制他們的。

掌握service worker的前提是掌握promise

Promise

Promise是用于處理異步操作的很好的方式,對于掌握service worker是至關重要的。

Promise功能很強大,我們不在這里細述了。我們只需要知道調用then()方法處理成功,catch方法處理錯誤就可以了。

一個簡單的比較同步和異步操作的代碼

sync
    try {
        var value = Fn();
        console.log(value);
    } catch(err) {
        console.log(err);
    }
    
async
    Fn()
    .then(function(value) {
        console.log(value);
    })
    .catch(function(err) {
        console.log(err);
    });
service worker準備工作

Service workers能夠運行的前提是網站采用了https。這是出于安全因素的考慮。

現在主流瀏覽器都已經支持service worker,不需要去多帶帶開啟了。

雖然service worker一定要在https的域名下面運行,但是本地的http://localhost域名卻不影響,可以正常運行。

注冊service worker

一個service worker如果要生效,必須要先注冊。這個注冊的過程是發生在service worker之外的。一般會在index.html中。你可以寫在js文件里面,在html文件中引入,但不能在service worker的js中注冊。

如何注冊

先創建一個html文件





    

Registration status:

在當前文件夾下面創建一個==名字叫service-worker.js==的js文件

啟動一個本地服務器,推薦使用anywhere,自帶了https

成功圖示

![image](http://wx2.sinaimg.cn/mw690/0...
)

程序如何運行

首先判斷瀏覽器支持情況,如果不支持則做出提示。

我們使用了空js文件注冊了service worker。register的第二個參數的scope表示此service worker的作用范圍是當前域名下面的根目錄。

如圖顯示:注冊成功。說明我們的瀏覽器是支持service worker的。

卸載service worker

通過調用unregister()方法卸載service worker

serviceWorker.unregister().then(function() {
    document.getElementById("status").innerHTML = "unregistered";
})
注冊service worker的詳細信息

了解service worker注冊過程中的詳細信息和事件有助于我們更好的掌控它。

注冊詳情

我們創建一個如下的html頁面




  
  Detailed Registration


  

Registration status:

State:

創建一個service-worker.js文件

self.addEventListener("install", function(e) {
  console.log("Install Event:", e);
});

self.addEventListener("activate", function(e) {
  console.log("Activate Event:", e);
});

然后頁面如下顯示

程序如何運行

上面的代碼描述了service worker的3種狀態。當程序處于active狀態的時候,我們就可以刷新頁面查看處于service worker控制之下的頁面了。

在service worker中我們注冊了兩個事件,installactivate,當service worker第一次注冊的時候會被觸發。

install事件比較適合用來預加載數據和初始化緩存,activate事件適合用來清理舊版本的數據。

其他

當一個service worker被成功注冊,它會經歷以下狀態

Install

在service worker的生命周期中,如果service worker已經注冊沒有錯誤,但是尚未激活。那之前已經激活的service worker就會仍然會控制著頁面。重新加載之后的service worker如果發生任何更改,就會重新安裝service worker。在安裝完成,激活之前,它不會攔截任何請求。

Activate

當service worker被激活時,它的狀態就是activate。service worker就可以攔截請求了。只有當我們關閉網頁重新打開,或者強制刷新當前頁面,才會被激活。一般安裝成功之后不會立即處于activate狀態。

Fetch

在當前scope作用域下面的請求會觸發fetch事件

Terminate

這個事件可能會發生在任何時候,主要后果就是需要瀏覽器做service worker的內存回收。之后根據需要重啟,但不是不會在觸發activate事件。

service worker將會始終攔截請求,重啟頁面也是為了這個。雖然這么說,但我們無法保證service worker任何時候都處于生效狀態,所以在service worker中定義的全局狀態可能不會被保留。所以我們最好使用indexDB和localStorage來實現持久化。

調試

service worker在瀏覽器中多帶帶線程運行,通過多帶帶的方式和頁面通信。但是和頁面是處于不同的作用域。這就意味著service worker無法訪問網頁的dom等其他信息。因此我們也無法通過
DevTools里面同一個tab來調試service worker。我們需要一個多帶帶的Tab來調試service worker線程。

在service worker中,它大部分的工作是在監聽的事件中來完成的,比如在install事件中完成資源緩存。同樣我們可以在這里打斷點。

怎么做

下面來展示如何調試

在chrome中打開:chrome://inspect/#service-workers

或者在chrome中輸入:chrome://serviceworker-internals/ 如果列表里面沒有的話,說明沒有service worker正在運行

在DevTools中的Source下面的service worker可以看到對應的js腳本

在這里可以調試

同樣可以使用console.log。

chrome://serviceworker-internals/頁面中,可以看到每個service worker下面有幾個按鈕。

Terminated:注銷service worker

Start/Stop: 開啟/停止service worker

Sync: 給worker同步Sync事件

push: 給worker同步push事件

Inspect:在檢查器中打開worker

==即使勾選了Network中的disable cache,service worker依然會生效,如果需要每次都更新,需要勾選Application->service worker->offline==

發生錯誤時提供穩定版本

創建一個html文件




  
  Stale on Error


  

Registration status:

創建service-worker.js文件

var version = 1;
var cacheName = "stale-" + version;

self.addEventListener("install", function(event) {
    self.skipWaiting();
});

self.addEventListener("activate", function(event) {
    if (self.clients && clients.claim) {
        clients.claim();
    }
});

self.addEventListener("fetch", function(event) {
    // Always fetch response from the network
    event.respondWith(
        fetch(event.request).then(function(response) {
            return caches.open(cacheName).then(function(cache) {
                // If we received an error response
                if(response.status >= 500) {
                    return cache.match(event.request).then(function(response) {
                        // Return stale version from cache
                        return response;
                    }).catch(function() {
                        // No stale version in cache so return network response
                        return response;
                    });
                } else {
                    // Response was healthy so update cached version
                    cache.put(event.request, response.clone());
                    return response;
                }
            });
        })
    );
});

當網絡中斷之后,頁面依然可以訪問。

創建mock響應

我們可以模擬服務器,對客戶端進行響應。

創建index.html頁面




  
  Detailed Registration


  

Network status:

Mock Response

創建service-worker.js

self.addEventListener("fetch", function(event) {
  var requestUrl = new URL(event.request.url);

  if (requestUrl.pathname === "/urlshortener/v1/url" &&
      event.request.headers.has("X-Mock-Response")) {

    var response = {
      body: {
        kind: "urlshortener#url",
        id: "https://goo.gl/KqR3lJ",
        longUrl: "https://www.packtpub.com/books/info/packt/about"
      },
      init: {
        status: 200,
        statusText: "OK",
        headers: {
          "Content-Type": "application/json",
          "X-Mock-Response": "yes"
        }
      }
    };

    var mockResponse = new Response(JSON.stringify(response.body), response.init);

    console.log("Mock Response: ", response.body);
    event.respondWith(mockResponse);
  }
});

可以看到頁面顯示的是service worker里面我們配置的響應

處理請求超時

請求超時有可能是網絡連接的問題,service worker是解決這類問題的理想方案。

創建html文件




  
  Request Timeouts


  

Registration status:

創建service-worker.js

function timeout(delay) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(new Response("", {
                status: 408,
                statusText: "Request timed out."
            }));
        }, delay);
    });
}

self.addEventListener("install", function(event) {
    self.skipWaiting();
});

self.addEventListener("activate", function(event) {
    if (self.clients && clients.claim) {
        clients.claim();
    }
});

self.addEventListener("fetch", function(event) {
  if (/.js$/.test(event.request.url)) {
    event.respondWith(Promise.race([timeout(400), fetch(event.request.url)]));
  } else {
    event.respondWith(fetch(event.request));
  }
});

當我們把jquery地址換成一個錯誤的地址,我們看到一個408的響應。

關注我的微信公眾號,更多優質文章定時推送

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

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

相關文章

  • pwa-service worker 基本概念

    摘要:是瀏覽器和服務器之間的腳本,主要作用是攔截請求,修改響應,以及一些其他的作用。這是出于安全因素的考慮。這個注冊的過程是發生在之外的。在安裝完成,激活之前,它不會攔截任何請求。將會始終攔截請求,重啟頁面也是為了這個。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 學習service worker 基本概念 在本章,將涵蓋以下內容 ...

    galaxy_robot 評論0 收藏0
  • 前端每周清單半年盤點 PWA

    摘要:前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號(ID:frontshow),及時獲取前端每周清單;本文則是對于...

    崔曉明 評論0 收藏0
  • pwa-service worker 離線文件處理

    摘要:勾上刷新頁面,顯示如圖實現原理使用,預先緩存和。又請求已經緩存好的。加載離線圖片創建創建創建訪問,然后打開。一定要訪問啊,不然不會成功多個事件調用事件和其他事件一樣都是可以注冊多次的。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 本章包含以下知識點 顯示離線頁面 加載離線圖片 加載離線css 多個fetch處理事件調用 簡介...

    fizz 評論0 收藏0
  • pwa-service worker 離線文件處理

    摘要:勾上刷新頁面,顯示如圖實現原理使用,預先緩存和。又請求已經緩存好的。加載離線圖片創建創建創建訪問,然后打開。一定要訪問啊,不然不會成功多個事件調用事件和其他事件一樣都是可以注冊多次的。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 本章包含以下知識點 顯示離線頁面 加載離線圖片 加載離線css 多個fetch處理事件調用 簡介...

    mylxsw 評論0 收藏0
  • PWA學習與實踐】(3) 讓你的WebApp離線可用

    摘要:學習與實踐系列文章已整理至學習手冊,文字內容已同步至。本文是學習與實踐系列的第三篇文章。引言其中一個令人著迷的能力就是離線可用。但是,如果你注意到文章開頭的圖片就會發現,離線時我們不僅可以訪問,還可以使用搜索功能。 《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊,文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。 本文是《PWA學習與實...

    since1986 評論0 收藏0

發表評論

0條評論

olle

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<