9个惊人的PWA秘密

IT资讯 2018-08-05 94 次浏览 0 条评论

发现重要提示和技巧,以充分利用Progressive Web Apps。

渐进式网络应用程序(PWA)是响应式网页设计的新前沿,并且越来越受欢迎。 PWA支持从Android上的Chrome开始,现在可用于大多数其他Android浏览器,如Opera,Firefox,Samsung Internet和UCWeb,以及iOS 11.3和Edge for Windows和桌面操作系统Chrome上的iPhone和iPad。

为了帮助您为这些不断增长的受众群体创造良好的用户体验,我们将分享一些重要的技巧和想法。有关更多建议,请查看有关如何创建应用程序的文章。
01. WebAPK vs Android快捷方式

2017年,Chrome为Android用户推出了一项新功能:WebAPK。现在,当您的用户安装您的PWA(如果它符合要求)时,Google Play服务器将动态创建APK(Android套件,本机应用容器)并将其安装在设备中,就像它来自Play商店一样。您的用户无需启用不安全的来源或触摸任何其他设置。

安装PWA后,它将显示在主屏幕,应用程序启动器,设置中以及操作系统中的任何其他一流公民应用程序中,包括有关系统中使用的电池和空间的信息。

如果您的PWA不符合所有要求,则Play服务已关闭,存在连接问题,或者正在使用其他Android浏览器(如Firefox或Samsung Internet),将创建主屏幕的标准快捷方式。该图标将来自Android 8+的浏览器品牌。

WebAPK还提供了一个需要注意的好但危险的功能:PWA将拥有Android操作系统边界内的域和路径。根据Web App Manifest的scope属性,用户收到的每个链接都将转发到您的全屏应用程序,而不是浏览器,这意味着您必须注意所使用的URL。

假设您有一个为移动用户提供服务的PWA,它位于您域的根文件夹中。当通过WebAPK安装应用程序时,整个域现在将由PWA拥有。如果您在/调查中通过Facebook进行调查,或者您在/terms.pdf上通过电子邮件发送给用户的条款和条件,则操作系统将在单击这些链接时打开PWA而不是浏览器。检查您的PWA路由系统是否知道这些URL以及如何提供这些URL以及如果不知道在不同范围的浏览器中打开它们,这一点至关重要。
02.创建自定义Web应用程序安装横幅

我们无法自定义浏览器的Web应用程序安装

横幅,但我们可以在向用户显示更多信息后将其推迟

我们无法自定义浏览器的Web应用程序安装横幅,但我们可以在向用户显示更多信息后将其推迟

如果满足某些条件,多个浏览器会邀请用户安装您的PWA,包括该用户对您的PWA的重复访问。目前,横幅广告中没有包含足够的信息来说明用户应该接受的原因。但是,我们可以使用事件来避开横幅,更重要的是,可以将其推迟用于更有可能产生接受的内容,例如安装图标。

第一步是取消横幅的外观并保存事件对象以供以后使用:

//事件对象的全局变量
var installPromptEvent;
window.addEventListener('beforeinstallprompt',function(event){
event.preventDefault();
installPromptEvent = event;
});

下一步是提供用户界面来解释安装的优点或安装按钮。该用户界面将调用我们的下一个函数:

function callInstallPrompt(){
//在阻止默认浏览器对话框之前,我们无法触发对话框
if(installPromptEvent!== undefined){
installPromptEvent.prompt();
}
}

03.分享您PWA的内容

在兼容的浏览器上,Web Share API将从操作系统触发众所周知的共享对话框

当您的PWA处于全屏模式时,浏览器中没有URL栏或共享操作,用户可以与社交网络共享内容。我们可以利用Web Share API并开始回退以打开本机社交应用程序。

function share(){
var text ='添加要与URL共享的文本';
if(导航器中的'share'){
navigator.share({
title:document.title,
文字:文字,
url:location.href,
})
} else {
//这里我们使用WhatsApp API作为后备;记得为URI编码你的文本
location.href ='https://api.whatsapp.com/send?text='+ encodeURIComponent(text +' - ')+ location.href
}
}
04.分析跟踪

当您拥有PWA时,您将希望跟踪尽可能多的事件,所以让我们来看看我们当前可以测量的所有事件。您可以使用Google AnalyticsAPI或任何其他分析工具稍后跟踪这些事件。

window.addEventListener('appinstalled',function(event){//跟踪事件:已安装应用程序(横幅或手动安装)
});
window.addEventListener('beforeinstallprompt',function(event){
//跟踪事件:Web应用横幅已出现
event.userChoice.then(function(result){
if(result.outcome ==='accepted'){
//跟踪事件:已接受Web应用程序横幅
} else {
//跟踪事件:Web应用横幅被解雇
}
});
});

下一个重要的跟踪事件是用户从主屏幕打开应用程序。这意味着用户点击了应用程序的图标,或者在具有WebAPK支持的Android上,也点击了指向PWA范围的链接。

最简单的方法是通过manifest的start_url属性,在URL中添加一个跟踪事件,该事件可以自动用作Analytics脚本的来源,例如:

start_url:'/?utm_source = standalone&utm_medium = pwa'

此外,以下脚本为我们留下了一个布尔值,说明用户当前是在浏览器中(true)还是独立应用程序模式(false):

var isPWAinBrowser = true;
//根据您的清单用fullscreen或minimal-ui替换standalone
if(matchMedia('(display-mode:standalone)')。matches){
// Android和iOS 11.3+
isPWAinBrowser = false;
} else if(导航器中的'standalone'){
//对iOS <11.3有用
isPWAinBrowser =!navigator.standalone;
}

然后,如果使用推送通知,则可以跟踪服务工作者中的多个事件,例如:

self.addEventListener('push',function(e){
//跟踪事件:推送已接收的消息
});
self.addEventListener('notificationclick',function(e){
//跟踪事件:推送消息单击,您可以阅读e.action.id来跟踪操作
});
self.addEventListener('notificationclose',function(e){
//跟踪事件:推送消息已解除
});

05.创建兼容的iOS PWA

在iOS上执行PWA时,请务必检查状态栏定义,这将创建不同的状态栏体验

 

虽然许多人认为PWA支持即将在iOS 11.3上首次登陆,但事实是,这个概念 - 尽管名称不同 - 是史蒂夫·乔布斯十多年前在WWDC 07上提出的。这就是iOS支持主屏幕的原因和遗留应用程序一段时间,使用传统技术。但是从iOS 11.3开始,它将开始支持与Android相同的规格。

现在,即使您没有选择加入iOS,您的PWA也将具备脱机功能并可在iOS上安装。了解可能影响您在iOS上的PWA用户体验的一些差异非常重要:

iOS上的图标必须是正方形且不透明,以避免UI问题。请勿使用Android上的相同图标。使用120x120和180x180的iPhone。
如果您有SPA或链接到示波器上的其他页面,请注意导航,因为如果您不在UI中提供导航链接,iOS用户无法返回或转发。滑动手势不适用于全屏PWA。
从iOS 11.3的第一个版本开始,操作系统会在每次访问应用程序时重新加载PWA,因此如果用户需要退出应用程序以便稍后返回(例如,对于双向身份验证过程),请记住应用程序默认从头开始。

06.在后台同步数据

服务工作者与PWA窗口或浏览器选项卡具有单独的生命周期。这就是为什么即使在用户关闭PWA之后您也可以在后台进行网络操作的原因。如果存在待处理操作且此时没有可用的网络访问,则引擎将允许我们在后台处理,如果稍后检测到连接。

Background Sync API目前仅在某些浏览器上可用,因此您必须提供后备。这个想法是你的PWA将设置一个带有字符串标记的标志,说明它需要进行后台同步操作。

navigator.serviceWorker.ready.then(function(reg){
reg.sync.register( 'myTag')
});

然后,在ServiceWorker上我们监听事件,如果它是标签,我们期望我们返回一个承诺。如果履行了承诺,则操作被标记为已完成。如果没有,它会在后面继续尝试。

self.addEventListener('sync',function(event){
if(event.tag ==='myTag'){
event.waitUntil(doAsyncOperationForMyTag());
}
});
07.社交网络和伪浏览器

如果您的用户在社交网络上共享您的PWA内容,或者他们使用伪浏览器(没有自己的引擎但使用Web视图的浏览器),您需要了解一些问题。

例如,Facebook在Android和iOS应用程序中使用WebView,在用户点击链接时提供应用内浏览体验。在Android上,大多数WebView不支持服务工作者,也无法安装您的PWA,因此当用户从Facebook打开您的内容时,您的PWA将表现为不兼容的浏览器,没有任何缓存文件或会话详细信息。

从iOS 11.3开始,WebView将支持服务工作者,但它将是用户在Safari中甚至在其他伪浏览器中使用的相同PWA的克隆,例如iOS上的Chrome或Firefox。

因此,如果要呈现安装横幅或安装提示对话框,说明安装应用程序的价值,请检查您是否在WebView中,因为用户将无法按照您的步骤操作。隐藏该信息或邀请用户在默认浏览器中打开URL。这适用于Android上的Facebook,iOS上的Facebook,iOS上的Chrome和iOS上的Firefox以及其他应用程序。如果您使用WebView进行实时检查是棘手的,但有一个帮助工具可用。
08.在Android设备和模拟器上测试

测试服务工作者和Web App Manifest需要https,localhost除外。虽然本地桌面测试最初很好,但有一点我们希望在Android设备上看到我们的PWA。我们怎么能这样做?从我们的手机或Android模拟器访问开发服务器将无法正常工作,因为它不是https,从Android操作系统的角度来看,它不是本地主机。

解决方案随Chrome Developer Tools一起出现。如果我们转到chrome://检查并打开连接了USB调试的仿真器或真实设备,我们将能够启用端口转发。然后我们的Android设备上的http:// localhost将被转发到我们的主机的localhost或任何其他主机。有了这个技巧,Android将通过非安全连接正确呈现PWA。但请记住,虽然WebAPK将创建程序包并进行安装,但它可能无法在独立模式下运行。
09.出版商店

PWA Builder是Microsoft在线工具,用于为Windows 10和其他操作系统创建与存储兼容的PWA包

尽管PWA方法并未从商店开始,但Play商店中的一些产品(包括Twitter Lite和Google Maps Go)开始在商店中提供PWA服务。如果这是您感兴趣的事情,要分发您的PWA而不用Cordova打包,您可以选择的选项是:

Microsoft Store:您可以使用pwabuilder.com上的官方工具为Windows 10创建PWA
Google Play商店:在撰写本文时,Canary Channel上提供的受信任的Web活动可让您创建一个Android应用,只需打开您拥有的PWA并将其分发到商店,从而为WebAPK创建类似的解决方案。你可以在这里了解更多。
Apple App Store:目前没有正式的分发PWA的解决方案,但WKWebView将支持iOS 11.3的服务工作者,因此为PWA创建一个简单的包装器并不困难。问题是,Apple会在商店批准吗? Apple不希望解决方案只是带有包装器的网站。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论