最小应用实践 - Valorant桌面小部件开发
需求背景
Valorant是拳头的新FPS游戏，皮肤商店每天只刷新4件商品，因此如果想要买到想要的皮肤需要每日登录帐号查看。有些第三方网站可以填写帐号密码查看，除了信任危机，也有社区传闻单IP频繁登录有可能造成帐号封禁，每天都去查看也很恼人。
小调研
iOS16后开放了桌面小部件的接口，Scriptable支持通过代码开发小部件，我也曾做过简单的小部件
在Github冲浪了一下，找到了拳头登录的接口、Valorant游戏数据的接口以及相关的图片等静态资源
开发背景
2021年底我就实现了这样的功能。能用，但不好用。
- 很慢而且容易出错脚本请求了近十个境外的接口，仅完成登录就需要请求三次拳头的接口，作为后台刷新的程序，普通用户的网络条件下常出现错误。
- 展示不够美观Scriptable 提供的方法不足以简单的绘制好看的界面，也不支持自适应布局。无论是Stack(容器)还是Text (文字) 都需要手动指定尺寸，不同屏幕下的组件宽高比不同，想完美绘制界面，需要为每一个不同的屏幕尺寸设定不同的大小，尽管社区存在这样的对应关系 但这仍不是好的解法。
改进
2022年11月一次居家办公，我回归了Valorant，顺便优化了这个程序。
- 减轻客户端负载
登录需要在本机完成，获取第三方数据和计算的工作可以迁移到外部。
- 使用satori
satori支持使用HTML + CSS进行图像的绘制，Scriptable只需展示一个图片，完美做到自适应。
例如在Scriptable内我就无法使用ObjectFit使图片保持比例的撑满容器。借助丰富的CSS属性，摆布图片和文字的位置变得轻松，我还顺便支持了得意体/落霞孤鹜两种字体。
- 缓存机制
除了将常用的静态资源存到本地。皮肤商店只在每日8点刷新，8点后的重复计算将会读取本地文件进行渲染，不做重复请求。缓存命中时，执行几乎无延迟，缓存未命中时，可以在10s内执行完毕（原来约1分钟）。
- 繁体中文翻译
开发时还没出国服，只有官方的繁体中文翻译，借助了OpenCC在服务端渲染时繁体转简体。
- 拓展网页
Scriptable可以为小部件添加跳转Url，小部件会跳转到网页，可以查看皮肤的图像和视频。
- 支持了大、中、小三种视图
不同的尺寸的小部件会请求不同的图像，只需做简单参数的区分。
逻辑时序
- Scriptable中新建脚本，填写拳头的账号和密码，将小组件添加到桌面
- 系统后台运行脚本，根据账密请求拳头接口鉴权获取token，根据token查询账户余额以及商店皮肤的ID
- 调用API服务，根据皮肤ID查询名称、价格、图像等信息，使用OpenCC进行繁体转换，satori绘制图像为SVG格式，使用Resvg.js转成Png格式返回。
- 小部件展示图像，点击可跳转至开发的前端部分。
其他
出于稳定性和避免接口滥用考虑，使用了cloudflare workers的定时任务，定期将三方接口数据转存至cloudflare R2。
总结
找到了一个真实存在的需求解决很难得。
技术上并没有什么卡点，以上开发、调研、部署等内容在工作之余花了两天时间全部搞定。
相比一个Web应用来说，桌面小部件的空间有限，容纳很少的数据，但仍然是一个很完整的应用。