总结起来,网站配置PWA简单步骤为:
1.编写 manifest.json;
2.编写 serviceWorker.js;
3.在 index.html 引入上述两个文件;
4.把上述三个文件放在网站根目录(或者同一目录下);
5.网站需要部署在https环境才能触发;
manifest.js 是用来定义名称、icon等信息的;
{"name": "完整名称", // 用于安装横幅、启动画面显示"short_name": "名称缩写", // 不为空时,桌面icon的名称优先为short_name"theme_color": "#f85758", // 主题色"background_color": "#f85758", // 背景色"display": "fullscreen", // 启动过渡动画, standalone或fullscreen"scope": "/","start_url": "/", //启动页面,如果首页是https://www.abc.com/,则直接用“/”即可。"icons": [{"src": "logo72x72.png","type": "image/png","sizes": "72x72"},{"src": "logo96x96.png","type": "image/png","sizes": "96x96"},{"src": "logo144x144.png","type": "image/png","sizes": "144x144"}]
}
完整名称,用于安装横幅、启动画面显示
名称缩写,用于显示桌面Icon名称;不为空时,桌面icon的名称优先为short_name
主题色,指定 PWA 的主题颜色;通过该属性来控制浏览器 UI 的颜色。比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色,会被 theme_color 所影响。
注:在指定了 theme_color 的值之后,地址栏依然呈白色。针对这种情况,可以在页面 HTML 里设置 name 为 theme-color 的 meta 标签,例如:,这个标签的色值会覆盖 manifest.json 里设置的 theme_color;