写点什么

苹果扼杀 PWA ?iOS 上的 PWA 体验难达标,原生应用才是王道

  • 2024-02-23
    北京
  • 本文字数:1804 字

    阅读完需:约 6 分钟

大小:874.06K时长:04:58
苹果扼杀 PWA ?iOS 上的 PWA 体验难达标,原生应用才是王道

上个月,在大批 Campsite 用户向我们提出想要一个移动应用后,我们为 Campsite 提供了 PWA 支持。现在 Campsite 可以安装在手机主屏幕上,也能接收到推送通知了,于是我们立刻意识到这项工作物有所值,我们的用户也很高兴。

我们确实想要给 Campsite 做一个原生应用,但考虑到我们只是一个小团队,还在市场中寻找自己的立足点,所以增加更多的平台开销会拖累我们的发展速度。

 

与此同时,我们发现在 iOS 上支持 PWA 需要大量时间——无论我们如何努力,都会有太多的错误和缺失的特性,让我们感觉很难满足自己设定的工艺和质量标准。

网络推送:好处

苹果在 iOS 16.4 中向 PWA 添加了 Safari Web Push。这个 API 非常易用——你甚至不需要开发者帐户。

 

Campsite 是一个带有 NextJS 前端的 Rails API。为了让网络推送正常工作,我们需要做的就是:

 

  1. 通过 window.matchMedia('(display-mode:standalone)') 检测我们是否运行在 PWA 环境中,并提示用户启用推送。

  2. 我们请求推送权限并注册一个服务 worker。Pushpad 的服务 worker 帮我们搞定了这块。这个 worker 将注册的推送端点以及 p256dh 和身份验证令牌发送到我们的 API。

  3. 发生一个可推送事件时,我们在队列里添加一个 Sidekiq 作业,以使用 Pushpad 的分叉 web-push gem 发送一个推送。如果苹果返回一个 410 响应,我们就会销毁这个推送订阅。

 

这样,我们就可以在 Campsite 中发送高信号通知和聊天的推送了。

网络推送:坏处

如果你一直习惯的是构建原生推送通知,那么你会发现 Safari Web Push 缺少很多特性,还会造出很多陷阱。

 

我们发现的情况中最令人惊讶的是,你在收到通知时必须总是在设备上显示通知。这是在 Service Worker 中完成的,因此从技术上讲你可以跳过它的显示。但如果你这样做,苹果将撤销你的推送端点。来自官方文档:

Service Worker 收到推送通知后立即向用户呈现推送通知。如果你不这样做,Safari 会撤销你站点的推送通知权限。

Reddit 上的用户发现,第三次未显示通知后权限就被撤销了。

 

这意味着,如果你正在 PWA 上查看一段聊天内容并收到了新消息,你是没办法屏蔽新消息的推送的,这对用户来说非常烦人。

 

为了解决这个问题,我们会延迟 10 秒发送,这样你在查看聊天内容时就能把刚收到的信息标记为已读。相比之下,原生应用可以控制是否显示推送通知。

 

以下是我们在 iOS 上使用 Safari Web Push 时遇到的一些其他问题:

 

  • 没有静默推送,因此我们只能使用显示的推送来更新应用图标的小红点。理想情况下,如果你在其他地方清除通知,我们会自动删除你的手机上的应用图标小红点记录,但这对于 PWA 的推送机制来说是不可能做到的。

  • 除非你点击通知,否则无法从通知中心删除通知。你可以获取通知,但调用 notification.close() 不会执行任何操作。用户必须手动清除 Campsite 的推送。

  • 你无法删除“from Campsite”这条注释。

  • 没有通知分组或通讯通知。

错误和缺失的特性

我们在 Campsite 中提供了由 next-thems 驱动的动态明暗模式支持,简单说就是:

window.matchMedia('(prefers-color-scheme: dark)')
复制代码

虽然你的 PWA 将以浅色或深色模式呈现,但在应用程序被终止之前它不会来回切换。

随着 iOS 17 的发布,这个功能失效了。撰写本文时功能已经失效了 6 个多月,而且在 17.4 Beta 版中它似乎还是这个样子。开发人员在过去一段时间来一直在报告问题。

 

我们经常遇到一些更烦人的错误:

 

  • 我们使用 CSS sticky 将元素固定在视口的顶部/底部(导航栏、聊天输入等)。一段时间后,sticky 元素会破裂并在页面上自由滚动。这只能通过终止应用来解决。

  • 键盘也变化无常得厉害。它将 sticky 元素推离屏幕,有时它在 PWA 中干脆显示不出来了,唯一的解决方法是重新启动手机。

  • 没有用于触觉、PIP 或联系人同步的 API。(感谢 Jacob 指出这些问题)

我们接下来该怎么做?

我非常赞成我们构建 PWA 的决定。我们发现应用程序图标红点和推送通知可以帮助我们同用户保持更紧密的联系。我们的用户也同意这一点——有些人现在使用 Campsite 一半的时间都是在用手机应用!

 

不幸的是,iOS 上的 PWA 不符合 Campsite 的工艺和质量标准,而且苹果限制 PWA 在欧洲使用的最新消息也令人担忧。一旦我们锁定了 Campsite 的核心功能,我们就打算从头构建一个原生应用。

 

如果你的用户需要原生应用,构建基本的 PWA 支持可以帮助你快速入门,只是不要指望你的 PWA 能够接近原生体验。

 

原文链接:https://app.campsite.co/campsite/p/notes/rengvq2txami

2024-02-23 14:557651

评论

发布
暂无评论
发现更多内容

想要实现元宇宙,需要哪些技术支撑?

行云创新

技术 云原生 vr 云宇宙 虚拟

读完这些“Java技术栈”,拿下阿里Offer没问题

Java MySQL spring 程序员 JVM

GitLab和Rainbond整合实现一体化开发环境

北京好雨科技有限公司

DevOps gitlab #GitLab gitlab hook rainbond

ajax分析 学习(1),android0基础

android 程序员 移动开发

Anaconda详细安装及使用教程,阿里P8大牛亲自教你

android 程序员 移动开发

大势已来!!区块链的真正价值是什么

CECBC

知识中台与区块链助力多源可信数据价值释放

CECBC

Android 11 Beta 版正式发布!以及众多面向开发者的重磅更新

android 程序员 移动开发

面试阿里P6,过关斩将直通2面,结果3面找了个架构师来吊打我?

Java spring 程序员 架构

Activity-的-36-大难点,你会几个?,android游戏开发实践指南

android 程序员 移动开发

Andoird中LiveEventBus的使用——用LiveEventBus替代RxBus

android 程序员 移动开发

Andorid&Kotlin编译速度原理剖析(上),lambda表达式的作用与好处

android 程序员 移动开发

Androdid Droid Fu介绍,flutter底部弹窗

android 程序员 移动开发

Android 8 通知渠道(Notification Channels),美团移动端开发工程师

android 程序员 移动开发

Android - 定位方式,火星坐标系统,一键锁屏,字节Android高工面试

android 程序员 移动开发

Android 3年外包工面试笔记,有机会还是要去大厂学习提升

android 程序员 移动开发

A010-menu资源,看完老板哭着让我留下来

android 程序员 移动开发

Activity的生命周期,这可能是目前最全的

android 程序员 移动开发

Andriod 网络框架 OkHttp 源码解析,总结一下

android 程序员 移动开发

Android - 在线浏览源码,电话短信相关,文本变化监听器

android 程序员 移动开发

2021疫情下Android技术人的宅家学习进阶指南!花了大价钱大厂内部买来的学习资料,爱看不看

android 程序员 移动开发

Android 12体验!新的黑夜模式、影音格式,详解系列文章

android 程序员 移动开发

华为云GaussDB持续深耕创新与开放,打造企业核心数据上云信赖之选

华为云数据库小助手

GaussDB GaussDB(for openGauss) 华为云数据库 GaussDB(for MySQL) UGO

Android 6,android网络开发技术实战详解

android 程序员 移动开发

分布式服务下,消息中间件改造

kafka 架构 RocketMQ RabbitMQ 中间件

巧用 Redis 数据结构实现亿级数据聚合统计

码哥字节

redis 数据统计 NoSQL 数据库 11月日更

ajax分析 学习,kotlin构造器

android 程序员 移动开发

Androdid Droid Fu介绍(1),万字Android技术类校招面试题汇总

android 程序员 移动开发

2021牛转乾坤:新花样玩转Android组件化架构实践,15K-50K的详细Android学习指南

android 程序员 移动开发

Activity的任务栈Task以及启动模式与Intent的Flag详解(经典博文,值得收藏

android 程序员 移动开发

云原生:详解|K8s技术栈解析, 一文读懂K8s工作原理

息之

架构 容器 云原生 k8s 集群

苹果扼杀 PWA ?iOS 上的 PWA 体验难达标,原生应用才是王道_跨端开发_Ryan Nystrom_InfoQ精选文章