注: pwa 只能在https环境下才可以使用
1. 使用vue create 项目名称 的可以直接使用 vue add pwa方式添加 pwa功能；参考地址: 参考地址；
2. 使用webpack 创建的vue(不带 vue.config.js )项目或其它项目添加pwa，步骤如下：
(1) 手动创建 manifest.json (内容在文末) 注 manifest.json文件必需放下项目根目录下即: (域名/manifest.json 可以访问到manifest.json文件)
(2) 手动创建 sw.js (内容在文末); 注 sw.js文件必需放下项目根目录下即: (域名/sw.js 可以访问到sw.js文件)
(3) 在index.html 引入 manifest.json和sw.js
引入manifest.json: <link rel="manifest" href="/manifest.json">
引入sw.js:
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log('display-mode is standalone');
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function (registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function (err) {
console.log('ServiceWorker registration failed: ', err);
});
}
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
window.deferredPrompt = e;
});
(4) 在 webpack.prod.conf.js 的 CopyWebpackPlugin 中添加配置(防止打包的时候编译sw.js 和 manifest.json文件)
{
from: path.resolve(__dirname, '/sw.js'),
to: path.join(__dirname, '/dist'),
// ignore: ['.*']
},
{
from: path.resolve(__dirname, '/manifest.json'),
to: path.join(__dirname, '/dist'),
// ignore: ['.*']
}
配置完成，以下是 manifest.json 和 sw.js 的文件内容
manifest.json 文件配置
{ "background_color": "#ffffff",
"categories": [
"关键词1",
"关键词2",
"关键词3",
],
"description": "项目介绍",
"display": "standalone",
"gcm_sender_id": "",
"gcm_user_visible_only": true,
"icons": [ // 必须要要192及以上尺寸的图标
{
"src": "/static/img/pwa/192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"name": "项目名称",
"short_name": "项目名称",
"start_url": "/",
"theme_color": "#ffffff",
"scope": "/"
}
sw.js 文件配置
var cacheName = '项目名称-pwa';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => {
console.log(cache)
cache.addAll(
[
'/',
'./css/*',
'./index.html',
'./img/*',
'./js/*',
'./static/*',
])
}
).then(() => self.skipWaiting())
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
