初探PWA

時間 2019-11-16

標籤初探 pwa 简体版

原文原文鏈接

引言

PWA(Progressive web apps, 漸進式Web應用)，近兩年被炒的十分火爆，它有什麼優勢呢？css

能夠生成桌面小圖標，不須要打開瀏覽器，方便用戶訪問
經過網絡緩存提高頁面訪問速度，達到漸進式的頁面甚至離線訪問，提高用戶體驗
實現相似app的推送功能，生成系統通知推送給用戶

上面的這些優勢足以讓它吸引大量的開發者來探索和應用，畢竟對於web應用來講，用戶體驗纔是檢驗web應用的好壞的至高標準，而PWA的這些優勢偏偏是開發者在開發時一直追求的html

Service Worker

service worker是實現PWA的核心，service worker是一個獨立的瀏覽器線程，不會對當前程序的執行線程形成阻塞，經過service worker能夠實現頁面離線訪問、用戶消息推送等功能vue

生命週期

service worker生命週期徹底獨立於網頁，所以，要想網頁中使用service worker，須要先註冊，註冊後瀏覽器會在後臺啓動相關的安裝步驟，通常狀況下，咱們須要service worker緩存一些靜態文件，所以安裝過程當中會對指定的靜態文件進行緩存，若緩存成功，則service worker安裝成功，若中間有任何一個文件緩存失敗，則service worker安裝失敗，會在下次重啓時再次嘗試，下面來看一個具體的生命週期圖（來源[https://developer.mozilla.org...]()）：
webpack

簡單應用

看來上面的介紹，是否是躍躍欲試呢？接下來將用代碼來簡單使用一下service worker，緩存頁面中的css、js文件，具體例子：ios

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/cache1.css">
    <title>pwa</title>
  </head>
  <body>
    <div id="app">test1</div>
    <!-- built files will be auto injected -->
    <script src='/cache1.js'></script>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/sw.js').then((registration) => {
            console.log('Service Worker Registration')
          }, (err) => {
            console.log(err)
          })
        })
      }
      self.addEventListener('fetch', () => {
        console.log('ss')
      })
    </script>
  </body>
</html>

sw.js：git

var cacheName = 'my-cache'
var cacheList = ['/cache1.css', '/cache1.js']
self.addEventListener('install', function(event) {
  event.waitUntil(
    // 安裝成功後向caches中存入須要緩存的文件  
    caches.open(cacheName).then(function (cache) {
        return cache.addAll(cacheList)
    })
  )
});
// 監聽service worker fetch
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
        .then(function(response) {
            // 在緩存中查找到匹配的請求，就從緩存返回
            if (response) {
                console.log(response)
                return response;
            }
            // 緩存中沒有查找到對應請求，繼續網絡請求
            return fetch(event.request);
        }
    )
  );
})

如上例所示，利用service worker緩存了頁面請求中cache1.js、cache1.css，而後再刷新一下網頁，網頁請求就會變成下圖這樣：

在網絡請求面版能夠很清楚看到這兩個文件是從ServiceWorker中請求出來的，可能有些人對caches這個緩存對象還不是很瞭解，這有一篇文章能夠幫助你們理解：傳送門github

vue-cli3中的pwa

vue最新腳手架中集成了pwa的插件，將pwa的實現變得更加的簡單，只須要在vue.config.js文件中配置pwa屬性就能夠自動生成對應的service-worker.js配置文件，配置參考：傳送門，這裏面最核心的就是集成了google團隊開發的Workbox，所以關於更加詳細的pwa配置能夠參考：傳送門，這裏麪包含workbox全部配置項，這裏面須要關注的是runtimeCaching屬性，這個屬性提供五種緩存策略：web

CacheFirst：優先取緩存中的數據，若沒有則請求網絡，請網絡也失敗就會報錯
CacheOnly：只從緩存中獲取，若沒有則報錯
NetworkFirst：優先從網絡獲取，若沒有則從緩存中獲取，緩存獲取失敗則報錯
NetworkOnly：只從網絡獲取，若沒有則報錯
StaleWhileRevalidate：同時從網絡與緩存獲取，若是緩存可用，取緩存數據，不然從網絡中請求，同時緩存會隨着網絡請求而更新

更加詳細的緩存策略能夠參考傳送門，這裏的緩存策略還須要注意的一個問題就是同源策略的問題，通常狀況下workbox不會緩存跨域的資源請求，由於在緩存跨域資源時，workbox沒法檢測跨域請求是否成功，若是失敗，用戶將沒法獲取響應數據，可是在NetworkFirst和StaleWhileValidate策略下，能夠緩存跨域資源，由於這兩個策略的緩存會按期更新，即使出現失敗請求，緩存的時間也是短暫的，具體詳情能夠參考傳送門vue-cli

兼容性

ServiceWorker這麼牛，是否是就沒有什麼問題了呢，它最大的問題應該就是它的兼容性問題了，iOS11.3以前都不支持，具體詳情參考：傳送門，所以vue腳手架在集成時默認在ios下是關閉的跨域

總結

PWA確實是當下很熱門的技術，由於它提高了web應用的體驗，甚至達到能夠和原生app體驗相提並論，可是它的問題就是兼容性問題，相信若是兼容性問題獲得解決，這種技術必定會被大面積推廣到實際應用，但願經過這篇文章能對你們瞭解這門技術有必定的幫助。若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊。

1. 初探PWA
2. PWA初探
3. PWA初探整理
4. [貝聊科技]PWA初探
5. pwa+webpack，初探與踩坑
6. PWA初體驗
7. pwa學習筆記-pwa初體驗
8. PWA的探索與應用
9. Service Workers （PWA 初體驗）
10. 探究 PWA 的實現與應用
更多相關文章...
• 探索Redis事務回滾 - Redis教程
• 使用TCP協議檢測防火牆 - TCP/IP教程
• 適用於PHP初學者的學習線路和建議
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。