Vue項目引入PWA的步驟

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其它相關文章!