輕松把你的項目升級到PWA

什么是PWA

PWA（Progressive Web Apps,漸進式網頁應用）是Google在2015年推出的項目，致力於通過web app獲得類似native app體驗的網站。

優點

1.無需客戶端，少量流量即可安裝 2.可添加到主屏並全屏運行 3.離線功能，響應更快，及時更新 4.PUSH能力 5.數據傳輸必須是https

缺點

1.safari對PWA的態度是考慮中,暫時還不支持 2.PUSH還不夠成熟，依賴於Web Push Protocol,Chrome只支持Google私有的GCM（Google Cloud Messaging）/FCM服務進行通知推送。國內的mipush也支持了很多app，在此希望中國能盡快有一個統一的推送服務出現~

個人觀點

PWA屬於非侵入式的技術，可以做到降級兼容，並且擁有強大的離線功能，可以更快的響應，所以還是非常推薦使用的。

網絡應用清單

網絡應用清單是一個 JSON 文件，主要定義一些啟動網址，自定義圖標，啟動畫面，主題顏色，啟動樣式等等配置信息 這邊是在App內的M頁，並且國內安卓用戶使用的瀏覽器都不太支持這些定義，所以不詳細介紹了。 The Web App Manifest官方文檔，介紹的很詳細~ webpack-manifest-plugin如果使用webpack也可以使用類似這種插件來生成~ Web App Manifest Generator如果手寫也有像這樣的工具提供~

Service workers

定義： Service workers 本質上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網絡可用時作為瀏覽器和網絡間的代理。它們旨在（除其他之外）使得能夠創建有效的離線體驗，攔截網絡請求並基於網絡是否可用以及更新的資源是否駐留在服務器上來采取適當的動作。他們還允許訪問推送通知和后台同步API。

生命周期： 注冊→下載→安裝→激活

狀態 installing 、installed 、waiting 、activating 、activated

主要事件 install 准備sw用於使用，例如創建緩存，放置離線資源 activate 此時可以清理舊緩存及相關的東西以便更新 fetch 響應請求事件，通過FetchEvent.respondWith方法，對這些請求做處理 install、activate事件會觸發waitUntil方法

注意： 1.Service workers運行在其他線程，完全異步，同步API不能在其中使用 2.大量使用Promise

Cache

方法 add()、addAll()、delete()、keys()、match()、matchAll()

基礎用法

單獨創建一個app.js文件，放到根目錄,並在index.html中引用它 app.js ```ecmascript 6 if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('./service-worker.js', {scope: './'}) // 參數1：注冊提供的腳本URL 參數2：導航匹配 .then(function(registration) { // 注冊成功 // registration對象存有對sw所在生命周期的狀態及狀態變更事件及一些父接口的方法 // 狀態分別有 installing 、 installed 、 waiting 、 activating 、 activated if(registration.installing) { console.log('Service worker installing'); } else if(registration.waiting) { console.log('Service worker installed'); } else if(registration.active) { console.log('Service worker active'); } }).catch(function(error) { // 注冊失敗 }); }

根目錄下創建執行文件service-worker.js

`service-worker.js`
```ecmascript 6
// 緩存靜態文件
self.addEventListener('install', function(event) {
  event.waitUntil(
      // 緩存指定文件
    caches.open('v1').then(function(cache) {    
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/app.js',
        '/image-list.js',
        '/star-wars-logo.jpg',
      ]);
    })
  );
});

// 緩存接口數據
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // 匹配到請求
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // 緩存響應數據
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        return caches.match('/gallery/myLittleVader.jpg');
      });
    }
  }));
});

 

// 更新緩存
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          // 如果有更新
          if (cacheName !== 'v1') {
            return caches.delete(cacheName);
          }
        })
      );
    })
    .then(function(){
      return self.clients.claim()
    })
  );
});

 

webpack項目升級PWA

看到上邊n多的API是不是很頭疼，以及手動添加靜態文件是不是很絕望，那么sw-precache-webpack-plugin這個插件輕松幫你解決所有問題 現在我們就來升級下之前推過的小型Web頁打包優化這片文章中所介紹的腳手架

1.修改文件：

1. index.html

   <script>
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', function() {
         navigator.serviceWorker.register('./service-worker.js');
     });
   }
   </script>

    

2. webpack.prod.config.js ```ecmascript 6 var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin') // plugins 數組內添加 new SWPrecacheWebpackPlugin({ cacheId: 'my-vue-app', filename: 'service-worker.js', minify: true, // 其他更多配置請查看官方文檔 })

   自動生成service-worker.js並自動完成相關配置
   

2.通過正常邏輯打包~

npm run build ZZSellerTip

3.啟動一個本地靜態服務器

為了方便調試Service Worker在http://localhost或者http://127.0.0.1 本地環境下也可以跑起來 將打包好的文件通過http-server生成的靜態服務器運行 運行結果：  關掉http-server可以看到依然可以訪問  

注意：如果你的靜態文件是放到CDN上的，那么服務器一定要開通CORS，因為fetch請求是不支持跨域的~~

致此，項目改造就算完成了，總體來說改造成本還是很低的，所以小伙伴們一起搞起來吧~

 

如果你喜歡我們的文章，關注我們的公眾號和我們互動吧。