V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
noclin
V2EX  ›  分享创造

WebAppify - 把任意网站变成可安装的 PWA

  •  2
     
  •   noclin · 2023-06-03 18:13:40 +08:00 · 2875 次点击
    这是一个创建于 530 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有些好用的网站没有提供 PWA 支持,一直苦等还不如自己 hack 。

    在网上也没有找到相关的产品,于是花了半天时间结合 ChatGPT 快速实现了一个基于 User.js 的 Minimum Viable Product 。

    目前实现了动态加载 manifest 文件,获取 512*512 图标,以及最简单的编辑功能。

    https://github.com/NoCLin/WebAppify

    第 1 条附言  ·  2023-06-04 11:23:50 +08:00
    Edge 可以做到类似的功能,经常用 Chrome 的朋友可以试试😄
    第 2 条附言  ·  2023-06-04 11:54:23 +08:00
    Chrome 也自带了,详见#13
    20 条回复    2023-06-05 21:19:14 +08:00
    subframe75361
        1
    subframe75361  
       2023-06-03 18:22:55 +08:00
    Edge 可以做到,但是无法编辑 manifest
    noclin
        2
    noclin  
    OP
       2023-06-03 18:31:31 +08:00
    @subframe75361 对于没有设置 manifest 的网站也可以吗,我去试试,很久没有用 edge 了:(
    shinsekai
        3
    shinsekai  
       2023-06-03 18:41:14 +08:00
    Safari 和 Firefox 怎么用啊,添加了之后怎么找
    noclin
        4
    noclin  
    OP
       2023-06-03 18:50:31 +08:00
    @shinsekai 似乎 Firefox 和 Safari 本身就不支持?我没有找到入口 如果能找到的话应该简单适配就好了
    subframe75361
        5
    subframe75361  
       2023-06-03 21:12:39 +08:00
    @noclin #2 是的,但是只是简单的套了个壳,请求还是正常的发送
    noclin
        6
    noclin  
    OP
       2023-06-03 22:07:07 +08:00
    @subframe75361 那做的事情差不多:),这个脚本可以给 Chrome 添加这个功能,或者在 Edge 修改一下标题、背景颜色等信息
    ljsh093
        7
    ljsh093  
       2023-06-04 00:26:15 +08:00
    @shinsekai #3 firefox 似乎把 pwa 砍了
    PqgpNgA0wk
        8
    PqgpNgA0wk  
       2023-06-04 02:26:19 +08:00
    如果是 chrome ,右上角 更多 创建快捷方式 也是可以的
    https://s2.loli.net/2023/06/04/ZRXPJxAb7WFpOT3.png
    naminokoe
        9
    naminokoe  
       2023-06-04 05:54:13 +08:00 via iPhone
    变了之后有什么好处?
    hackpro
        10
    hackpro  
       2023-06-04 06:23:22 +08:00
    小白问个问题:安装后的 PWA 会在本地 Application 目录下生成一个程序吗 哪里可以看到啊
    devliu1
        11
    devliu1  
       2023-06-04 08:39:36 +08:00   ❤️ 1
    @PqgpNgA0wk 是的,创建快捷方式也会生成 app ,但是只是一个链接,并不是独立的窗口。V 站本身支持安装,可以试一下安装和创建快捷方式的区别

    @naminokoe 同上,好处是可以在独立窗口浏览网页,更容易从系统级找到入口,更接近客户端的体验。

    @hackpro 是的,macOS 在这个位置 `open "$HOME/Applications/Chrome Apps.localized"`。Windows 我没有测试过,但是你可以在 taskbar 右键选择属性看位置
    devliu1
        12
    devliu1  
       2023-06-04 08:47:07 +08:00
    获取图标 hourse.icon 不是特别稳定啊,而且这个编辑界面太容易受到原站点的 CSS 影响了

    https://sm.ms/image/lJCRXdUy5IDpeMt
    PqgpNgA0wk
        13
    PqgpNgA0wk  
       2023-06-04 10:48:12 +08:00   ❤️ 1
    noclin
        14
    noclin  
    OP
       2023-06-04 11:20:24 +08:00
    @devliu1 感谢帮忙解答!我看看能不能自己部署一个 icon 服务,或者做个 google icon 的代理
    noclin
        15
    noclin  
    OP
       2023-06-04 11:22:46 +08:00
    @PqgpNgA0wk 谢谢,安装 Edge 测试了一下,没有找到这个选项,但是确实是在窗口里了。非常🆒

    看来我这个工作只能在 Chrome 里运行了 :),另外测试了 Chrome 只支持 https 的站点,Edge 可以支持 http
    noclin
        16
    noclin  
    OP
       2023-06-04 11:53:28 +08:00
    @PqgpNgA0wk 看错了,以为你说的是 Edge ,我不知道原来 Chrome 也有这个功能,哈哈。那这个脚本就只剩下 Manifest Editor 了
    hackpro
        17
    hackpro  
       2023-06-05 02:31:35 +08:00
    @devliu1 我在 chrome 下试了 好像本地没有生成任何东西哎
    mdyh
        18
    mdyh  
       2023-06-05 18:05:05 +08:00
    好用,有些只有 web 又想用客户端的,这个可以解决了。比如飞书文档 😄
    noclin
        19
    noclin  
    OP
       2023-06-05 20:49:49 +08:00
    @hackpro 看一下 log ,或者用 Chrome 的创建快捷方式试试?
    kebamt
        20
    kebamt  
       2023-06-05 21:19:14 +08:00 via iPhone
    nb👍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1299 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:00 · PVG 02:00 · LAX 10:00 · JFK 13:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.