客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
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字段表示显示模式，具体参数及描述如下：
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的资料请关注极客世界其它相关文章！ |
请发表评论