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

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

  •  1
     
  •   hanguokai · 74 天前 · 6326 次点击
    这是一个创建于 74 天前的主题,其中的信息可能已经有所发展或是发生改变。



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