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

我们确实想要给Campsite做一个原生应用,但考虑到我们只是一个小团队,还在市场中寻找自己的立足点,所以增加更多的平台开销会拖累我们的发展速度。
与此同时,我们发现在iOS上支持PWA需要大量时间——无论我们如何努力,都会有太多的错误和缺失的特性,让我们感觉很难满足自己设定的工艺和质量标准。
网络推送:好处苹果在中向PWA添加了SafariWebPush。这个API非常易用——你甚至不需要开发者帐户。
Campsite是一个带有NextJS前端的RailsAPI。为了让网络推送正常工作,我们需要做的就是:
通过('(display-mode:standalone)')检测我们是否运行在PWA环境中,并提示用户启用推送。
我们请求推送权限并注册一个服务worker。Pushpad的服务worker帮我们搞定了这块。这个worker将注册的推送端点以及p256dh和身份验证令牌发送到我们的API。
发生一个可推送事件时,我们在队列里添加一个Sidekiq作业,以使用Pushpad的分叉web-pushgem发送一个推送。如果苹果返回一个410响应,我们就会销毁这个推送订阅。
这样,我们就可以在Campsite中发送高信号通知和聊天的推送了。

如果你一直习惯的是构建原生推送通知,那么你会发现SafariWebPush缺少很多特性,还会造出很多陷阱。
我们发现的情况中最令人惊讶的是,你在收到通知时必须总是在设备上显示通知。这是在ServiceWorker中完成的,因此从技术上讲你可以跳过它的显示。但如果你这样做,苹果将撤销你的推送端点。来自官方文档:
Reddit上的用户发现,第三次未显示通知后权限就被撤销了。
这意味着,如果你正在PWA上查看一段聊天内容并收到了新消息,你是没办法屏蔽新消息的推送的,这对用户来说非常烦人。
为了解决这个问题,我们会延迟10秒发送,这样你在查看聊天内容时就能把刚收到的信息标记为已读。相比之下,原生应用可以控制是否显示推送通知。
以下是我们在iOS上使用SafariWebPush时遇到的一些其他问题:
没有静默推送,因此我们只能使用显示的推送来更新应用图标的小红点。理想情况下,如果你在其他地方清除通知,我们会自动删除你的手机上的应用图标小红点记录,但这对于PWA的推送机制来说是不可能做到的。
你无法删除“fromCampsite”这条注释。
没有通知分组或通讯通知。
错误和缺失的特性我们在Campsite中提供了由next-thems驱动的动态明暗模式支持,简单说就是:
('(prefers-color-scheme:dark)')复制代码
虽然你的PWA将以浅色或深色模式呈现,但在应用程序被终止之前它不会来回切换。

随着iOS17的发布,这个功能失效了。撰写本文时功能已经失效了6个多月,而且在17.4Beta版中它似乎还是这个样子。开发人员在过去一段时间来一直在报告问题。
我们经常遇到一些更烦人的错误:
键盘也变化无常得厉害。它将sticky元素推离屏幕,有时它在PWA中干脆显示不出来了,唯一的解决方法是重新启动手机。
没有用于触觉、PIP或联系人同步的API。(感谢Jacob指出这些问题)
我们接下来该怎么做?我非常赞成我们构建PWA的决定。我们发现应用程序图标红点和推送通知可以帮助我们同用户保持更紧密的联系。我们的用户也同意这一点——有些人现在使用Campsite一半的时间都是在用手机应用!
不幸的是,iOS上的PWA不符合Campsite的工艺和质量标准,而且苹果限制PWA在欧洲使用的最新消息也令人担忧。一旦我们锁定了Campsite的核心功能,我们就打算从头构建一个原生应用。
如果你的用户需要原生应用,构建基本的PWA支持可以帮助你快速入门,只是不要指望你的PWA能够接近原生体验。