如何在vue項目中使用PWA

pwa ? 這是什麼？ 第一次聽到pwa的時候是隔壁桌的大佬在交流前端的時候說的“這是前端目前很火的技術，用戶體驗很好，簡單方便 ... ...”。聽起來就很想試一試，在大佬的幫助下完成了自己人生的第一個pwa項目。強烈安利，接下來就好好的去了解一下所謂的pwa

什麼是pwa ？

Progressive Web App, 簡稱 PWA，是提升 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提升，PWA 本質上是 Web App，藉助一些新技術也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優點。

PWA 的主要特點包括下面三點：

• 可靠 - 即使在不穩定的網絡環境下，也能瞬間加載並展現
• 體驗 - 快速響應，並且有平滑的動畫響應用戶的操作
• 粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面

PWA 本身強調漸進式，並不要求一次性達到安全、性能和體驗上的所有要求，開發者可以通過 PWA Checklist 查看現有的特徵。

      簡單的說，其實pwa就是可以做成類似於app的小應用，可以自己設置名字和圖標，只要在瀏覽器的地址欄後面點擊安裝就可以安裝到桌面（輕量，或許有幾百kb的緩存數據），即開即用，省去了去軟件商店安裝的過程，還不用上架軟件商店就可以有原生app的體驗。

   下面就是我們從用戶角度所能看到的，從頁面提醒安裝，到用戶安裝在桌面生成圖標，以及最後打開軟的看到的視圖的部分截圖。

 

• 提醒用戶安裝

• 在桌面生成圖標（圖標和名稱是可以自定義的）

 

• 點擊圖標看到的視圖

       有沒有很像一個原生的app，想一想自己的網易音樂好像也是這樣打開的哎，我們不用經過 App Store就可以在mac上安裝小圖標了，激不激動，開不開心，接下來就是見證小奇蹟的時候。

如何使用PWA進行開發

         當我們剛開始知道pwa的時候，很難去下手，就像我們就算知道做一個架構師很厲害，我們卻沒有做到，並不是因爲我們不想，那是因爲實力不允許啊。接下來就好好去說一下在實戰中如何使用pwa，別問底層原理啥的啊，因爲我也不知道。

         首先，我們準備蔥薑蒜，不對，岔了，再來，首先我們需要有一個項目vue ui 的項目

1.  剛開始我們肯定要安裝pwa插件，在命令行中輸入 vue add @vue/pwa 命令就可以安裝pwa插件以及相關依賴包和文件。在pwa插件安裝成功後生成的文件包括：一些vue的logo圖片、manifest.json、registerServiceWorker.js。 生成的vue的logo圖片是示例圖片，已經默認配置在了manifest.json中。registerServiceWorker.js是用來註冊service worker的註冊器，當然不使用這個生成的註冊器也是可以的

 

 

 

  vue add @vue/pwa

2.  vue.config.js 文件中配置pwa

 

 

 

  pwa: {
    workboxOptions: {
      // https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
      skipWaiting: true,
      clientsClaim: true,
      importWorkboxFrom: 'local',
      importsDirectory: 'js',
      navigateFallback: '/',
      navigateFallbackBlacklist: [/\/api\//]
    }
  }

 

3. 註冊service worker。 安裝pwa插件時會生成一個registerServiceWorker.js（src文件下）文件並在main.js中添加導入，這個文件中自動生成了註冊service worker的代碼。其中默認生成的service worker名稱爲service-worker.js，可以修改爲自定義的service worker，如sw.js。registerServiceWorker.js的代碼如下。

 

 

 

import { register } from 'register-service-worker'import { Message, MessageBox } from 'element-ui'if (process.env.NODE_ENV === 'production') {  register(`${process.env.BASE_URL}service-worker.js`, {    ready() {      console.log(        'App is being served from cache by a service worker.\n' +          'For more details, visit https://goo.gl/AFskqB'      )    },    registered() {      console.log('Service worker has been registered.')    },    cached() {      console.log('Content has been cached for offline use.')    },    updatefound() {      Message({        message: '檢測到新版本，正在下載',        type: 'info'      })      console.log('New content is downloading.')    },    updated() {      MessageBox({        title: '更新',        message: '新版本內容下載完成，點擊確定按鈕立即使用新版',        confirmButtonText: '確定',        showClose: false,        showCancelButton: false,        closeOnClickModal: false,        closeOnPressEscape: false,        type: 'success',        callback() {          location.reload()        }      })      console.log('New content is available; please refresh.')    },    offline() {      console.log(        'No internet connection found. App is running in offline mode.'      )    },    error(error) {      console.error('Error during service worker registration:', error)    }  })}

 

然後我們在main.js中引入registerServiceWorker.js 

 

 

 

import './registerServiceWorker'

 

4.   配置public/manifest.json文件，這是pwa的添加至桌面的功能主要就是依賴於這個文件

 

 

 

{
    "short_name": "短名稱",
    "name": "這是一個完整名稱",
    "icon": [  
        {
         "src": "./img/icons/icon-192x192.png",  // 可以自定義的icon
         "sizes": "192x192",   // 要注意尺寸要和實際尺寸相同
         "type": "image/png"        },
        {
         "src": "./img/icons/android-chrome-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
        }
    ],
    "start_url": "index.html" // 啓動網址
    "display": "standalone",  // 啓動畫面
    "background_color": "#002140", // 啓動背景顏色
    "theme_color": "#002140" //  （index.html文件中也要設置）主題顏色，強烈建議和ui主題顏色保持一致，看起來更有原生app的感覺
}

 

     manifest.json 文件後面還有一些配置可以改變用戶體驗的，可以在這個網址看一下https://lavas.baidu.com/pwa/engage-retain-users/add-to-home-screen/improved-webapp-experience

5. 哇哦，接下來就是最後一步了，在public/index.html   中設置一下我們的主題顏色

 

 

 

<meta name="theme-color" content="#00142A"> //之前只在manifest.json的“theme_color“設置了，沒有起到作用，差點懷疑人生

 

接下來就是見證成果的時候，我們可以先build一下，看看生成的dist文件中的index有沒有引用成功 manifest.json文件，看看相應的配置有沒有生成，如果有，那麼恭喜你，人生的第一個pwa項目完成，手動撒花🎉

  <link rel=manifest href=/manifest.json>
  <meta name=theme-color content=#4DBA87>

有人說，pwa那麼好爲什麼沒那麼火，爲此我也是百度了一下

1. 遊覽器對技術支持還不夠全面， 不是每一款遊覽器都能100%的支持所有PWA
2. 需要通過第三方庫才能調用底層硬件（如攝像頭）
3. PWA現在還沒那麼火，國內一些手機生產上在Android系統上做了手腳，似乎屏蔽了PWA, 但是相信當PWA火起來以後，這個問題就不會是問題

       管它火不火，我們學到的是知識，而且又這麼有趣，當然要學一下嘍，要不然怎麼能說自己是一個優秀的前端呢。作爲一個良心的博主，爲了瞭解更多的pwa，，我們可以看一下https://lavas.baidu.com/pwa   網站上講的很詳細，包括用戶體驗什麼的都有，沒事可以研究一下，有事也可以抽時間瞭解一下，你會發現一個更美好的世界。