跳到主要内容

9个惊人的PWA秘密

渐进式Web应用程序(PWAs)是一个新的前沿响应式网页设计,而且它们越来越受欢迎。 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 OS边界内的域和路径。根据Web App Manifest的scope属性,用户收到的每个链接都将转发到您的全屏应用程序,而不是浏览器,这意味着您必须注意所使用的URL。

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

02.创建自定义Web应用程序安装横幅

We can't customise a browser's web app installation banner, but we can defer them after we show more information to the user

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

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

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

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

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

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

03.分享您PWA的内容

On compatible browsers, the Web Share API will trigger the well-known share dialog from the operating system

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

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

function share(){var text ='添加要与URL共享的文本'; if(导航器中的'share'){navigator.share({title:document.title,text:text,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应用程序横幅}其他{//跟踪事件:Web应用程序横幅已被关闭}});});

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

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

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

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

var isPWAinBrowser = true; //根据你的清单替换standalone with fullscreen或minimal-ui(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){// Track event:Push Message Received}); self.addEventListener('notificationclick',function(e){// Track事件:Push Message Clicked,你可以阅读e.action.id来跟踪动作}); self.addEventListener('notificationclose',function(e){// Track event:Push Message Dismissed});

05.创建兼容的iOS PWA

When doing PWAs on iOS, always make sure you check your status bar definition, which will create different status bar experiences

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

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

如果您仍想在iOS 11.3之前提供安装体验,则需要添加元标记或使用此作者在https://github.com/firtman/iWAM上创建的polyfill

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

  1. iOS上的图标必须是正方形且不透明,以避免UI问题。请勿使用Android上的相同图标。使用120x120和180x180的iPhone。
  2. 如果您有SPA或链接到示波器上的其他页面,请注意导航,因为如果您不在UI中提供导航链接,iOS用户无法返回或转发。滑动手势不适用于全屏PWA。
  3. 从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 is a Microsoft online tool to create store-compatible PWA packages for Windows 10 and other operating systems

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

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

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

本文最初发表于304期,这是全球最畅销的网页设计师和开发者杂志。在这里购买问题304要么订阅这里

相关文章:



翻译字数超限