Vue項目引入PWA的步驟
更新時間：2021年04月29日 09:49:33 作者：大海愛奔跑
這篇文章主要介紹了Vue項目引入PWA的步驟，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下
Vue項目引入PWA很簡單，操作步驟如下：
1. 安裝依賴
vue add @vue/pwa
由于使用add關(guān)鍵字，安裝成功后會在項目中創(chuàng)建一些文件，如果項目使用了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內(nèi)容如下：
{
"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"
}
], // 桌面圖標，是一個數(shù)組，注意圖片大小和格式
"start_url": "index.html", // 應用啟動時的url
"display": "standalone",
"background_color": "#080403",
"theme_color": "#080403"
}
display字段表示顯示模式，具體參數(shù)及描述如下：
| 顯示模式 | 描述 |
| fullscreen | 全屏顯示, 所有可用的顯示區(qū)域都被使用, 并且不顯示狀態(tài)欄chrome。 |
| standalone | 讓這個應用看起來像一個獨立的應用程序，包括具有不同的窗口，在應用程序啟動器中擁有自己的圖標等。這個模式中，用戶代理將移除用于控制導航的UI元素，但是可以包括其他UI元素，例如狀態(tài)欄。 |
| minimal-ui | 該應用程序?qū)⒖雌饋硐褚粋€獨立的應用程序，但會有瀏覽器地址欄， 樣式因瀏覽器而異。 |
| browser | 該應用程序在傳統(tǒng)的瀏覽器標簽或新窗口中打開，具體實現(xiàn)取決于瀏覽器和平臺， 這是默認的設置。 |
4. 在index.html文件中添加如下代碼：
<meta name="theme-color" content="#080403"> <link rel="manifest" href="manifest.json" rel="external nofollow" >
接下來就是見證奇跡的時刻，執(zhí)行npm run build，查看dist下的index.html文件中是否引入了manifest.json文件，再看看相應的配置有沒有生成，如果有，恭喜你，第一個pwa項目完成了！
以上就是Vue項目引入PWA的步驟的詳細內(nèi)容，更多關(guān)于Vue項目引入PWA的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
相關(guān)文章
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vue3實現(xiàn)H5表單驗證組件的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家介紹了Vue3中的computed和watch源碼解讀分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
基于Electron24+Vite4+Vue3搭建桌面端應用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應用,這次給大家主要分享的是基于electron最新版本整合vite4.x構(gòu)建vue3桌面端應用程序，需要的朋友可以參考下2023-05-05
本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue報錯"vue-cli-service‘不是內(nèi)部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報錯"vue-cli-service‘不是內(nèi)部或外部命令，也不是...”的解決辦法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了關(guān)于vant折疊面板默認展開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了element-ui之解決select無法回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了實現(xiàn)一個Vue版Upload組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08