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

作者 | Ryan Nystrom

译者 | 王强

策划 | Tina

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

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

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

网络推送：好处

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

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

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

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

发生一个可推送事件时，我们在队列里添加一个 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

声明：本文由 InfoQ 翻译，未经许可禁止转载。

.data_color_scheme_dark{--weui-BTN-ACTIVE-MASK: rgba(255, 255, 255, .1)}.data_color_scheme_dark{--weui-BTN-DEFAULT-ACTIVE-BG: rgba(255, 255, 255, .126)}.data_color_scheme_dark{--weui-DIALOG-LINE-COLOR: rgba(255, 255, 255, .1)}.data_color_scheme_dark{--weui-BG-COLOR-ACTIVE: #373737}.data_color_scheme_dark{--weui-BG-6: rgba(255, 255, 255, .1);--weui-ACTIVE-MASK: rgba(255, 255, 255, .1)}.data_color_scheme_dark{--weui-REDORANGE: #ff6146;--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}.data_color_scheme_dark{--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}.data_color_scheme_dark{--weui-elpsColor: rgba(255, 255, 255, .8)}.data_color_scheme_dark{--weui-mask-elpsColor: rgba(255, 255, 255, .8);--weui-mask-gradient: linear-gradient(to right, rgba(25, 25, 25, 0), #191919 40%)}.data_color_scheme_dark{--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}.rich_media_content{color:#000000e5;font-size:var(--articleFontsize);overflow:hidden;text-align:justify}.rich_media_content{color:var(--weui-FG-HALF)}.rich_media_content{position:relative;z-index:0}.rich_media_content:not(.old_list_style) .list-paddingleft-1,.rich_media_content:not(.old_list_style) .list-paddingleft-2,.rich_media_content:not(.old_list_style) .list-paddingleft-3{padding-left:2.2em}.rich_media_content:not(.old_list_style) .list-paddingleft-1 .list-paddingleft-2,.rich_media_content:not(.old_list_style) .list-paddingleft-2 .list-paddingleft-2,.rich_media_content:not(.old_list_style) .list-paddingleft-3 .list-paddingleft-2{padding-left:30px}.rich_media_content:not(.old_list_style) .list-paddingleft-1{padding-left:1.2em}.rich_media_content:not(.old_list_style).fix_apple_default_style .list-paddingleft-1{padding-left:1.5em}.rich_media_content.old_list_style .list-paddingleft-1,.rich_media_content.old_list_style .list-paddingleft-2,.rich_media_content.old_list_style .list-paddingleft-3{padding-left:0}.rich_media_content.old_list_style .list-paddingleft-1 .list-paddingleft-1,.rich_media_content.old_list_style .list-paddingleft-2 .list-paddingleft-2,.rich_media_content.old_list_style .list-paddingleft-3 .list-paddingleft-3{padding-left:1.2em}.code-snippet__fix{font-size:14px;margin:10px 0;display:block;color:#333;position:relative;background-color:#00000008;border:1px solid #f0f0f0;border-radius:2px;display:-ms-flexbox;display:flex;line-height:26px}.code-snippet__fix .code-snippet__line-index{counter-reset:line;-ms-flex-negative:0;flex-shrink:0;height:100%;padding:1em;list-style-type:none}.code-snippet__built_in,.code-snippet__builtin-name{color:#ca7d37}.wxw-img{vertical-align:bottom}.code-snippet__string,.code-snippet__doctag,.code-snippet__title,.code-snippet__section,.code-snippet__selector-id{color:#d14}.code-snippet__fix code{text-align:left;font-size:14px;display:block;white-space:pre;display:-ms-flexbox;display:flex;position:relative;font-family:Consolas,Liberation Mono,Menlo,Courier,monospace}*{margin:0;padding:0}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important}.code-snippet,.code-snippet__fix,.code-snippet *,.code-snippet__fix *{max-width:1e3%!important}.rich_media_content em{font-style:italic}.code-snippet__fix .code-snippet__line-index li{list-style-type:none;text-align:right}.code-snippet__fix .code-snippet__line-index li:before{min-width:1.5em;text-align:right;left:-2.5em;counter-increment:line;content:counter(line);display:inline;color:#00000026}@media(prefers-color-scheme:dark){body:not([data-weui-theme=light]) .code-snippet__fix .code-snippet__line-index li:before{color:#ffffff4d}}.code-snippet__fix pre{overflow-x:auto;padding:1em 1em 1em 0;white-space:normal;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch}@media(prefers-color-scheme:dark){body:not([data-weui-theme=light]) .rich_media_content img:not(.wx_img_placeholder){filter:brightness(.8)}}.rich_media_content p{clear:both;min-height:1em}td p{margin:0;padding:0}@media screen and (min-width:1024px){body:not(.pages_skin_pc) :root{--appmsgPageGap: 20px;--appmsgPageBottomGap: 40px}}:root{--articleFontsize: 17px}:root{--sab: env(safe-area-inset-bottom)}:root{--wxBorderAvatarRatio: 3}:root{--discussPageGap: 20px}:root{--immersive-safe-bottom: env(safe-area-inset-bottom)}:root{--appmsgPageGap: 20px;--appmsgPageBottomGap: 40px}@media(prefers-color-scheme:dark){body:not([data-weui-theme=light]) .code-snippet__fix{color:#fffc}}body,.wx-root,page{--weui-BTN-HEIGHT: 48;--weui-BTN-HEIGHT-MEDIUM: 40;--weui-BTN-HEIGHT-SMALL: 32}body{--weui-elpsLine: 2;--weui-elpsFontSize: 1rem;--weui-elpsColor: rgba(0, 0, 0, .9)}body{--weui-mask-elpsLine: 2;--weui-mask-elpsLineHeight: 1.4;--weui-mask-elpsFontSize: 1rem;--weui-mask-elpsColor: rgba(0, 0, 0, .9);--weui-mask-gradient: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40%)}@media(prefers-color-scheme:dark){body:not([data-weui-theme=light]){--weui-elpsColor: rgba(255, 255, 255, .8)}}@media(prefers-color-scheme:dark){body:not([data-weui-theme=light]){--weui-mask-elpsColor: rgba(255, 255, 255, .8);--weui-mask-gradient: linear-gradient(to right, rgba(25, 25, 25, 0), #191919 40%)}}@media screen and (min-width:1024px){body:not(.pages_skin_pc) body,body:not(.pages_skin_pc) .wx-root{--weui-BG-0: #ededed;--weui-BG-1: #f7f7f7;--weui-BG-2: #fff;--weui-BG-3: #f7f7f7;--weui-BG-4: #4c4c4c;--weui-BG-5: #fff;--weui-FG-0: rgba(0, 0, 0, .9);--weui-FG-HALF: rgba(0, 0, 0, .9);--weui-FG-1: rgba(0, 0, 0, .55);--weui-FG-2: rgba(0, 0, 0, .3);--weui-FG-3: rgba(0, 0, 0, .1);--weui-FG-4: rgba(0, 0, 0, .15);--weui-FG-5: rgba(0, 0, 0, .05);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #fa9d3b;--weui-YELLOW: #ffc300;--weui-GREEN: #91d300;--weui-LIGHTGREEN: #95ec69;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1485ee;--weui-PURPLE: #6467f0;--weui-WHITE: #fff;--weui-LINK: #576b95;--weui-TEXTGREEN: #06ae56;--weui-FG: #000;--weui-BG: #fff;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: #fa9d3b;--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: #06ae56;--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: #10aeff;--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(0, 0, 0, .5);--weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, .05)}}@media screen and (min-width:1024px){body:not(.pages_skin_pc) .wx-root[data-weui-mode=care],body:not(.pages_skin_pc) body[data-weui-mode=care]{--weui-BG-0: #ededed;--weui-BG-1: #f7f7f7;--weui-BG-2: #fff;--weui-BG-3: #f7f7f7;--weui-BG-4: #4c4c4c;--weui-BG-5: #fff;--weui-FG-0: #000;--weui-FG-HALF: #000;--weui-FG-1: rgba(0, 0, 0, .6);--weui-FG-2: rgba(0, 0, 0, .42);--weui-FG-3: rgba(0, 0, 0, .1);--weui-FG-4: rgba(0, 0, 0, .15);--weui-FG-5: rgba(0, 0, 0, .05);--weui-RED: #dc3636;--weui-ORANGERED: #d14730;--weui-ORANGE: #e17719;--weui-YELLOW: #bb8e00;--weui-GREEN: #4f8400;--weui-LIGHTGREEN: #2e8800;--weui-BRAND: #018942;--weui-BLUE: #007dbb;--weui-INDIGO: #0075e2;--weui-PURPLE: #6265f1;--weui-WHITE: #fff;--weui-LINK: #576b95;--weui-TEXTGREEN: #06ae56;--weui-FG: #000;--weui-BG: #fff;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: #e17719;--weui-TAG-BACKGROUND-ORANGE: rgba(225, 119, 25, .1);--weui-TAG-TEXT-GREEN: #06ae56;--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: #007dbb;--weui-TAG-BACKGROUND-BLUE: rgba(0, 125, 187, .1);--weui-TAG-TEXT-BLACK: rgba(0, 0, 0, .5);--weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, .05)}}@media screen and (min-width:1024px){body:not(.pages_skin_pc) .wx-root[data-weui-mode=care][data-weui-theme=dark],body:not(.pages_skin_pc) body[data-weui-mode=care][data-weui-theme=dark]{--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .85);--weui-FG-HALF: rgba(255, 255, 255, .65);--weui-FG-1: rgba(255, 255, 255, .55);--weui-FG-2: rgba(255, 255, 255, .35);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}}@media screen and (min-width:1024px){body:not(.pages_skin_pc) .wx-root,body:not(.pages_skin_pc) body{--appmsgExtra-BG: #F7F7F7}}@media screen and (min-width:1024px){body:not(.pages_skin_pc) .wx-root[data-weui-theme=dark],body:not(.pages_skin_pc) body[data-weui-theme=dark]{--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}}@media screen and (min-width:1024px){body:not(.pages_skin_pc) .wx-root[data-weui-theme=dark],body:not(.pages_skin_pc) body[data-weui-theme=dark]{--appmsgExtra-BG: #121212}}@media screen and (min-width:1024px){body:not(.pages_skin_pc)body:not(.pages_skin_pc){background:var(--weui-BG-2)}}@media screen and (min-width:1024px) and (prefers-color-scheme:dark){body:not(.pages_skin_pc) .wx-root[data-weui-mode=care]:not([data-weui-theme=light]),body:not(.pages_skin_pc) body[data-weui-mode=care]:not([data-weui-theme=light]){--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .85);--weui-FG-HALF: rgba(255, 255, 255, .65);--weui-FG-1: rgba(255, 255, 255, .55);--weui-FG-2: rgba(255, 255, 255, .35);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}}@media screen and (min-width:1024px) and (prefers-color-scheme:dark){body:not(.pages_skin_pc) .wx-root:not([data-weui-theme=light]),body:not(.pages_skin_pc) body:not([data-weui-theme=light]){--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}}@media screen and (min-width:1024px) and (prefers-color-scheme:dark){body:not(.pages_skin_pc) .wx-root:not([data-weui-theme=light]),body:not(.pages_skin_pc) body:not([data-weui-theme=light]){--appmsgExtra-BG: #121212}}@media(prefers-color-scheme:dark){body:not([data-weui-theme=light]).my_comment_empty_data{background-color:#111}}body,.wx-root{--weui-BG-6: rgba(0, 0, 0, .05);--weui-ACTIVE-MASK: rgba(0, 0, 0, .05)}body,.wx-root{--weui-REDORANGE: #ff6146;--weui-BG-0: #ededed;--weui-BG-1: #f7f7f7;--weui-BG-2: #fff;--weui-BG-3: #f7f7f7;--weui-BG-4: #4c4c4c;--weui-BG-5: #fff;--weui-FG-0: rgba(0, 0, 0, .9);--weui-FG-HALF: rgba(0, 0, 0, .9);--weui-FG-1: rgba(0, 0, 0, .55);--weui-FG-2: rgba(0, 0, 0, .3);--weui-FG-3: rgba(0, 0, 0, .1);--weui-FG-4: rgba(0, 0, 0, .15);--weui-FG-5: rgba(0, 0, 0, .05);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #fa9d3b;--weui-YELLOW: #ffc300;--weui-GREEN: #91d300;--weui-LIGHTGREEN: #95ec69;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1485ee;--weui-PURPLE: #6467f0;--weui-WHITE: #fff;--weui-LINK: #576b95;--weui-TEXTGREEN: #06ae56;--weui-FG: #000;--weui-BG: #fff;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: #fa9d3b;--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: #06ae56;--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: #10aeff;--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(0, 0, 0, .5);--weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, .05)}body,.wx-root{--weui-BG-0: #ededed;--weui-BG-1: #f7f7f7;--weui-BG-2: #fff;--weui-BG-3: #f7f7f7;--weui-BG-4: #4c4c4c;--weui-BG-5: #fff;--weui-FG-0: rgba(0, 0, 0, .9);--weui-FG-HALF: rgba(0, 0, 0, .9);--weui-FG-1: rgba(0, 0, 0, .55);--weui-FG-2: rgba(0, 0, 0, .3);--weui-FG-3: rgba(0, 0, 0, .1);--weui-FG-4: rgba(0, 0, 0, .15);--weui-FG-5: rgba(0, 0, 0, .05);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #fa9d3b;--weui-YELLOW: #ffc300;--weui-GREEN: #91d300;--weui-LIGHTGREEN: #95ec69;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1485ee;--weui-PURPLE: #6467f0;--weui-WHITE: #fff;--weui-LINK: #576b95;--weui-TEXTGREEN: #06ae56;--weui-FG: #000;--weui-BG: #fff;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: #fa9d3b;--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: #06ae56;--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: #10aeff;--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(0, 0, 0, .5);--weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, .05)}.wx-root,body{--weui-BTN-ACTIVE-MASK: rgba(0, 0, 0, .1)}.wx-root,body{--weui-BTN-DEFAULT-ACTIVE-BG: #e6e6e6}.wx-root,body{--weui-DIALOG-LINE-COLOR: rgba(0, 0, 0, .1)}.wx-root,body{--weui-BG-COLOR-ACTIVE: #ececec}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-BTN-ACTIVE-MASK: rgba(255, 255, 255, .1)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-BTN-DEFAULT-ACTIVE-BG: rgba(255, 255, 255, .126)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-DIALOG-LINE-COLOR: rgba(255, 255, 255, .1)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--APPMSGCARD-BG: #1E1E1E}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--APPMSGCARD-LINE-BG: rgba(255, 255, 255, .07)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-BG-COLOR-ACTIVE: #373737}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-BG-6: rgba(255, 255, 255, .1);--weui-ACTIVE-MASK: rgba(255, 255, 255, .1)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-REDORANGE: #ff6146;--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--discussInput-BG: rgba(255, 255, 255, .03)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--nickName-FG: #959595}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--weui-BG-0: #111;--weui-BG-1: #1e1e1e;--weui-BG-2: #191919;--weui-BG-3: #202020;--weui-BG-4: #404040;--weui-BG-5: #2c2c2c;--weui-FG-0: rgba(255, 255, 255, .8);--weui-FG-HALF: rgba(255, 255, 255, .6);--weui-FG-1: rgba(255, 255, 255, .5);--weui-FG-2: rgba(255, 255, 255, .3);--weui-FG-3: rgba(255, 255, 255, .1);--weui-FG-4: rgba(255, 255, 255, .15);--weui-FG-5: rgba(255, 255, 255, .1);--weui-RED: #fa5151;--weui-ORANGERED: #ff6146;--weui-ORANGE: #c87d2f;--weui-YELLOW: #cc9c00;--weui-GREEN: #74a800;--weui-LIGHTGREEN: #3eb575;--weui-BRAND: #07c160;--weui-BLUE: #10aeff;--weui-INDIGO: #1196ff;--weui-PURPLE: #8183ff;--weui-WHITE: rgba(255, 255, 255, .8);--weui-LINK: #7d90a9;--weui-TEXTGREEN: #259c5c;--weui-FG: #fff;--weui-BG: #000;--weui-TAG-TEXT-RED: rgba(250, 81, 81, .6);--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, .1);--weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, .6);--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, .1);--weui-TAG-TEXT-GREEN: rgba(6, 174, 86, .6);--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, .1);--weui-TAG-TEXT-BLUE: rgba(16, 174, 255, .6);--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, .1);--weui-TAG-TEXT-BLACK: rgba(255, 255, 255, .5);--weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, .05)}}@media(prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]),body:not([data-weui-theme=light]){--appmsgExtra-BG: #121212}}