輕鬆把你的項目升級到PWA

時間 2019-11-19

標籤輕鬆把你項目升級 pwa 简体版

原文原文鏈接

什麼是PWA

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

優勢

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

缺點

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

我的觀點

PWA屬於非侵入式的技術，能夠作到降級兼容，而且擁有強大的離線功能，能夠更快的響應，因此仍是很是推薦使用的。webpack

網絡應用清單

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

Service workers

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

生命週期： 註冊→下載→安裝→激活web

狀態 installing 、installed 、waiting 、activating 、activatedshell

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

注意： 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

 1 `service-worker.js`
 2 ```ecmascript 6
 3 // 緩存靜態文件
 4 self.addEventListener('install', function(event) {
 5   event.waitUntil(
 6       // 緩存指定文件
 7     caches.open('v1').then(function(cache) {    
 8       return cache.addAll([
 9         '/',
10         '/index.html',
11         '/style.css',
12         '/app.js',
13         '/image-list.js',
14         '/star-wars-logo.jpg',
15       ]);
16     })
17   );
18 });

 1 // 緩存接口數據
 2 self.addEventListener('fetch', function(event) {
 3   event.respondWith(caches.match(event.request).then(function(response) {
 4     // 匹配到請求
 5     if (response !== undefined) {
 6       return response;
 7     } else {
 8       return fetch(event.request).then(function (response) {
 9         // 緩存響應數據
10         let responseClone = response.clone();
11 
12         caches.open('v1').then(function (cache) {
13           cache.put(event.request, responseClone);
14         });
15         return response;
16       }).catch(function () {
17         return caches.match('/gallery/myLittleVader.jpg');
18       });
19     }
20   }));
21 });

 1 // 更新緩存
 2 self.addEventListener('activate', function(event) {
 3   event.waitUntil(
 4     caches.keys().then(function(cacheNames) {
 5       return Promise.all(
 6         cacheNames.map(function(cacheName) {
 7           // 若是有更新
 8           if (cacheName !== 'v1') {
 9             return caches.delete(cacheName);
10           }
11         })
12       );
13     })
14     .then(function(){
15       return self.clients.claim()
16     })
17   );
18 });

webpack項目升級PWA

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

1.修改文件：

index.html

1 <script>
2 if ('serviceWorker' in navigator) {
3   window.addEventListener('load', function() {
4       navigator.serviceWorker.register('./service-worker.js');
5   });
6 }
7 </script>

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並自動完成相關配置
```