前言
在传统的 Web 应用中，通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问，或者把网页地址创建到桌面上通过点击，然后在浏览器里打开。
传统模式下，图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和控制。
而目前可以通过 PWA 标准中的特性来完成上面这些功能，使得访问 Web 应用的路径更短、曝光性更大，下面说一下这一块。
安装
安装 Web 应用需要一些前期准备。
安装条件
首先需要在网站下建立 manifest.json 文件，并在页面中引入：
<link rel="manifest" href="./manifest.json" />
且 manifest.json 文件中必须配置如下字段：
{"short_name": "短应用名","name": "长应用名","icons": [{"src": "icons/192.png","sizes": "144x144","type": "image/png"}],"start_url": ".","display": "standalone",
}
要求：
- 运行在 https 环境。
- 必须注册并运行 serviceworker。
- manifest 中必须有
icons，且至少为144x144的PNG图像。 - manifest 中
display设置为standalone或者fullscreen。 - manifest 中必须有
name或者short_name。 - manifest 中必须有
start_url。 - manifest 中
prefer_related_applications未设置或设置为false。
manifest 的详细设置信息，可以参考前面写的 manifest 专题文章。
显示安装提示
按要求配置好后，在浏览器端打开网站。
Android Chrome 端
从 Chrome 68 以后，当满足安装应用的条件时，会立即在浏览器底部弹出 “Mini信息条”，用户单击信息条时，弹出“添加到主屏幕”的对话框，点击“添加”后，完成安装，此时页面上就出现在应用图标。
注意：Chrome 68 - 75 的Mini 信息条是无法通过代码来控制是否展示的，Chrome 76 之后版本支持通过代码控制显示。
当用户点击 Mini 信息条上的 “X” 时，至少三个月浏览器不会再出现 Mini 条的提示，但事件层不受影响，可以通过代码实现。
PC Chrome 端
Chrome 73 开始支持 PC 端安装 Web 到桌面
自定义安装时机
当 Web 应用符合安装时，会触发 beforeinstallprompt 事件，并弹出安装到屏幕的提示，我们可以基于这个事件来控制是否展示安装提示及何时安装。
beforeinstallprompt 事件在此应用未安装的情况下会每次进入页面都触发，如果已安装则不会触发。当用户卸载应用后，则会继续触发此事件。
安装提示事件捕获逻辑：
var installPromptEvent = null;window.addEventListener('beforeinstallprompt', (event) => {event.preventDefault(); // Chrome <= 67 可以阻止显示installPromptEvent = event; // 拿到事件的引用document.querySelector('#btn-install').disabled = false; // 更新安装 UI，通知用户可以安装
});
显示 prompt 对话框
手动显示安装对话框，可以通过调用捕获的 beforeinstallprompt 事件引用中的prompt() 方法来触发。
通过事件 userChoice 属性的 Promise 结果中的 outcome 来获取。
用户点击安装逻辑：
document.querySelector('#btn-install').addEventListener('click', () => {if( !installPromptEvent ) {return;}installPromptEvent.prompt();installPromptEvent.userChoice.then( choiceResult => {if (choiceResult.outcome === 'accepted') {console.log('用户已同意添加到桌面')} else {console.log('用户已取消添加到桌面')}})
})
已安装事件处理
可以通过 appinstalled 来监听应用是否安装：
window.addEventListener('appinstalled', (evt) => {console.log('已安装到桌面屏幕');
});
环境判断
当前应用是通过在浏览器里输入网址打开的，还是通过桌面图标打开的，可以通过 display-mode 属性来判断，然后根据需求设置不同的交互样式。
假设 manifest 中设置的 display 为 standalone
js 层判断：
if (window.matchMedia('(display-mode: standalone)').matches) {console.log('display-mode 是 standalone');
}
css 层判断：
@media all and (display-mode: standalone) {/** 自定义样式 **/
}
Safari 判断：
if (window.navigator.standalone === true) {console.log('display-mode 是 standalone');
}
应用的更新
Web 应用安装到桌面后，对于后面修改 manifest 后的更新问题，目前每个平台的表现不一样。
Android 端
在 Android 上，当启动 Web 应用时，Chrome 会根据实时 manifest 来检查当前安装的 manifest。如果需要更新，则在 wifi 环境下自动进入更新队列。
触发更新规则：
- 更新检查仅在启动 Web 应用时发生。直接启动 Chrome 不会触发给定 Web 应用的更新检查。
- Chrome 会每隔 1 天或每 30 天检查一次更新。每天检查更新大多数时间都会发生。在更新服务器无法提供更新的情况下，它会切换到30天的时间间隔。
- 清除 Chrome 的数据（通过Android设置中的“清除所有数据”）会重置更新计时器。
- 如果 Web Manifest URL 未更改，Chrome 将仅更新 Web 应用。如果你将网页的 manifest 路径修改，如从
/manifest.json更改为/manifest2.json，则 Web 应用将不再更新。（非常不建议这样做） - 只有正式版 Chrome（Stable / Beta / Dev / Canary）创建的 Web 应用才会更新。它不适用于 Chromium（org.chromium.chrome）。
- 更新检查可能会延迟，知道连接可用 wifi。
PC 端
PC 端暂时不支持更新，后续可能会支持。
兼容
目前此特性在各平台的兼容性如下：
像 IOS 下的 Safari 是支持安装到桌面的特性，但并没有走 manifest 的规范。
IOS 上的适配
IOS 针对桌面图标、启动画面、应用文本及主题色需要单独的特性 Meta 进行设置。
apple-touch-icon：应用图标
需要在网页中增加：
<link rel="apple-touch-icon" href="/custom_icon.png">
不同分辨率的适配：
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
apple-touch-startup-image：启动画面
需要在网页中增加：
<link rel="apple-touch-startup-image" href="/launch.png">
apple-mobile-web-app-title：应用 icon 的标题
默认情况下使用 <title></title> 中的值，需要修改的话需要指定 meta。
<meta name="apple-mobile-web-app-title" content="应用标题">
apple-mobile-web-app-status-bar-style：应用状态栏的外观样式
例如设置为黑色：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
兼容适配库
正常来说，所有的特性都要按照规范中的约束来使用，但向上面的 Safari 并没有按照规范来，这样会增加开发者的开发成本。
所以这里做一下适配脚本，只写规范中 manifest 的那些定义部分，剩下的交由脚本来完成。
(function(){function h(){var a=document.head.querySelector('link[rel="manifest"]'),b=a?a.href:"",d=A([b,window.location]);Promise.resolve().then(function(){if(!b)throw'can\'t find <link rel="manifest" href=".." />\'';var a={};"use-credentials"===b.crossOrigin&&(a.credentials="include");return window.fetch(b,a)}).then(function(a){return a.json()}).then(function(a){return B(a,d)}).catch(function(a){return console.warn("pwacompat.js error",a)})}function A(a){for(var b={},d=0;d<a.length;b={c:b.c},++d){b.c=a[d];try{return new URL("",b.c),function(a){return function(b){return(new URL(b,a.c)).toString()}}(b)}catch(n){}}return function(a){return a}}function t(a,b){a=document.createElement(a);for(var d in b)a.setAttribute(d,b[d]);document.head.appendChild(a);return a}function c(a,b){b&&(!0===b&&(b="yes"),t("meta",{name:a,content:b}))}function B(a,b){function d(b,d,f){var k=b.width,c=b.height,e=window.devicePixelRatio;b=u({width:k*e,height:c*e});b.scale(e,e);b.fillStyle=a.background_color||"#f8f9fa";b.fillRect(0,0,k,c);b.translate(k/2,(c-32)/2);b.font="24px HelveticaNeue-CondensedBold";b.fillStyle=r?"white":"black";k=b.measureText(v).width;f&&(c=f.width/e,e=f.height/e,128<e&&(c/=e/128,e=128),48<=c&&48<=e&&(b.drawImage(f,c/-2,e/-2,c,e),b.translate(0,e/2+32)));b.fillText(v,k/-2,0);f=document.createElement("link");f.setAttribute("rel","apple-touch-startup-image");f.setAttribute("media","(orientation: "+d+")");f.setAttribute("href",b.canvas.toDataURL());return f}function n(a){var b=d(window.screen,"portrait",a);a=d({width:window.screen.height,height:window.screen.width},"landscape",a);w.forEach(function(a){return a.remove()});document.head.appendChild(b);document.head.appendChild(a);w.add(b);w.add(a)}var g=a.icons||[];g.sort(function(a,b){return parseInt(b.sizes,10)-parseInt(a.sizes,10)});var x=g.map(function(a){a={rel:"icon",href:b(a.src),sizes:a.sizes};t("link",a);if(p)return a.rel="apple-touch-icon",t("link",a)}),q=a.display;g=-1!==C.indexOf(q);c("mobile-web-app-capable",g);D(a.theme_color||"black");E&&(c("msapplication-starturl",a.start_url||"/"),c("msapplication-TileColor",a.theme_color));document.head.querySelector('[name="theme-color"]')||c("theme-color",a.theme_color);var h=F(a.orientation);c("x5-orientation",h);c("screen-orientation",h);"fullscreen"===q?(c("x5-fullscreen","true"),c("full-screen","yes")):g&&(c("x5-page-mode","app"),c("browsermode","application"));if(p){var r=y(a.background_color||"#f8f9fa"),v=a.name||a.short_name||document.title;(q=G(a.related_applications))&&c("apple-itunes-app","app-id="+q);c("apple-mobile-web-app-capable",g);c("apple-mobile-web-app-title",v);var w=new Set;n(null);if(x.length){var m=x[0],l=new Image;l.crossOrigin="anonymous";l.onload=function(){n(l);if(a.background_color){var b=z(l,a.background_color);null!==b&&(m.href=b,x.slice(1).forEach(function(b){var d=new Image;d.crossOrigin="anonymous";d.onload=function(){var c=z(d,a.background_color,!0);b.href=c};d.src=b.href}))}};l.src=m.href}}}function G(a){var b;(a||[]).filter(function(a){return"itunes"===a.platform}).forEach(function(a){a.id?b=a.id:(a=a.url.match(/id(\d+)/))&&(b=a[1])});return b}function F(a){a=String(a||"");a=a.substr(0,3);return"por"===a?"portrait":"lan"===a?"landscape":""}function D(a){if(p||H){var b=y(a);if(p)c("apple-mobile-web-app-status-bar-style",b?"black":"default");else{try{var d=Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar}catch(n){d=null}null===d?console.debug("UWP no titleBar"):(d.foregroundColor=r(b?"black":"white"),d.backgroundColor=r(a))}}}function r(a){a=m(a);return{r:a[0],g:a[1],b:a[2],a:a[3]}}function m(a){var b=u();b.fillStyle=a;b.fillRect(0,0,1,1);return b.getImageData(0,0,1,1).data}function y(a){a=m(a).map(function(a){a/=255;return.03928>a?a/12.92:Math.pow((a+.055)/1.055,2.4)});return 3<Math.abs(1.05/(.2126*a[0]+.7152*a[1]+.0722*a[2]+.05))}function z(a,b,d){d=void 0===d?!1:d;var c=u(a);c.drawImage(a,0,0);if(!d&&255==c.getImageData(0,0,1,1).data[3])return null;c.globalCompositeOperation="destination-over";c.fillStyle=b;c.fillRect(0,0,a.width,a.height);return c.canvas.toDataURL()}function u(a){a=void 0===a?{width:1,height:1}:a;var b=a.height,c=document.createElement("canvas");c.width=a.width;c.height=b;return c.getContext("2d")}if("fetch"in window){var C=["standalone","fullscreen","minimal-ui"],p=navigator.vendor&&-1!==navigator.vendor.indexOf("Apple"),E=navigator.userAgent&&-1!==navigator.userAgent.indexOf("Edge"),H="undefined"!==typeof Windows;"complete"===document.readyState?h():window.addEventListener("load",h)}})();
调用地址：http://unpkg.alipay.com/pwacompat@2.0.9/pwacompat.min.js。
使用：
<link rel="manifest" href="./manifest.json" />
<script src="http://unpkg.alipay.com/pwacompat@2.0.9/pwacompat.min.js" crossorigin="anonymous"></script>
博客名称：王乐平博客
CSDN博客地址：http://blog.csdn.net/lecepin
![[工具]TS 视频合并工具](https://img-blog.csdnimg.cn/20200419115940646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlY2VwaW4=,size_16,color_FFFFFF,t_70#pic_center)
![[会议分享]2020全球软件大会分享-PWA在项目中的最佳实践](https://img-blog.csdnimg.cn/20200927170726528.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlY2VwaW4=,size_16,color_FFFFFF,t_70#pic_center)
