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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 937 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

双击

文件

打开

pwa

34 条回复 • 2022-07-08 16:09:10 +08:00

mscsky

2022-05-27 08:40:29 +08:00

PWA 会泄露隐私

opentrade

2022-05-27 08:43:04 +08:00

以观后效

codehz

2022-05-27 09:29:30 +08:00

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

cjpjxjx

2022-05-27 09:33:30 +08:00

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

siweipancc

2022-05-27 09:51:51 +08:00 via iPhone

通过 google doc 打开, 香爆

orzz

2022-05-27 10:13:01 +08:00

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

hronro

2022-05-27 10:23:01 +08:00 via iPhone

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

PqgpNgA0wk

2022-05-27 11:39:12 +08:00

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

hanguokai

2022-05-27 11:49:41 +08:00

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

RickyC

2022-05-27 12:39:52 +08:00

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

MAGA2022

2022-05-27 12:50:16 +08:00

firefox 用户实名羡慕

Satelli

2022-05-27 13:15:01 +08:00

@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

2022-05-27 13:21:44 +08:00

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

Zzzz77

2022-05-27 13:27:30 +08:00

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

hanguokai

2022-05-27 13:35:17 +08:00

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

ViriF

2022-05-27 13:49:51 +08:00

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

Satelli

2022-05-27 14:28:30 +08:00

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

idealhs

2022-05-27 14:28:49 +08:00

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

hanguokai

2022-05-27 14:56:37 +08:00

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

Satelli

2022-05-27 15:02:16 +08:00

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

hanguokai

2022-05-27 15:32:21 +08:00

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

laqow

2022-05-27 16:53:15 +08:00

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

xJogger

2022-05-27 17:03:58 +08:00

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

RickyC

2022-05-27 17:14:28 +08:00

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

AloneHero

2022-05-27 17:33:36 +08:00 via Android

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

hanguokai

2022-05-27 17:37:00 +08:00

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

Zzzz77

2022-05-27 17:54:24 +08:00

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

Xushet

2022-05-27 18:04:48 +08:00 via Android

从不用 pwa

hanguokai

2022-05-28 00:18:46 +08:00

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