Vue項目引入PWA的步驟

Posted on by

Vue項目引入PWA很簡單，操作步驟如下：

1. 安裝依賴

vue add @vue/pwa

由於使用add關鍵字，安裝成功後會在項目中創建一些文件，如果項目使用瞭git，可以很容易的看出文件變化：

src文件夾下會生成一個registerServiceWorker.js文件，並在main.js中導入，這個文件自動生成瞭註冊service worker的代碼。registerServiceWorker.js的代碼如下：

import { register } from 'register-service-worker'

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 () {
      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: '/',
      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的資料請關註WalkonNet其它相關文章！

推薦閱讀：