<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

      干貨 | 10分鐘玩轉PWA

      2020-10-26 09:53:56
      薛才杰
      原創
      1564

      關于PWA

      PWA(Progressive Web App), 即漸進式web應用。PWA本質上是web應用,目的是通過多項新技術,在安全、性能、體驗等方面給用戶原生應用的體驗。而且無需像原生應用那樣繁瑣的下載、安裝、升級等操作。

      這里解釋下概念中的“漸進式”,意思是這個web應用還在不斷地進步中。因為目前而言,PWA還沒有成熟到一蹴而就的程度,想在安全、性能、體驗上達到原生應用的效果還是有很多的提升空間的。一方面是構建PWA的成本問題,另一方面是目前各大瀏覽器、安卓和IOS系統對于PWA的支持和兼容性還有待提高。

      本文我將從網站緩存、http請求攔截、推送到主屏等功能,結合實例操作,一步步引領大家快速玩轉PWA技術。

      Service Worker

      Service Worker是PWA的核心技術,它能夠為web應用提供離線緩存功能,當然不僅如此,下面列舉了一些Service Worker的特性:

      • 基于HTTPS 環境,這是構建PWA的硬性前提。( LAMP環境網站升級HTTPS解決方案

      • 是一個獨立的 worker 線程,獨立于當前網頁進程,有自己獨立的 worker context

      • 可攔截HTTP請求和響應,可緩存文件,緩存的文件可以在網絡離線狀態時取到

      • 能向客戶端推送消息

      • 不能直接操作 DOM

      • 異步實現,內部大都是通過 Promise 實現

      Service Worker生命周期

      serviceworker的使用流程可以簡單總結為注冊--安裝--激活。

      注冊

      注冊其實就是告訴瀏覽器serviceworkerJS文件存放在什么位置,然后瀏覽器下載、解析、執行該文件,進而啟動安裝。這里我創建一個app.js文件,注冊代碼如下,將該文件在網站的head標簽里引入。

              if ('serviceWorker' in navigator) {
          window.addEventListener('load', function () {
              navigator.serviceWorker.register('/sw.js')
                  .then(function (registration) {
                      // 注冊成功
                      console.log('ServiceWorker registration successful with scope: ', registration.scope);
                  })
                  .catch(function (err) {
                      // 注冊失敗:(
                      console.log('ServiceWorker registration failed: ', err);
                  });
          });
      }


      安裝

      當執行serviceworkerJS文件時,首先觸發的是install事件,進行安裝。安裝的過程就是將指定的一些靜態資源進行離線緩存。下面是我的sw.js文件中的安裝代碼:

              var CACHE_VERSION = 'sw_v8';
      var CACHE_FILES = [
          '/js/jquery/min.js',
          '/js/zui/min.js',
          '/js/chanzhi.js',
      ];
      self.addEventListener('install', function (event) {
          event.waitUntil(
              caches.open(CACHE_VERSION)
                .then(cache => cache.addAll(CACHE_FILES)
          ));
      });


      激活

      當安裝成功后,serviceworker就會激活,這時就會處理 activate 事件回調 (提供了更新緩存策略的機會)。并可以處理功能性的事件 fetch (請求)、sync (后臺同步)、push (推送)。

              self.addEventListener('activate', function (event) {
          event.waitUntil(
              caches.keys().then(function(keys){
                  return Promise.all(keys.map(function(key, i){
                      if(key !== CACHE_VERSION){
                          return caches.delete(keys[i]);
                      }
                  }));
              })
          );
      });


      serviceworker的緩存功能

      安裝時,serviceworker將我們指定的靜態資源進行緩存(即預緩存),你也許會問,如果是實時的動態內容怎么辦,我們不可能預先將所有的文件資源提前指定好,讓serviceworker緩存。這就要提到serviceworker的攔截HTTP請求響應的特性了。

      serviceworker攔截http請求,首先去檢查請求的資源在緩存中是否存在,如果存在,則直接從緩存中調用,而且即便是無網絡情況下,serviceworker也能調用緩存中的資源。如果緩存中沒有請求的資源,則通過網絡去服務器上檢索,而且在找到并響應時,serviceworker會將其存入緩存中,以備下次再請求時直接從緩存中調用。

      serviceworker緩存流程

      serviceworker文件中fetch事件代碼如下:

      self.addEventListener('fetch', function (event) {
          event.respondWith(
              caches.match(event.request).then(function(response){
                  if(response){
                      return response;
                  }
                  var requestToCache = event.request.clone();
                  return fetch(requestToCache).then(
                    function(response){
                      if(!response || response.status !== 200){
                        return response;
                      }
                      var responseToCache = response.clone();
                      caches.open(CACHE_VERSION)
                        .then(function(cache){
                          cache.put(requestToCache, responseToCache);
                        });
                      return response;
                    }
                  );
              })
          );
      });


      在網站前臺通過瀏覽器開發者工具,我們可以看下從緩存中調用資源的效果:

      我這里操作演示用的是谷歌瀏覽器,下面是各大瀏覽器對于serviceworker的支持情況:

      serviceworker瀏覽器支持情況

      添加到主屏

      PWA支持將web應用在主屏桌面上添加一個快捷方式,以方便用戶快速訪問,同時提升web應用重復訪問的幾率。你也許會說,現在移動端上的瀏覽器功能列表里一般都提供了“添加到桌面”的功能呀,但是PWA與瀏覽器自帶的添加到桌面的實現方式不同。

      PWA不需要用戶刻意去功能列表中使用這個功能按鈕,而是在用戶訪問web應用時,直接在界面中提示一個添加到主屏桌面的橫幅,從web應用角度而言,這其實就是主動與被動的區別。

      PWA實現該功能非常簡單,只需要一個manifest.json文件,文件中用戶可以自定義應用的啟動頁面、 模板顏色、圖標等內容。下面是我的manifest.json文件設置,大家可作參考:

      {
        "short_name": "
              蟬知
      資源站",
        "name": "蟬知資源站",
        "icons": [
          {
            "src": "chanzhiicon.png",
            "type": "image/png",
            "sizes": "48x48"
          },
          {
            "src": "192.png",
            "type": "image/png",
            "sizes": "192x192"
          },
          {
            "src": "512.png",
            "type": "image/png",
            "sizes": "512x512"
          },
          {
            "src": "144.png",
            "type": "image/png",
            "sizes": "144x144"
          }
        ],
        "start_url": "/index.html",
        "display": "standalone",
        "background_color": "#2196F3",
        "orientation": "landscape",
        "theme_color": "#2196F3"
      }


      需要提醒的是,目前移動端IOS系統的支持并不好,安卓手機上須使用57版本以上的谷歌瀏覽器可以支持該功能,下面是我在安卓手機上的操作演示:

      添加到主屏


      小結

      PWA技術正被廣大企業及開發者們關注,雖然目前各設備的支持兼容有待提高,但這些都正在不斷的改善進步。我也相信在不久的將來,PWA技術會逐步廣泛普及,為廣大企業和用戶帶來便利。本文和大家一起分享了PWA的相關技術與實例操作,后面還會就消息推送、數據同步等功能做進一步探討交流。如果大家在學習PWA的過程中遇到其他問題,歡迎一起討論交流。


      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>