PWA路演的一天:雅加达

这是我第一次参加与Web开发相关的活动。 我知道渐进式Web应用程序(PWA)已经存在了一段时间,但是为什么Google决定对其进行路演? 这无疑激发了我的兴趣,以了解PWA的优点,尤其是有可能取代移动应用程序。 然后,我在D日休假并参加了活动。 我担心由于致命的高峰时间,笔记本电脑会在火车上被压坏,但是还可以。

会议从Robert Nyman开始,介绍了PWA本身。 PWA试图通过添加一些类似于本机的功能为Web应用程序注入生命,以便它们具有更好的用户体验。 为了实现这一点,开发人员需要专注于以下四点:

  • 快速 :只需重新加载/获取必要的更新数据,而无需再次获取整个页面。 不过,这仅在第二次加载时有效,我们仍然需要下载本机应用程序之类的所有内容,但用户不会注意到它,因为它只是发生….. nah,Service Workers发挥了魔力,但仍然如此。
  • 集成的 :感觉就像本机应用程序,不需要一直打开浏览器。 快捷方式图标与其他本地应用程序一起存在
  • 可靠 :没有恐龙! (我为此感到难过)。 我们可以像本地应用一样显示一些离线页面
  • 参与 :网络推送通知的行为类似于电话上的任何本机通知

一位发言者提到可以将其缩短为FIRE,因此PWA处于启用状态🔥

为了PWA验证现有的Web项目,我们可以从头开始重建它,使用核心功能制作最简单的版本,或者一次转换一个功能。 这不应破坏项目的依赖性。

接下来是以综合经验为主要主题的小坂麻里子(Mariko Kosaka)。 这些内容涵盖了创建集成体验(duh!)的技术内容,例如将Web应用添加到带有图标和标签的主屏幕,自定义启动屏幕以及启动Web应用时的启动选项。 用户不太可能注意到本机应用程序和Web应用程序之间的差异。

她还介绍了有关Web支付的主题。 此部分说明了除非您是该站点上的注册用户,否则当今的付款过程多么痛苦而缓慢。 作为客人退房将意味着您需要付出更多的精力来填写表格。 通过使用PaymentRequest API(不,这不是新的付款方式或网关),有效载荷将被标准化,并使用户更容易填写所需的任何付款和运输信息。 当然,这意味着更多的钱来了。

第三,我们有Pete LePage的可靠经验 (他是一个有趣而充满活力的家伙XD)。 我刚刚了解到,世界上大多数地区仍然停留在2G连接上。 我们不能期望用户总是重新加载/获取所有东西并增加账单。 这就是服务人员发挥魔力的地方。 它可以缓存几乎所有内容,用户只需要加载更新的数据即可。 它还可以通知用户其连接处于脱机状态,并在chrome浏览器中显示“您处于脱机状态”页面的缓存版本,而不是恐龙。

不可靠的恐龙。 如果显示,则表明您的网站不可靠。

就像在天气应用程序示例中一样 ,每个资产都被缓存。 用户只需要从JSON格式的API中加载更新的天气数据即可。 除非您进行了更改,否则不会重新加载图像,也不会重新加载单个HTML CSS文件。

最好的事情是:您可以控制服务人员的行为。 您可以对其进行自定义以满足您的需求。 还有一个选项可以开始使用现有的SW库(例如Workbox)开始

然后我们一起拍照。 我们所有人 是的,全部。

别找我,我站在“ P”字母附近的某个地方

午餐后,我们进行了Alex Danilo的“ 参与体验” 。 本部分主要介绍有关推送通知。 有3个类别使通知适合一个良好的类别:

  • 及时 :现在很重要。 对。 现在。
  • 精确 :知道/采取行动很有根据。 我不需要随机琐事。
  • 相关 :来自对我重要的事物/人。 不是从某个随机的王子那里继承下来的。

让用户决定何时要订阅或取消订阅通知也很重要。 不要在他们访问您的网站时突然请求通知权限而感到惊讶。

另外,通知操作可以包含在通知窗口中。 例如,您收到了待办事项清单的通知,该清单将于今天到期,并带有“完成”按钮。 如果点击按钮旁边的窗口,它将打开Web应用程序。 但是,如果您点击“完成”按钮,它将在不打开Web应用程序的情况下划掉您的清单项目。

之后,Mariko返回了HTTPS ,它解释了我们为什么需要它。 HTTPS将为浏览器提供证书,以验证您网站的完整性。 通过HTTPS传输的数据经过加密,因此可以避免MITM攻击。 浏览器还将HTTPS作为一些引人入胜的API(例如位置,摄像头,推送通知和SW)的标准配置。 当然,尤其是SW,它当然需要安全性,因为它可以在您的浏览器和网络之间工作。

我知道HTTPS需要一些维护和现金来保持它的生命,但是它应该是完全值得的。 每当您访问带有SW的站点时,它将首先询问已缓存的SW。 如果您不想为HTTPS花费精力和金钱而对SW进行了所有权处理,会发生什么?

她还提到了HTTP / 2 但是我还没有学到很多。 AFAIK是比以前更快,更好地加载页面的协议。

上一个演示文稿由Kayce Basques(技术作家,是的,感谢您提供的所有文档!)和Tooling一起带来 。 他向我们展示了如何在浏览器中使用开发工具,如何查看软件状态和调试,模拟连接限制,清除缓存等。

实现PWA的最重要工具是Lighthouse 。 该工具将通过分数和提示来审核您现有的网站,以实现更好的PWA。 尽管此工具非常适合测量,但是Lighthouse的分数不应成为PWA开发的最终目标。 顾名思义,您应该不断改进Web应用程序:渐进式。

我们通过代码实验室会议,对将来的Web API的了解以及通过#pwajakarta通过Twitter进行的问答环节来结束了这一天。 演讲者很友好,可以回答所有问题。 回答了最重要的问题(至少对我而言):

PWA是否将取代本地应用程序? 答案是不”。

PWA不会挤压本地应用程序。 Android和iOS最有可能永远不会消失,网络应用也不会消失。 通过关注FIRE体验的实施,PWA是使Web应用程序更易于访问的桥梁。

如果您的应用程序要访问系统,操作系统功能,联系人,阅读消息或使用平台特定的UI功能,则应开发本机应用程序。 除此之外,也许您应该考虑使用Web应用程序,尤其是PWA。

PWA本身只是个流行词(或者说Pete说👀),因为它不是一种全新的或尖端的技术。 通过结合现有的Web技术(服务工作者,推送通知和某些API),可以改善用户在Web开发方面的体验。

PWA不是一项新技术。 从根本上改善了用户体验。

至此,我在PWA路演上的一天结束了。

演示文稿中提到的一些Web开发参考:

  • https://developers.google.com/web/
  • https://codelabs.developers.google.com/
  • https://youtube.com/ChromeDevelopers/

这是全天演示文稿的链接:https://drive.google.com/drive/folders/0B55wxScz_BJtV1lGbTBOYlhLTVk