Vue項(xiàng)目引入PWA很簡(jiǎn)單，操作步驟如下：

vue add @vue/pwa

由于使用add關(guān)鍵字，安裝成功后會(huì)在項(xiàng)目中創(chuàng)建一些文件，如果項(xiàng)目使用了git，可以很容易的看出文件變化：

src文件夾下會(huì)生成一個(gè)registerServiceWorker.js文件，并在main.js中導(dǎo)入，這個(gè)文件自動(dòng)生成了注冊(cè)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. 手動(dòng)添加manifest.json文件到項(xiàng)目的public目錄下，manifest.json內(nèi)容如下：

{ 'short_name': '應(yīng)用簡(jiǎn)稱', // 將來展示在手機(jī)桌面應(yīng)用圖標(biāo)下 'name': '應(yīng)用全稱', // 將來展示在電腦桌面應(yīng)用圖標(biāo)下 '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' } ], // 桌面圖標(biāo)，是一個(gè)數(shù)組，注意圖片大小和格式 'start_url': 'index.html', // 應(yīng)用啟動(dòng)時(shí)的url 'display': 'standalone', 'background_color': '#080403', 'theme_color': '#080403'}

display字段表示顯示模式，具體參數(shù)及描述如下：

顯示模式 描述 fullscreen 全屏顯示, 所有可用的顯示區(qū)域都被使用, 并且不顯示狀態(tài)欄chrome。 standalone 讓這個(gè)應(yīng)用看起來像一個(gè)獨(dú)立的應(yīng)用程序，包括具有不同的窗口，在應(yīng)用程序啟動(dòng)器中擁有自己的圖標(biāo)等。這個(gè)模式中，用戶代理將移除用于控制導(dǎo)航的UI元素，但是可以包括其他UI元素，例如狀態(tài)欄。 minimal-ui 該應(yīng)用程序?qū)⒖雌饋硐褚粋€(gè)獨(dú)立的應(yīng)用程序，但會(huì)有瀏覽器地址欄， 樣式因?yàn)g覽器而異。 browser 該應(yīng)用程序在傳統(tǒng)的瀏覽器標(biāo)簽或新窗口中打開，具體實(shí)現(xiàn)取決于瀏覽器和平臺(tái)， 這是默認(rèn)的設(shè)置。

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

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

以上就是Vue項(xiàng)目引入PWA的步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue項(xiàng)目引入PWA的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！