vue專案引入PWA很簡單，操作步驟如下：

1. 安裝依賴

vue add @vue/pwa

由於使用add關鍵字，安裝成功後會在專案中建立一些檔案，如果專案使用了git，可以很容易的看出檔案變化：

src資料夾下會生成一個registerServiceWorker.js檔案，並在main.js中匯入，這個檔案自動生成了註冊service worke程式設計客棧r的程式碼。registerServiceWorker.js的程式碼如下：

程式設計客棧import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}serviqPCIWqdRO
 
ce-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 () {
      c程式設計客棧onsole.log('Content has been cached for offline use.')
    },updatefound () {
      console.log('New content is downloading.')
    },updated () {
      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)
    }
  })
}

2. 在vue.config.js檔案中配置pwa：

module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,clientsClaim: true,importWorkboxFrom: 'local',importsDirectory: 'js',navigateFallback: '/',qPCIWqdRO navigateFallbackBlacklist: [/\/api\//]
    }
  }
}

3. 手動新增manifest.json檔案到專案的public目錄下，manifest.json內容如下：

{
  "short_name": "應用簡稱",// 將來展示在手機桌面應用圖示下
  "name": "應用全稱",// 將來展示在電腦桌面應用圖示下
  "icon": [
      {
          "src": "./img/icons/android-chrome-192x192.png","sizes": "192x192","type": "image/png"
      },{
          "src": "./img/icons/android-chrome-512x512.png","sizes": "512x512","type": "image/png"
      }
  ],// 桌面圖示，是一個數組，注意圖片大小和格式
  "start_url": "index.html",// 應用啟動時的url
  "display": "standalone","background_color": "#080403","theme_color": "#080403"
}

display欄位表示顯示模式，具體引數及描述如下：

顯示模式	描述
fullscreen	全屏顯示,所有可用的顯示區域都被使用,並且不顯示狀態列chrome。
standalone	讓這個應用看起來像一個獨立的應用程式，包括具有不同的視窗，在應用程式啟動器中擁有自己的圖示等。這個模式中，使用者代理將移除用於控制導航的UI元素，但是可以包括其他UI元素，例如狀態列。
minimal-ui	該應用程式將看起來像一個獨立的應用程式，但會有瀏覽器位址列， 樣式因瀏覽器而異。
browser	該應用程式在傳統的瀏覽器標籤或新視窗中開啟，具體實現取決於瀏覽器和平臺， 這是預設的設定。

4. 在index.html檔案中新增如下程式碼：

<meta name="theme-color" content="#080403">
<link rel="manifest" href="manifest.json" rel="external nofollow" >

接下來就是見證奇蹟的時刻，執行npm run build，檢視dist下的index.html檔案中是否引入了manifest.json檔案，再看看相應的配置有沒有生成，如果有，恭喜你，第一個pwa專案完成了！

以上就是Vue專案引入PWA的步驟的詳細內容，更多關於Vue專案引入PWA的資料請關注我們其它相關文章！