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

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 該應用程序在傳統的瀏覽器標簽或新窗口中打開，具體實現取決于瀏覽器和平臺， 這是默認的設置。

<meta name='theme-color' content='#080403'><link rel='manifest' href='http://www.piao2010.com/bcjs/manifest.json' rel='external nofollow' >

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

以上就是Vue項目引入PWA的步驟的詳細內容，更多關于Vue項目引入PWA的資料請關注好吧啦網其它相關文章！