上海网站建设网站优化app,jsp做购物网站技术可行性,wordpress博客置顶,焦作建设网站的公司前言
在传统的 Web 应用中#xff0c;通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问#xff0c;或者把网页地址创建到桌面上通过点击#xff0c;然后在浏览器里打开。
传统模式下#xff0c;图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和…前言
在传统的 Web 应用中通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问或者把网页地址创建到桌面上通过点击然后在浏览器里打开。
传统模式下图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和控制。
而目前可以通过 PWA 标准中的特性来完成上面这些功能使得访问 Web 应用的路径更短、曝光性更大下面说一下这一块。 安装
安装 Web 应用需要一些前期准备。
安装条件
首先需要在网站下建立 manifest.json 文件并在页面中引入
link relmanifest 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 应用将不再更新。非常不建议这样做只有正式版 ChromeStable / Beta / Dev / Canary创建的 Web 应用才会更新。它不适用于 Chromiumorg.chromium.chrome。更新检查可能会延迟知道连接可用 wifi。
PC 端
PC 端暂时不支持更新后续可能会支持。 兼容
目前此特性在各平台的兼容性如下 像 IOS 下的 Safari 是支持安装到桌面的特性但并没有走 manifest 的规范。
IOS 上的适配
IOS 针对桌面图标、启动画面、应用文本及主题色需要单独的特性 Meta 进行设置。
apple-touch-icon应用图标
需要在网页中增加
link relapple-touch-icon href/custom_icon.png不同分辨率的适配
link relapple-touch-icon hreftouch-icon-iphone.png
link relapple-touch-icon sizes152x152 hreftouch-icon-ipad.png
link relapple-touch-icon sizes180x180 hreftouch-icon-iphone-retina.png
link relapple-touch-icon sizes167x167 hreftouch-icon-ipad-retina.pngapple-touch-startup-image启动画面
需要在网页中增加
link relapple-touch-startup-image href/launch.pngapple-mobile-web-app-title应用 icon 的标题
默认情况下使用 title/title 中的值需要修改的话需要指定 meta。
meta nameapple-mobile-web-app-title content应用标题apple-mobile-web-app-status-bar-style应用状态栏的外观样式
例如设置为黑色
meta nameapple-mobile-web-app-status-bar-style contentblack兼容适配库
正常来说所有的特性都要按照规范中的约束来使用但向上面的 Safari 并没有按照规范来这样会增加开发者的开发成本。
所以这里做一下适配脚本只写规范中 manifest 的那些定义部分剩下的交由脚本来完成。
(function(){function h(){var adocument.head.querySelector(link[relmanifest]),ba?a.href:,dA([b,window.location]);Promise.resolve().then(function(){if(!b)throwcan\t find link relmanifest href.. /\;var a{};use-credentialsb.crossOrigin(a.credentialsinclude);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{},d0;da.length;b{c:b.c},d){b.ca[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){adocument.createElement(a);for(var d in b)a.setAttribute(d,b[d]);document.head.appendChild(a);return a}function c(a,b){b(!0b(byes),t(meta,{name:a,content:b}))}function B(a,b){function d(b,d,f){var kb.width,cb.height,ewindow.devicePixelRatio;bu({width:k*e,height:c*e});b.scale(e,e);b.fillStylea.background_color||#f8f9fa;b.fillRect(0,0,k,c);b.translate(k/2,(c-32)/2);b.font24px HelveticaNeue-CondensedBold;b.fillStyler?white:black;kb.measureText(v).width;f(cf.width/e,ef.height/e,128e(c/e/128,e128),48c48e(b.drawImage(f,c/-2,e/-2,c,e),b.translate(0,e/232)));b.fillText(v,k/-2,0);fdocument.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 bd(window.screen,portrait,a);ad({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 ga.icons||[];g.sort(function(a,b){return parseInt(b.sizes,10)-parseInt(a.sizes,10)});var xg.map(function(a){a{rel:icon,href:b(a.src),sizes:a.sizes};t(link,a);if(p)return a.relapple-touch-icon,t(link,a)}),qa.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([nametheme-color])||c(theme-color,a.theme_color);var hF(a.orientation);c(x5-orientation,h);c(screen-orientation,h);fullscreenq?(c(x5-fullscreen,true),c(full-screen,yes)):g(c(x5-page-mode,app),c(browsermode,application));if(p){var ry(a.background_color||#f8f9fa),va.name||a.short_name||document.title;(qG(a.related_applications))c(apple-itunes-app,app-idq);c(apple-mobile-web-app-capable,g);c(apple-mobile-web-app-title,v);var wnew Set;n(null);if(x.length){var mx[0],lnew Image;l.crossOriginanonymous;l.onloadfunction(){n(l);if(a.background_color){var bz(l,a.background_color);null!b(m.hrefb,x.slice(1).forEach(function(b){var dnew Image;d.crossOriginanonymous;d.onloadfunction(){var cz(d,a.background_color,!0);b.hrefc};d.srcb.href}))}};l.srcm.href}}}function G(a){var b;(a||[]).filter(function(a){returnitunesa.platform}).forEach(function(a){a.id?ba.id:(aa.url.match(/id(\d)/))(ba[1])});return b}function F(a){aString(a||);aa.substr(0,3);returnpora?portrait:lana?landscape:}function D(a){if(p||H){var by(a);if(p)c(apple-mobile-web-app-status-bar-style,b?black:default);else{try{var dWindows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar}catch(n){dnull}nulld?console.debug(UWP no titleBar):(d.foregroundColorr(b?black:white),d.backgroundColorr(a))}}}function r(a){am(a);return{r:a[0],g:a[1],b:a[2],a:a[3]}}function m(a){var bu();b.fillStylea;b.fillRect(0,0,1,1);return b.getImageData(0,0,1,1).data}function y(a){am(a).map(function(a){a/255;return.03928a?a/12.92:Math.pow((a.055)/1.055,2.4)});return 3Math.abs(1.05/(.2126*a[0].7152*a[1].0722*a[2].05))}function z(a,b,d){dvoid 0d?!1:d;var cu(a);c.drawImage(a,0,0);if(!d255c.getImageData(0,0,1,1).data[3])return null;c.globalCompositeOperationdestination-over;c.fillStyleb;c.fillRect(0,0,a.width,a.height);return c.canvas.toDataURL()}function u(a){avoid 0a?{width:1,height:1}:a;var ba.height,cdocument.createElement(canvas);c.widtha.width;c.heightb;return c.getContext(2d)}if(fetchin window){var C[standalone,fullscreen,minimal-ui],pnavigator.vendor-1!navigator.vendor.indexOf(Apple),Enavigator.userAgent-1!navigator.userAgent.indexOf(Edge),Hundefined!typeof Windows;completedocument.readyState?h():window.addEventListener(load,h)}})();调用地址http://unpkg.alipay.com/pwacompat2.0.9/pwacompat.min.js。
使用
link relmanifest href./manifest.json /
script srchttp://unpkg.alipay.com/pwacompat2.0.9/pwacompat.min.js crossoriginanonymous/script博客名称王乐平博客 CSDN博客地址http://blog.csdn.net/lecepin
