Chrome 102 带来的杀手级功能：双击文件打开 PWA 应用

[hanguokai]

Chrome 102 已经正式发布了，其中对 Web 开发者而言新增了一个杀手级的功能：File Handling API 。这个功能可以让用户在操作系统的文件管理器中通过双击或右键(打开方式...)直接用已安装的 PWA 应用打开（一个或多个选中的）文件，就像使用原生桌面应用一样。例如：
• 双击一个文本文件就用文本编辑器打开这个文件。
• 双击视频就用视频播放器播放视频。
• 双击你自定义的文件格式（后缀）就用你的 Web app 打开。

https://webvideoplayer.org/ 是我去年做的一个简单的 PWA 版的视频播放器。点击浏览器地址栏右侧的“安装”图标，或点击页面上的 “PWA Install” 按钮即可安装。之后就可以在文件管理器（比如 macOS 的 Finder 中）选择用这个新安装的 Video Player 播放视频了。

更多介绍见我昨天写的这篇： https://mp.weixin.qq.com/s/3ANzWtSTk1gzRo-ooL6dYg

[mscsky]

PWA 会泄露隐私

[opentrade]

以观后效

[codehz]

你这个播放器点开 4K HEVC 内容直接黑屏但有声音。。。(不支持能不能提示下不支持啊）

[cjpjxjx]

快进到双击 apk 文件通过 Chrome 打开运行

[siweipancc]

通过 google doc 打开, 香爆

[orzz]

TG,Ins,推特基本上都换成 PWA 了，够用了

[hronro]

我实在想不明白怎么会有人用 PWA 做视频播放器。相当于给本身的视频播放功能套了个皮？但问题是随便一款正常的播放器都吊打浏览器的视频播放功能啊。用 WASM 跑 ffmpeg ？没法用硬件加速不说，效能还比原生的 ffmpeg 差远了

[PqgpNgA0wk]

挺好的，利用浏览器特性基于 pwa 写点自己的小玩意，况且楼主写的这个也没说跟原声播放器做性能对比，有意思就得了，上纲上线什么。。

[hanguokai]

浏览器原生支持的音视频编码是支持硬件加速的（见 chrome://gpu/ ）。只是浏览器支持的编码不全，比如不支持 HEVC(H.265) ，详见 https://caniuse.com/?search=video%20format 。

[RickyC]

这年头，用到电脑的场景比较少。基本就是 vs code 写代码。

[MAGA2022]

firefox 用户实名羡慕

[Satelli]

@codehz
非此环境的 Chrome 不支持 HEVC 。
https://www.chromium.org/audio-video/#:~:text=H.265%20%5BGoogle%20Chrome%20OS%20on%20Intel%20Gen%2011%2Dbased%20Chromebooks%20for%20protected%20content%20playback%20only%5D

@hanguokai
Chrome 、Edge 等浏览器在无硬件支持（如老款设备）或硬件支持但受平台限制（如 macOS VideoToolbox 、Windows MediaFoundation ）也会软解播放 vp9 和 av1 。

[codehz]

@Satelli 我的意思是编辑器里提示下不支持，而不是直接黑屏，我还以为是片子的问题（

[Zzzz77]

感觉很不错诶，跃跃欲试了

[hanguokai]

@codehz 明白，我也遇到过这种情况。有些不支持的格式播放的时候会报错，这时我会提示说不支持。但目前这种有声音但无画面的情况，Chrome 并不报错，所以我这边就没法给提示。看看以后 Web 这方面会不会有更细化的改进。

[ViriF]

Chrome 的`媒体缓存到硬盘`开关 flag 没了，再加上这个，感觉硬盘写入会高不少啊；
倒是一些文档啥的用 PWA 打开挺舒服的

[Satelli]

@hanguokai https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API

[idealhs]

高级一点的编码浏览器都搞不定，写点别的 demo 挺好，拿这个当 player 真的是做宝搞。

[hanguokai]

@Satelli 谢谢。但是这种 API 比较适合流媒体，不太适合本地文件播放。
流媒体播放：服务端准备了多种编码格式（已知编码格式），然后用这个 API 来查看浏览器支持哪种。
本地文件播放：就是一个文件，不知道是什么编码，除非自己读取文件内容分析。

[Satelli]

@hanguokai 直接扔给平台提供的播放 API 不去做 UX ，那这个 PWA 和系统自带的有什么区别。系统自带的还会提示部分轨道不能播放呢。

[hanguokai]

@Satelli PWA 本质上还是 Web ，底层主要依赖 Web 平台自身的能力。平台本身不支持或支持不好的地方（比如编码、多音轨等），我再考虑下能否 workaround 解决，你有什么解决方案也欢迎提出。目前这个应用主要是在上层 UI 、快捷键方面满足日常播放的需求。

[laqow]

所以微软把 edge 弄成 chromium 是有内鬼吗

[xJogger]

微信：知道了这就抄一下
微信 -> 微信 OS

[RickyC]

杀手级功能，正好你做了个 app ，是吗？

[AloneHero]

对于工具类应用有些用，但是用 web 做工具类应用实在是有点鸡肋，够轻量，但功能也羸弱

[hanguokai]

@RickyC 就像我在微信文章后面讲的，这种能力扩大了 Web App 的想象空间。比如：Web 版的文本编辑器（ Web 版的 VS code ）、图片编辑器 /浏览器、办公软件、自定义格式文件 等等，各种与文件结合的功能未来都可能出现相应的 Web 版应用。

[Zzzz77]

@AloneHero 倒也未必，现在很多工具都在 web 化发展了，比如各种在线设计工具 MasterGO 、蓝湖、墨刀等，还有语雀、有道、notion 、石墨、金山文档这种笔记 /办公 /文档工具、再有 processon 、draw.io 这样的绘图工具，甚至像剪映这种视频剪辑软件都有 web 版了，一方面 web 能力在慢慢成长，另一方面其实对大部分用户来说 web 版已经够用了，本地应用应该会逐步倾向专业人士

[Xushet]

从不用 pwa

[hanguokai]

@Satelli 前面说了 MediaCapabilities/MediaSource 这类 API 需要先知道 codec 信息才能调用，而对于读本地文件的场景事先并不知道文件的 codec 是什么，这时就需要读取文件内容分析才能知道。我查了一下，mp4box.js 、mediainfo.js 这类库就是这么做的，可以获得媒体文件的 codec 信息。稍后有时间我再查查，看看是否有必要引入。

[aleen42]

又多了东西要学习了？

[HankAviator]

感谢分享，希望国内不要用这个功能搞流氓

[lanlanye]

下一步是不是该禁用 PWA 了 console 了

[killmojo]

有个疑问，web dev 里说要开启 #file-handling-api 。 那最终用户也要自己去开启这个？

[hanguokai]

@killmojo 不需要，这个功能已经在 Chrome 102 中默认启用了。https://web.dev/file-handling/ 也更新过了。