Web離線應用解決方案—ServiceWorker

內(nèi)容概要

1.http請求過程(僅關(guān)于緩存部分)
2.強緩存
3.對比緩存
4.http header (僅關(guān)于緩存部分)
5.三級緩存
6.簡述緩存服務器
7.正向代理
8.反向代理
9.ServiceWorker

瀏覽器第一次發(fā)送請求時的過程

image.png

http緩存——強緩存

緩存規(guī)則解析
HTTP緩存有多種規(guī)則，根據(jù)是否需要重新向服務器發(fā)起請求來分類，我將其分為兩大類(強制緩存，對比緩存)

image.png

http緩存——對比緩存

image.png

http header

強緩存

1.expires： 這是 http1.0 時的規(guī)范，它的值為一個絕對時間的 GMT 格式的時間字符串，如 Mon, 10 Jun 2015 21:31:12 GMT ，如果發(fā)送請求的時間在 expires 之前，那么本地緩存始終有效，否則就會發(fā)送請求到服務器來獲取資源
2.Cache-Control：這是 http1.1 時出現(xiàn)的 header 信息，主要是利用該字段的 max-age 值來進行判斷，它是一個相對值；資源第一次的請求時間和 Cache-Control 設定的有效期，計算出一個資源過期時間，再拿這個過期時間跟當前的請求時間比較，如果請求時間在過期時間之前，就能命中緩存，否則未命中。

Cache-Control的值

1.max-age=number
2.no-cache： 不使用本地緩存。需要使用緩存協(xié)商，先與服務器確認返回的響應是否被更改，如果之前的響應中存在 ETag ，那么請求的時候會與服務端驗證，如果資源未被更改，則可以避免重新下載
3.no-store： 直接禁止游覽器緩存數(shù)據(jù)，每次用戶請求該資源，都會向服務器發(fā)送一個請求，每次都會下載完整的資源。
4.public： 可以被所有的用戶緩存，包括終端用戶和 CDN 等中間代理服務器。
5.private： 只能被終端用戶的瀏覽器緩存，不允許 CDN 等中繼緩存服務器對其緩存。

Last-Modified/If-Modified-Since

1.第一次跟服務器請求一個資源時，在 respone 的 header 加上 Last-Modified 字段
2.瀏覽器再次跟服務器請求這個資源時，在 request 的 header 上加上 If-Modified-Since 字段
3.根據(jù) 瀏覽器If-Modified-Since 服務器Last-Modified 如果沒有變化則返回 304 Not Modified，如果有變化，就正常返回資源內(nèi)容。

Etag / If-None-Match

1.第一次跟服務器請求一個資源時，返回了ETag：1234。
2.第二次客戶端訪問資源的時候，由于緩存中已經(jīng)有了Etag為1234的資源，若服務器Etag無變化則返回304和新的Etag，若服務器標簽Etag改變，則返回新的資源與新的Etag

HTTP請求——流程圖

image.png

HTTP緩存

網(wǎng)絡請求 size3種狀態(tài)

1.from memony cache：不會請求服務器，資源存在于內(nèi)存中
2.from disk cache ：不會請求服務器，資源存在于硬盤中
3.資源大小的數(shù)值：http狀態(tài)碼200，從服務器獲取的資源。當http狀態(tài)碼304，為與服務器通信的報文大小，資源從本地獲取

http三級緩存

三級緩存一般分為：內(nèi)存、硬盤、網(wǎng)絡三級緩存

1.內(nèi)存：相對于磁盤緩存，速度更快，缺點是容量較小，不能存儲大容量數(shù)據(jù)，且會被系統(tǒng)回收。
2.硬盤：相對于內(nèi)存來說存儲空間很大，能夠存儲較多的數(shù)據(jù)。并且可永久存儲。
3.網(wǎng)絡：服務器端，通過HTTP請求獲得。緩存服務器

三級緩存原理

1.先去內(nèi)存看，如果有，直接加載
2.如果內(nèi)存沒有，擇取硬盤獲取，如果有直接加載
3.如果硬盤也沒有，那么就進行網(wǎng)絡請求
4.加載到的資源緩存到硬盤和內(nèi)存

網(wǎng)絡:代理服務器（緩存服務器）

提供代理服務的電腦系統(tǒng)或其它類型的網(wǎng)絡終端,代替網(wǎng)絡用戶去取得網(wǎng)絡信息。
Web緩存服務器的應用模式主要是正向代理和反向代理。

正向代理

意思是一個位于客戶端和原始服務器(origin server)之間的服務器，為了從原始服務器取得內(nèi)容，客戶端向代理發(fā)送一個請求并指定目標(原始服務器)，然后代理向原始服務器轉(zhuǎn)交請求并將獲得的內(nèi)容返回給客戶端?？蛻舳瞬拍苁褂谜虼?。

image.png

反向代理（Reverse Proxy）

實際運行方式是指以代理服務器來接受internet上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡上的服務器，并將從服務器上得到的結(jié)果返回給internet上請求連接的客戶端，此時代理服務器對外就表現(xiàn)為一個服務器。

image.png

兩者的區(qū)別在于代理的對象不一樣，「正向代理」代理的對象是客戶端，「反向代理」代理的對象是服務端。

Web離線應用解決方案——ServiceWorker

Service workers 本質(zhì)上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網(wǎng)絡可用時作為瀏覽器和網(wǎng)絡間的代理。

ServiceWorker的作用

1.網(wǎng)絡代理，轉(zhuǎn)發(fā)請求，偽造響應
2.離線緩存
3.消息推送
4.后臺消息傳遞

Service Worker生命周期

注冊

 //注冊serviceworker
           if ('serviceWorker' in navigator) {
             navigator.serviceWorker.register('./sw.js').then(function(registration) {
               // Registration was successful
               console.log('ServiceWorker registration successful with scope: ',    registration.scope);
             }).catch(function(err) {
               // registration failed :(
               console.log('ServiceWorker registration failed: ', err);
             });
           }

以上代碼會先檢測ServiceWorker API在瀏覽器中是否可用，可用的話一個Service Worker（/sw.js）將被注冊，如果這個Service Worker已經(jīng)注冊過了，則瀏覽器則會忽略以上代碼。

注冊成功后，則可以打開chrome://inspect/#service-workers 或chrome://serviceworker-internals/查看瀏覽器的Service Worker信息。

安裝、激活

install 事件會在注冊完成之后觸發(fā)。install 事件一般是被用來填充你的瀏覽器的離線緩存能力。你需要為 install 事件定義一個 callback ，并決定哪些文件你想要緩存.

// 我們需要緩存的空間命名，即需要緩存的文件
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/serviceWorker/chenrenjie.html',
    '/serviceWorker/index.html',
  '/serviceWorker/css/main.css',
  '/serviceWorker/js/main.js',
    '/serviceWorker/js/JIE.js'
];

//安裝serviceWorker
const installServiceWorker = function(event) {
    event.waitUntil(
    caches.open(CACHE_NAME)
        .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
        })
    );
}
self.addEventListener("install", installServiceWorker);

image.png

監(jiān)聽 service worker

//請求監(jiān)聽
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 命中了緩存，則直接返回緩存
        if (response) {
          return response;
        }

        return fetch(event.request);
      }
    )
  );
});

上面的代碼里我們定義了 fetch 事件，在 event.respondWith 里，我們傳入了一個由 caches.match 產(chǎn)生的 promise.caches.match 查找 request 中被 service worker 緩存命中的 response 。
如果我們有一個命中的 response ，我們返回被緩存的值，否則我們返回一個實時從網(wǎng)絡請求 fetch 的結(jié)果。

image.png

ps:個人巧合發(fā)現(xiàn)lodash和ant.design的官網(wǎng)有使用ServiceWorker，感興趣和去看一下