V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hanguokai
V2EX  ›  程序员

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

  •  1
     
  •   hanguokai · 2022-05-27 07:25:08 +08:00 · 7502 次点击
    这是一个创建于 898 天前的主题,其中的信息可能已经有所发展或是发生改变。



    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
    34 条回复    2022-07-08 16:09:10 +08:00
    mscsky
        1
    mscsky  
       2022-05-27 08:40:29 +08:00
    PWA 会泄露隐私
    opentrade
        2
    opentrade  
       2022-05-27 08:43:04 +08:00
    以观后效
    codehz
        3
    codehz  
       2022-05-27 09:29:30 +08:00
    你这个播放器点开 4K HEVC 内容直接黑屏但有声音。。。(不支持能不能提示下不支持啊)
    cjpjxjx
        4
    cjpjxjx  
       2022-05-27 09:33:30 +08:00
    快进到双击 apk 文件通过 Chrome 打开运行
    siweipancc
        5
    siweipancc  
       2022-05-27 09:51:51 +08:00 via iPhone
    通过 google doc 打开, 香爆
    orzz
        6
    orzz  
       2022-05-27 10:13:01 +08:00
    TG,Ins,推特基本上都换成 PWA 了,够用了
    hronro
        7
    hronro  
       2022-05-27 10:23:01 +08:00 via iPhone   ❤️ 10
    我实在想不明白怎么会有人用 PWA 做视频播放器。相当于给本身的视频播放功能套了个皮?但问题是随便一款正常的播放器都吊打浏览器的视频播放功能啊。用 WASM 跑 ffmpeg ?没法用硬件加速不说,效能还比原生的 ffmpeg 差远了
    PqgpNgA0wk
        8
    PqgpNgA0wk  
       2022-05-27 11:39:12 +08:00   ❤️ 3
    挺好的,利用浏览器特性基于 pwa 写点自己的小玩意,况且楼主写的这个也没说跟原声播放器做性能对比,有意思就得了,上纲上线什么。。
    hanguokai
        9
    hanguokai  
    OP
       2022-05-27 11:49:41 +08:00
    浏览器原生支持的音视频编码是支持硬件加速的(见 chrome://gpu/ )。只是浏览器支持的编码不全,比如不支持 HEVC(H.265) ,详见 https://caniuse.com/?search=video%20format
    RickyC
        10
    RickyC  
       2022-05-27 12:39:52 +08:00
    这年头,用到电脑的场景比较少。基本就是 vs code 写代码。
    MAGA2022
        11
    MAGA2022  
       2022-05-27 12:50:16 +08:00
    firefox 用户实名羡慕
    Satelli
        12
    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
        13
    codehz  
       2022-05-27 13:21:44 +08:00
    @Satelli 我的意思是编辑器里提示下不支持,而不是直接黑屏,我还以为是片子的问题(
    Zzzz77
        14
    Zzzz77  
       2022-05-27 13:27:30 +08:00
    感觉很不错诶,跃跃欲试了
    hanguokai
        15
    hanguokai  
    OP
       2022-05-27 13:35:17 +08:00
    @codehz 明白,我也遇到过这种情况。有些不支持的格式播放的时候会报错,这时我会提示说不支持。但目前这种有声音但无画面的情况,Chrome 并不报错,所以我这边就没法给提示。看看以后 Web 这方面会不会有更细化的改进。
    ViriF
        16
    ViriF  
       2022-05-27 13:49:51 +08:00
    Chrome 的`媒体缓存到硬盘`开关 flag 没了,再加上这个,感觉硬盘写入会高不少啊;
    倒是一些文档啥的用 PWA 打开挺舒服的
    idealhs
        18
    idealhs  
       2022-05-27 14:28:49 +08:00
    高级一点的编码浏览器都搞不定,写点别的 demo 挺好,拿这个当 player 真的是做宝搞。
    hanguokai
        19
    hanguokai  
    OP
       2022-05-27 14:56:37 +08:00
    @Satelli 谢谢。但是这种 API 比较适合流媒体,不太适合本地文件播放。
    流媒体播放:服务端准备了多种编码格式(已知编码格式),然后用这个 API 来查看浏览器支持哪种。
    本地文件播放:就是一个文件,不知道是什么编码,除非自己读取文件内容分析。
    Satelli
        20
    Satelli  
       2022-05-27 15:02:16 +08:00
    @hanguokai 直接扔给平台提供的播放 API 不去做 UX ,那这个 PWA 和系统自带的有什么区别。系统自带的还会提示部分轨道不能播放呢。
    hanguokai
        21
    hanguokai  
    OP
       2022-05-27 15:32:21 +08:00
    @Satelli PWA 本质上还是 Web ,底层主要依赖 Web 平台自身的能力。平台本身不支持或支持不好的地方(比如编码、多音轨等),我再考虑下能否 workaround 解决,你有什么解决方案也欢迎提出。目前这个应用主要是在上层 UI 、快捷键方面满足日常播放的需求。
    laqow
        22
    laqow  
       2022-05-27 16:53:15 +08:00
    所以微软把 edge 弄成 chromium 是有内鬼吗
    xJogger
        23
    xJogger  
       2022-05-27 17:03:58 +08:00
    微信:知道了这就抄一下
    微信 -> 微信 OS
    RickyC
        24
    RickyC  
       2022-05-27 17:14:28 +08:00
    杀手级功能,正好你做了个 app ,是吗?
    AloneHero
        25
    AloneHero  
       2022-05-27 17:33:36 +08:00 via Android
    对于工具类应用有些用,但是用 web 做工具类应用实在是有点鸡肋,够轻量,但功能也羸弱
    hanguokai
        26
    hanguokai  
    OP
       2022-05-27 17:37:00 +08:00
    @RickyC 就像我在微信文章后面讲的,这种能力扩大了 Web App 的想象空间。比如:Web 版的文本编辑器( Web 版的 VS code )、图片编辑器 /浏览器、办公软件、自定义格式文件 等等,各种与文件结合的功能未来都可能出现相应的 Web 版应用。
    Zzzz77
        27
    Zzzz77  
       2022-05-27 17:54:24 +08:00
    @AloneHero 倒也未必,现在很多工具都在 web 化发展了,比如各种在线设计工具 MasterGO 、蓝湖、墨刀等,还有语雀、有道、notion 、石墨、金山文档这种笔记 /办公 /文档工具、再有 processon 、draw.io 这样的绘图工具,甚至像剪映这种视频剪辑软件都有 web 版了,一方面 web 能力在慢慢成长,另一方面其实对大部分用户来说 web 版已经够用了,本地应用应该会逐步倾向专业人士
    Xushet
        28
    Xushet  
       2022-05-27 18:04:48 +08:00 via Android
    从不用 pwa
    hanguokai
        29
    hanguokai  
    OP
       2022-05-28 00:18:46 +08:00
    @Satelli 前面说了 MediaCapabilities/MediaSource 这类 API 需要先知道 codec 信息才能调用,而对于读本地文件的场景事先并不知道文件的 codec 是什么,这时就需要读取文件内容分析才能知道。我查了一下,mp4box.js 、mediainfo.js 这类库就是这么做的,可以获得媒体文件的 codec 信息。稍后有时间我再查查,看看是否有必要引入。
    aleen42
        30
    aleen42  
       2022-05-28 09:48:11 +08:00 via Android
    又多了东西要学习了?
    HankAviator
        31
    HankAviator  
       2022-05-28 10:18:32 +08:00
    感谢分享,希望国内不要用这个功能搞流氓
    lanlanye
        32
    lanlanye  
       2022-05-28 19:22:07 +08:00
    下一步是不是该禁用 PWA 了 console 了
    killmojo
        33
    killmojo  
       2022-07-08 15:29:30 +08:00
    有个疑问,web dev 里说要开启 #file-handling-api 。 那最终用户也要自己去开启这个?
    hanguokai
        34
    hanguokai  
    OP
       2022-07-08 16:09:10 +08:00
    @killmojo 不需要,这个功能已经在 Chrome 102 中默认启用了。https://web.dev/file-handling/ 也更新过了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2637 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 03:26 · PVG 11:26 · LAX 19:26 · JFK 22:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.