PWA 提升WebApp
最后更新于：2022-04-02 03:42:00
[TOC]
> [参考网站](https://www.jianshu.com/p/74ee8695140c)
## Service Worker
demo
```
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/a.js', {scope: '/'})
.then(function (registration) {
// 注册成功
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(function (err) {
// 注册失败:(
console.log('ServiceWorker registration failed: ', err);
});
});
}
```
查看
`chrome://inspect/#service-workers`
注册失败的原因
* 不是 HTTPS 环境，不是 localhost 或 127.0.0.1。
* Service Worker 文件的地址没有写对，需要相对于 origin。
* Service Worker 文件在不同的 origin 下而不是你的 App 的，这是不被允许的。
## 添加到主屏幕
manifest.json
```
{
"short_name": "短名称",
//用于主屏幕显示
"name": "这是一个完整名称",
//用于安装横幅显示
"icon": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "48x48"
}
],
"start_url": "index.html"
}
```
`
`
## 应用添加横幅
> [参考项目](https://github.com/lavas-project/lavas-project.github.io/tree/master/pwa-demo/manifest-demo/add-to-home-screen/delay)
满足条件时,会自动显示,也可配置
';