AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

苹果扼杀 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:557772

评论

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

Druid 0.15 版本启动错误

HoneyMoose

Linux之du命令

入门小站

Linux

架构训练营模块二作业

Lemon

软件库与框架的区别

码语者

架构 框架

勇于尝试新鲜事物,利于项目来积累学习经验

吴脑的键客

职业规划

CTF中的一些常见骚操作(可以没有,但不能不会)

网络安全学海

网络安全 信息安全 CTF 渗透测试 漏洞分析

从脑瘫患者重获交流到免开颅微创,脑机接口更安全了吗?

脑极体

【Kubernetes技术专题】系统架构介绍

码界西柚

k8s 7月日更

nacos的作为服务配置怎么玩?

卢卡多多

nacos 服务 7月日更

数字人民币的基础:共识与信任

CECBC

5分钟速读之Rust权威指南(四十三)宏

wzx

rust

在线XML转HTML工具

入门小站

工具

高并发服务优化篇:详解RPC的一次调用过程

Coder的技术之路

RPC RPC调用

大数据训练营-0711课后作业

cc

【涨知识】你不知道的Python常用开发工具!猿来这么多!

小阿杰

Python 后端 开发工具

免费分享Mysql从入门到精通的优秀图书

Java入门到架构

想在Java八股文面试中脱颖而出?这《1000道互联网大厂Java工程师面试题》必不可少!

白亦杨

Java 编程 程序员

如何保证 Serverless 业务部署更新的一致性?

Serverless Devs

云计算 Serverless 云原生

图像的读取,显示与存储操作

IT蜗壳-Tango

7月日更

剧本杀是不是个好生意?

石云升

商业洞察 商业分析 7月日更

聚焦Real Time DaaS 赛道,Tapdata 获数千万美元 Pre-A 轮融资

tapdata

实时数据服务平台 Real Time DaaS

[架构实战营]模块二作业

xyu

#架构实战营

想跳槽却简历石沉大海?一起来围观月薪20k的软件测试工程师真实简历 (含金量高面试题)

程序员阿沐

面试 软件测试 自动化测试 经验分享 简历

JIRA 链接 bitbucket 提示错误 Invalid OAuth credentials

HoneyMoose

小解c# foreach原理

喵叔

7月日更

想在Java八股文面试中脱颖而出?这《1000道互联网大厂Java工程师面试题》必不可少!

Java 编程 程序员

JIRA 如何连接到云平台的 bitbucket

HoneyMoose

区块链量化交易所开发|搭建量化交易系统

Geek_23f0c3

交易所开发 量化交易系统 区块链、

在腾讯,我的试用期总结

程序员鱼皮

Java c++ Python 大前端 后端

Nginx配置location

刘旭东

nginx 反向代理

区块链技术如何赋能食品安全链路追溯

CECBC

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