[TOC] > [参考网站](https://www.jianshu.com/p/74ee8695140c) ## 概述 PWA是渐进式 Web 应用 可以通过安装应用使得它在离线的状态下也可以运行 ## 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" } ``` `<link rel="manifest" href="path-to-manifest/manifest.json"> ` ## 应用添加横幅 > [参考项目](https://github.com/lavas-project/lavas-project.github.io/tree/master/pwa-demo/manifest-demo/add-to-home-screen/delay) 满足条件时,会自动显示,也可配置