【教程】三分钟让你的网站支持PWA
什么是PWA？
PWA是个处于app与网页之间的一种东西，有些类似微信小程序，但是它的出生时间比小程序早而且更加的开放。
这里就不再多赘述，更加详细的信息就引用一下 微软对PWA的概述>>，有兴趣的可以更深入的了解
开始
要想网站支持PWA那么必须得支持https。如果没有https的话下面就不用看了
必备文件
manifest.json //配置文件
sw.js //service worker javascript
两个图标 //一个192px*192px，一个512px*512px
新建 manifest.json 文件，填入内容可参考下面样式
{
"name": "葭兴Jaxing.cc",
"short_name": "葭兴",
"description": "葭兴Jaxing.cc",
"icons": [
{
"src": "https://api.jaxing.cc/file/logo192.png", // 图标资源路径
"sizes": "any",
"type": "image/png",
"purpose": "any"
},
{
"src": "https://api.jaxing.cc/file/logo512.png", //图标资源路径
"sizes": "512x512",
"type": "image/png"
}
],
"background_color": "#FFE8E7",
"theme_color": "#FFE8E7",
"display": "fullscreen",
"orientation": "portrait",
"start_url": "/",
"scope": "/"
}新建 sw.js 文件，填入内容可参考下面样式
// cache名,
const cacheName = "cache";
// cache文件
const cacheFiles = ["/"];
/**
* 安装 Service Worker
* install事件是 Service Worker 执行的第一个事件，同一个 Service Worker 只会调用一次
* 即使 Service Worker 脚本文件只有一个字节不同，浏览器也将视为一个新的 Service Worker
*/
self.addEventListener("install", e => {
e.waitUntil(
caches.open(cacheName)
.then(cache => {
return cache.addAll(cacheFiles);
}),
);
});
/**
* 激活 Service Worker
* Service Worker 安装成功之后,会触发activate事件
* 在这个阶段我们一般做一些清理旧缓存相关的工作
*/
self.addEventListener("activate", (e) => {
// e.waitUntil(caches.delete(cacheName));
e.waitUntil(
caches
.keys()
.then((keys) => {
return Promise.all(
keys.map((key) => {
// 清理缓存
if (cacheName !== key) {
return caches.delete(key);
}
})
);
})
.then(() => {
console.log("cache deleted");
})
);
});
self.addEventListener("fetch", event => {
event.respondWith(
caches
.open(cacheName)
.then(cache => cache.match(event.request, { ignoreSearch: true }))
.then(response => {
return response || fetch(event.request);
}),
);
});然后把这两个文件放在网站根目录下即可，然后再在<head>标签内添加下面内容以声明配置文件
<link rel="manifest" href="manifest.json" />
然后再添加以下脚本激活sw服务
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("sw.js")
.then(res => console.log("service worker registered"))
.catch(err => console.log("service worker not registered", err));
})
}
</script>再添加下面内容提示用户启用PWA
<script>
var deferredPrompt = null;
// 判断用户是否安装此应用：beforeinstallprompt,如果用户已经安装过了,那么该事件不会再次触发
// 需要卸载，然后重新打开浏览器才能再次触发
window.addEventListener("beforeinstallprompt", e => {
e.preventDefault();
deferredPrompt = e;
});
// 安装完成后触发,即点击安装弹窗中的“安装”后被触发
window.addEventListener("appinstalled", () => {
deferredPrompt = null;
});
</script>至此就PWA基本部署完毕，用chrome内核的浏览器即可触发PWA安装提示
ps:本站已支持PWA了哟
