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:557787

评论

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

数据中台建设的9大误区,你中了几条?

博文视点Broadview

在线JSON转typescript工具

入门小站

工具

架构实战营 外包学生管理系统的架构文档

💤 ZZzz💤

架构实战营

18.理智分析--人类离威胁还相当遥远

Databri_AI

人工智能

深入了解现代web浏览器(第四部分)

GKNick

谈 C++17 里的 Observer 模式

hedzr

c++ 设计模式 Design Patterns c++17 observer pattern

计算机网络学习笔记 概述

Regan Yue

计算机网络 9月日更 计网

Java字节码技术学习笔记

风翱

Java 9月日更

linux之read命令

入门小站

工具

图数据库在社交方向上的应用

6979阿强

社交网络 GraphScope 图数据 图关系

学生管理系统架构设计

一叶知秋

#架构实战营

【Flutter 专题】45 图解矩阵变换 Transform 类 (二)

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 9月日更

玩转TypeScript工具类型(中)

有道技术团队

typescript 大前端 网易有道

Vue进阶(幺幺叁):element ui 表单验证 this.$refs[formName].validate()问题解决

No Silver Bullet

Vue 9月日更

国足历届世界杯对战记录整理

6979阿强

图算法 GraphScope 2022年卡塔尔世界杯 中国国足

国内独家首发版本!龙蜥操作系统(Anolis OS) 8.4 正式发行!

OpenAnolis小助手

Linux centos 开源 开源社区

序列化与反序列化之Protostuff(一)

程序员架构进阶

架构 protobuf 9月日更 序列化与反序列化 protostuff

如何提高开会效率?

石云升

项目管理 管理 引航计划 内容合集 9月日更

🏆(不要错过!)【CI/CD技术专题】「Jenkins实战系列」(4)总结归纳Jenkins的安装使用和配置流程介绍

码界西柚

maven jenkins git 学习 9月日更

NoSQL-MongoDB

hanaper

面试官让手写队列,差点挂了

bigsai

IP地理定位之数据驱动广告矩阵

郑州埃文科技

GitHub上下载量突破100000+阿里巴巴的这份开源项目如此牛逼

Java 编程 架构 面试 计算机

设定Docker容器日志的大小和轮询规则

耳东@Erdong

Docker log 9月日更

架构训练营模块三作业

TIEDPAG

架构训练营 模块三

【LeetCode】从根到叶的二进制数之和Java题解

Albert

算法 LeetCode 9月日更

固定QPS压测初试

FunTester

性能测试 测试框架 压力测试 QPS FunTester

10行代码集2000张美女图,Python爬虫120例,再上征途

梦想橡皮擦

9月日更

什么是数据驱动

奔向架构师

数据治理 9月日更

人工智能计算中心,助力数字经济发展的算力“虫洞”

脑极体

Go 编码习惯

baiyutang

Go 语言 9月日更

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