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

[noclin]

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

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

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

https://github.com/NoCLin/WebAppify

[subframe75361]

Edge 可以做到，但是无法编辑 manifest

[noclin]

@subframe75361 对于没有设置 manifest 的网站也可以吗，我去试试，很久没有用 edge 了:(

[shinsekai]

Safari 和 Firefox 怎么用啊，添加了之后怎么找

[noclin]

@shinsekai 似乎 Firefox 和 Safari 本身就不支持？我没有找到入口 如果能找到的话应该简单适配就好了

[subframe75361]

@noclin #2 是的，但是只是简单的套了个壳，请求还是正常的发送

[noclin]

@subframe75361 那做的事情差不多:)，这个脚本可以给 Chrome 添加这个功能，或者在 Edge 修改一下标题、背景颜色等信息

[ljsh093]

@shinsekai #3 firefox 似乎把 pwa 砍了

[PqgpNgA0wk]

如果是 chrome ，右上角 更多 创建快捷方式 也是可以的
https://s2.loli.net/2023/06/04/ZRXPJxAb7WFpOT3.png

[naminokoe]

变了之后有什么好处？

[hackpro]

小白问个问题：安装后的 PWA 会在本地 Application 目录下生成一个程序吗 哪里可以看到啊

[devliu1]

@PqgpNgA0wk 是的，创建快捷方式也会生成 app ，但是只是一个链接，并不是独立的窗口。V 站本身支持安装，可以试一下安装和创建快捷方式的区别

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

@hackpro 是的，macOS 在这个位置 `open "$HOME/Applications/Chrome Apps.localized"`。Windows 我没有测试过，但是你可以在 taskbar 右键选择属性看位置

[devliu1]

获取图标 hourse.icon 不是特别稳定啊，而且这个编辑界面太容易受到原站点的 CSS 影响了

https://sm.ms/image/lJCRXdUy5IDpeMt

[PqgpNgA0wk]

需要勾选以窗口形式打开
https://s2.loli.net/2023/06/04/ijqGShcCwoWmnBT.png
https://s2.loli.net/2023/06/04/wqat15dODj9LolH.png

[noclin]

@devliu1 感谢帮忙解答！我看看能不能自己部署一个 icon 服务，或者做个 google icon 的代理

[noclin]

@PqgpNgA0wk 谢谢，安装 Edge 测试了一下，没有找到这个选项，但是确实是在窗口里了。非常🆒

看来我这个工作只能在 Chrome 里运行了 :)，另外测试了 Chrome 只支持 https 的站点，Edge 可以支持 http

[noclin]

@PqgpNgA0wk 看错了，以为你说的是 Edge ，我不知道原来 Chrome 也有这个功能，哈哈。那这个脚本就只剩下 Manifest Editor 了

[hackpro]

@devliu1 我在 chrome 下试了 好像本地没有生成任何东西哎

[mdyh]

好用，有些只有 web 又想用客户端的，这个可以解决了。比如飞书文档 😄

[noclin]

@hackpro 看一下 log ，或者用 Chrome 的创建快捷方式试试？

[kebamt]

nb👍