跳到主要内容

如何构建渐进式Web应用程序

移动设备现在占网络流量的一半以上,网络应用程序使用户能够在浏览器中与本机应用程序相媲美,但存在一个问题:连接和设备的质量在世界各地都有很大差异。

在首尔以快速连接方式为用户提供服务,在过时的手机上为印度农村地区的用户提供服务是最新的可用性挑战,而Progressive Web Apps就是解决方案。

PWA使用渐进增强功能首先加载最重要的内容,然后根据需要添加表示和功能附加功能,这意味着所有用户都可以尽快获得相同的核心体验。如果您想要尽可能广泛的受众,PWA是您的最佳选择。

虽然Progressive Web Apps为Web带来了许多好处和功能,但它们不需要重写整个应用程序。任何应用都可以通过添加一些额外的图层转换为PWA。

为了获得最佳效果,您需要从一开始就强调性能 - 但任何Web应用都是如此。在这里,我们将逐步介绍使您的应用程序渐进的步骤。

01.通过HTTPS服务

老实说:无论如何你应该这样做。 SSL为网络添加了额外的安全保护,帮助您的用户在使用您的网站时感到安全。使用PWA,HTTPS对于使用服务工作者和允许主屏幕安装至关重要。您可以从您的域名注册商处以较低的费用购买SSL证书,然后通过您的托管服务进行配置。

02.创建一个应用程序shell

您的应用程序shell是第一个加载的东西 - 用户看到的第一件事。它应该完全存在于您的索引HTML文档中,使用内联CSS,以确保它尽可能快地显示,并且您的用户不会盯着白屏超过必要的时间。应用程序shell构成渐进增强模式的一部分。您的应用应尽快为用户提供内容,然后随着更多数据(可能是JavaScript)加载而逐步增强。

以下示例来自React.js应用程序。向用户显示应用程序的大纲和index.html中的加载指示符。然后,一旦JavaScript加载并且React启动,整个应用程序就会在shell中呈现。

商标
// index.js ReactDOM.render( ,document.getElementById('root'));

03.注册服务人员

要充分利用PWA的各种好东西(推送通知,缓存,安装提示),您将需要一名服务工作者。

幸运的是,它们很容易设置。下面,我们首先检查用户的浏览器是否支持服务工作者。然后,如果是这样,我们可以继续注册服务工作文件,这里称为服务worker.js。请注意,此时您不需要该文件中的任何特殊内容 - 它可以为空白。

但是,在下面的示例中,我们将展示如何利用三个关键服务工作者生命周期事件。当用户首次访问您的网页时,这些是“安装”;在注册完成之前'激活';和'fetch',当应用程序发出网络请求时。最后一个与缓存和脱机功能相关。

 // service-worker.js self.addEventListener('install',function(){console.log('Install!');}); self.addEventListener(“activate”,event => {console.log('Activate!');}); self.addEventListener('fetch',function(event){console.log('Fetch!',event.request);});

04.添加推送通知

服务工作者允许您的用户通过Web Push API接收推送通知。要访问它,您可以使用Self.registration.pushManager来自您的服务工作者文件。由于推送通知的发送在很大程度上依赖于您的后端设置,因此我们不会在此处深入了解。

如果您从头开始使用应用,Google的Firebase服务会附带Firebase云消息传递,以实现相对轻松的推送通知。下面的代码显示了如何通过Push API注册推送通知。

navigator.serviceWorker.ready.then(function(registration){if(!registration.pushManager){alert('No push notifications support。'); return false;} //从推送管理器registration.pushManager订阅`push notification` .subscribe({userVisibleOnly:true //收到通知时始终显示}} .then(function(subscription){console.log('Subscribed。');}).catch(function(error){console.log('Subscription错误:',错误);});})

05.添加Web应用程序清单

为了使您的应用程序可安装,您需要包含一个的manifest.json在应用程序的根目录中。您可以将此视为对应用程序的描述,类似于您可能提交给App Store的内容。它包括图标,启动画面,名称和描述。

从用户主屏幕启动应用程序时,还有一些配置可用于显示:您是否要在浏览器中显示地址栏?您想要状态栏的颜色是什么颜色?等等。注意一个合适的的manifest.json应包括各种设备的全方位图标大小。下面的代码是您的清单可以包含的一些属性的预览。

{
  "short_name": "Chat",
  "name": "Chat",
  "icons": [
  {
  "src":"/assets/icon.png",
  "sizes": "192x192",
  "type": "image/png"
  }
  ],
  "start_url": "/?utm_source=homescreen",
  "background_color": "#e05a47",
  "theme_color": "#e05a47",
  "display": "standalone"
}

06.配置安装提示

当用户使用服务工作者和清单访问PWA时,Chrome会自动提示他们将其安装到主屏幕,具体如下:用户必须访问该网站两次,访问间隔五分钟。

这里的想法是等到用户对你的应用程序表现出兴趣,然后让他们把它作为他们设备的固定装置(这与本机app方法形成鲜明对比,后者要求预先投资)。

但是,在某些情况下,您可能希望在不同情况下显示安装提示,例如在用户执行特定有用操作之后。为此,我们拦截了Beforeinstallprompt事件并保存以供日后使用,然后在我们认为合适时部署提示。

window.addEventListener('beforeinstallprompt',e => {console.log('beforeinstallprompt Event fired'); e.preventDefault(); //存储事件以便以后触发.this.deferredPrompt = e; return false; }); //当你想要触发提示时:this.deferredPrompt.prompt(); this.deferredPrompt.userChoice.then(choice => {console.log(choice);}); this.deferredPrompt = null;

07.分析您的应用程序的性能

性能是PWA的核心和灵魂。在所有网络条件下,您的应用应该快速为用户所用。缓存和脱机功能有很大帮助,但最终,即使用户没有支持服务工作者技术的浏览器,您的应用程序也应该快速。这是渐进增强的定义 - 为每个人提供良好的体验,无论设备的现代性或网络条件如何。

为此,一组有用的指标是RAIL系统。 RAIL是谷歌所谓的“以用户为中心的性能模型” - 一套衡量我们应用程序性能的指南。

首字母缩略词代表响应(应用程序响应用户操作所需的时间),动画(保持动画速度为60fps),空闲(使用时间,当您的应用程序没有执行任何其他操作来加载和缓存其他资产时)和加载(在一秒或更短时间内加载您的应用)。

这是一个有意义的应用程序加载基准测试表,由Meggin Kearney,技术作家提供Google Web Fundamentals

单击右上角的图标可放大图像

08.用Lighthouse审核你的应用程序

谷歌是推动Progressive Web Apps成为网络未来的最大赢家。因此,它为指导PWA开发提供了有用的工具。

以前称为Lighthouse并作为Chrome扩展程序提供,从Chrome 60开始,它是Chrome AudTools的一部分,位于“审核”标签下。 Lighthouse所做的是在不同条件下运行您的应用程序,并根据PWA指南衡量其响应和成功。然后它会给出100分的分数。它还可以同时为网络最佳实践评分您的应用程序。

以下文本是Lighthouse测量值的列表。在使用中也显示说明。

  • 注册服务工作者
  • 离线时响应200
  • 当JavaScript不可用时包含一些内容
  • 使用HTTPS
  • 将HTTP流量重定向到HTTPS
  • 3G上的页面加载速度足够快
  • 可以提示用户安装Web App
  • 配置为自定义初始屏幕
  • 地址栏与品牌颜色相匹配
  • 有个标记宽度要么初始规模
  • 内容的大小适合视口

本文最初出现在Web Designer中;订阅这里

相关文章:



翻译字数超限