[隆重介绍] urlapp-一种小众但有趣的 app 形式

[meeop]

缘起： 去年我发了一个帖子，没想到获得热烈讨论，这个点子很有趣，而且有一定实用价值 https://www.v2ex.com/t/944717#reply149

经过更深入的思考，我发现这是一个相当不错的 app 形式，它不光具有优异的性能，还是一种分享代码的便利方式，从此发布 app 不再是一个高成本的事情了，你甚至可以一行代码作为一个 app 发布

什么是 urlapp

urlapp 是一种轻量开源 app 封装形式。
它使用 Data URL 规范（参考：Data URL 规范），封装一个单页面 html 应用为一个 url ，使用浏览器访问 url 可直接使用 app 。

如下链接是一个简单的 urlapp ，复制到浏览器地址栏运行

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+

这是一个网页记事本，它有很多一般 app 不具备的特性：

• 无需网络，永久可用
• 全平台支持，只依赖浏览器
• 易于分发
• 开源
• 轻量秒开
• 安全，浏览器对网页有严格限制

urlapp.org项目

urlapp 项目（urlapp.org）致力于提供一个使用，发布，推广，讨论，开发 urlapp 的平台。

urlapp 代码和数据永久开源（github 地址），欢迎收藏，点赞，讨论，分享

同时，github-discussions 板块(github-discussions 地址)也作为 urlapp 的讨论，发布，点评论坛，任何关于 urlapp.org 和 urlapp 的问题可以在这里讨论

urlapp.org还意图实现为一个永久可用服务，无后端服务依赖纯静态化设计，数据和代码都开源分发，只要你打开并保持 urlapp ，它就永远存在于你的电脑不会下线。后续还计划通过 ipfs 等平台加固服务可用性

沟通讨论平台: discord | telegram | github-discussions

发布一组 urlapp,欢迎探索

• 小工具
  • html 文本编辑、文本编辑、html 转 urlApp 、二维码生成、二维码扫描、动态表单编辑 json 、在线 html 编辑渲染
• 游戏
  • 2048 小游戏、纸牌、马里奥 1k 、俄罗斯方块
• 微应用
  • 模拟桌面、番茄计时器、任务四象限、计算器
• 原型设计
  • Autumn 、可爱风 3D 飞机飞行

更多信息请访问urlapp.org，所有 urlapp 都是开箱即用的，同时欢迎发布你的 urlapp 。

[yKXSkKoR8I1RcxaS]

酷

[qwertyzzz]

和普通网页有什么区别

[meeop]

@qwertyzzz
1 易于分享
你可以在论坛聊天窗口直接分享一个 app,而且打开即用,类似这样
https://www.v2ex.com/t/1056167?p=1#reply20
普通网页的话,要么你自己部署然后分享 url,要么你给别人分发一个文件或者下载链接

2 永久可用
网页需要依赖后台服务器,应该经常能遇到收藏的一些网页过一段时间就打不开了
urlapp 不会,它以源码形式分享,加入收藏夹,就永远都能用

3 超低的开发/部署/分发成本
普通网页你需要一个后台服务器,正规一点的话还需要 icp 备案,域名备案,买 vps,全套下来几万块钱+费时费力
对于单 html 能力范围的场景,如果直接拿 dataurl 分享,纯粹的 0 成本,如果拿 urlapp.org 分享,也就发个帖子的事

4 轻量秒开
网页是有网络交互的,最快的网页打开也有眼屎
urlapp 不会,加入收藏夹后打开只有 3ms 加载时间

[qwertyzzz]

@meeop 和别人把网站给你 你统一部署有什么区别

[shadowyue]

你这个像是 PWA 的更精简版本。
提个问题，你这个应用的形式，如何解决更新的问题。
一旦我收藏了，就没法更新了

[meeop]

@qwertyzzz 我想解决的场景是轻量的单 html 应用的分发问题,前面说了,这个形式的 app 有普通网页无法替代的一些属性,那,相对于部署在 github pages 这类静态网站托管服务:

1 这里分发的是一个打开即用的 app,而不是更发散的网页,并且提供一个集中的分发,使用,搜索,评价,反馈平台
2 只要保存页面,这个 app 永远可用,托管网站做不到这点(作者也可能删除页面)
3 开发和维护成本更低,发个帖子的成本

如果说有人做一个关于网页/网站的聚合,评价,分享,发布,托管平台倒是也类似,但那是一个更复杂的场景,和轻量 html 应用场景不冲突

[yjfkk]

酷就够了，虽然没啥用。

[meeop]

@shadowyue 我想了 3 个办法:
1 对于在 urlapp.org 上发布,你需要以发帖的形式在 github discussion 上发一个发布 app 帖子
这个帖子就是你的 urlapp 发布页面了,后续更新/评价/讨论都可以围绕这个帖子进行
后续更新也可以以同样的形式发帖,而 urlapp.org 会处理发布帖子,定期录入更新 urlapp
urlapp.org 上的 urlapp 永远是最新的
参考:https://urlapp.org/apps/doc2024072200003/howToPublish

2 可以直接联系作者,追更或者订阅

3 代码开源的,小修改可以自己动手(这一点几乎所有 app 都做不到)

[meeop]

@shadowyue 比如你可以收藏 urlapp 的落地页,这个页面会保持最新,也是 urlapp.org 这个网站主要解决的问题
https://urlapp.org/detailPage?appId=app2024072200007

[qwertyzzz]

@meeop #6 感觉和那种别人做的工具类的网站区别不大呀。。就是这个可以下载是吧

[meeop]

@qwertyzzz 相对工具类网站呢:
1 网站和 app 保持永久可用,好用的工具你收藏后就是你的,不会有一天没了

2 代码开源,app 有些细节想调整(比如 json 格式化加个粘贴自动格式化功能),工具站可不给你调整,你可以在源码基础上自己调整

3 他不止工具站啊,单 html 应用是一个 app,它还可以是游戏,动画,应用

4urlapp.org 还会提供在线使用,讨论,反馈,评价能力,会提供一些社区能力

5 就工具类应用而言,urlapp 不需要网络,打开非常快,几个毫秒级别

[ClarkAbe]

@qwertyzzz 可以保存在书签然后离线使用

[meeop]

@qwertyzzz 举个例子,比如 json 格式化,下面这个链接会比任何其他 json 格式化工具加载迅速(完全感受不到加载时间)

data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CjxtZXRhIGNoYXJzZXQ9IlVURi04Ij4KPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgo8dGl0bGU+SlNPTiBGb3JtYXR0ZXI8L3RpdGxlPgo8c3R5bGU+CiAgYm9keSwgaHRtbCB7CiAgICBoZWlnaHQ6IDEwMCU7CiAgICB3aWR0aDogMTAwdnc7CiAgICBtYXJnaW46IDA7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIH0KICB0ZXh0YXJlYSB7CiAgICB3aWR0aDogNTAlOwogICAgaGVpZ2h0OiAxMDAlOwogICAgYm94LXNpemluZzogYm9yZGVyLWJveDsgLyogRW5zdXJlcyBubyBvdmVyZmxvdyAqLwogICAgYm9yZGVyLXdpZHRoOiAxcHg7IC8qIFJlbW92ZXMgdGhlIGJvcmRlciAqLwogICAgb3V0bGluZTogbm9uZTsgLyogUmVtb3ZlcyB0aGUgb3V0bGluZSAqLwogICAgcmVzaXplOiBub25lOyAvKiBQcmV2ZW50IHJlc2l6aW5nICovCiAgICBwYWRkaW5nOiAxMHB4OyAvKiBBZGRzIHNvbWUgcGFkZGluZyBpbnNpZGUgdGhlIHRleHRhcmVhICovCiAgICBmb250LXNpemU6IDE2cHg7IC8qIEluY3JlYXNlcyBmb250IHNpemUgZm9yIGJldHRlciByZWFkYWJpbGl0eSAqLwogIH0KPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KPHRleHRhcmVhIGlkPSJpbnB1dEpzb24iIHBsYWNlaG9sZGVyPSJQYXN0ZSBKU09OIGhlcmUiPjwvdGV4dGFyZWE+Cjx0ZXh0YXJlYSBpZD0ib3V0cHV0SnNvbiIgcGxhY2Vob2xkZXI9IkZvcm1hdHRlZCBKU09OIHdpbGwgYXBwZWFyIGhlcmUiIHJlYWRvbmx5PjwvdGV4dGFyZWE+Cgo8c2NyaXB0PgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdpbnB1dEpzb24nKS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCkgewogICAgdmFyIGlucHV0ID0gdGhpcy52YWx1ZTsKICAgIHRyeSB7CiAgICAgIHZhciBvdXRwdXQgPSBKU09OLnN0cmluZ2lmeShKU09OLnBhcnNlKGlucHV0KSwgbnVsbCwgNCk7CiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvdXRwdXRKc29uJykudmFsdWUgPSBvdXRwdXQ7CiAgICB9IGNhdGNoIChlKSB7CiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvdXRwdXRKc29uJykudmFsdWUgPSAiRXJyb3I6ICIgKyBlLm1lc3NhZ2U7CiAgICB9CiAgfSk7Cjwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4K

[meeop]

@qwertyzzz 还有就是无广告,工具站为了盈利一定是要塞广告的,或者弹窗,或者占用 ui 面积
urlapp 可以有广告,但是是开源的,不爽你可以自己删掉广告

[adrianzhang]

感觉不错呀

[huajingkun1214]

我想到一个好玩的点, urlapp.org 能实现自举吗？

[meeop]

@huajingkun1214 可以,项目构建后其实就只有一个 html+一个 js 文件,可以手动合并为一个 html 文件
只不过出于页面加载速度考虑我没这么干,实践上我验证过一个 100m 的 html 文件毫无问题
100M 按照 10k 一个 urlapp 可以容纳 1w 个 app 了,我估计永远都不会有这么多数据

[meeop]

@huajingkun1214 这里有个例子，你可以在一个 urlapp 里访问 urlapp
https://urlapp.org/apps/app2024072200008/virtualWin

[body007]

之前有分享这个复制代码的地址，挺好使的。

data:text/html;base64,PGh0bWw+PGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBodHRwLWVxdWl2PSJYLVVBLUNvbXBhdGlibGUiIGNvbnRlbnQ9IklFPWVkZ2UiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPkRvY3VtZW50PC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uIGlkPSJidG4iPkNvcHkgVXJsPC9idXR0b24+CiAgICA8ZGl2IGlkPSJlZGl0b3ItYXJlYSIgY29udGVudGVkaXRhYmxlPSIiPjxkaXYgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IzJiMmIyYjtjb2xvcjojYTliN2M2Ij48cHJlIHN0eWxlPSJmb250LWZhbWlseTonbW9ub25va2knLG1vbm9zcGFjZTtmb250LXNpemU6MTguMHB0OyI+PHNwYW4gc3R5bGU9ImNvbG9yOiNjYzc4MzI7Ij5wYWNrYWdlIDwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6I2E3YzZhMjsiPm1haW48YnI+PC9zcGFuPjxzcGFuIHN0eWxlPSJjb2xvcjojYTdjNmEyOyI+PGJyPjwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6I2NjNzgzMjsiPmltcG9ydCA8L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiNlOGJhMzY7Ij4oPGJyPjwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6I2U4YmEzNjsiPiAgICA8L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiMzMGJlNDc7Ij4iZm10Ijxicj48L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiNlOGJhMzY7Ij4pPGJyPjwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6I2U4YmEzNjsiPjxicj48L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiNjYzc4MzI7Ij5mdW5jIDwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6I2ZmN2IwMDsiPm1haW48L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiNlOGJhMzY7Ij4oKSB7PGJyPjwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6I2U4YmEzNjsiPiAgICA8L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiNhN2M2YTI7Ij5mbXQ8L3NwYW4+LjxzcGFuIHN0eWxlPSJjb2xvcjojOGFmZjA3OyI+UHJpbnRsbjwvc3Bhbj48c3BhbiBzdHlsZT0iY29sb3I6IzU0YTg1NzsiPig8L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiMzMGJlNDc7Ij4iaGVsbG8iPC9zcGFuPjxzcGFuIHN0eWxlPSJjb2xvcjojNTRhODU3OyI+KTxicj48L3NwYW4+PHNwYW4gc3R5bGU9ImNvbG9yOiNlOGJhMzY7Ij59PGJyPjwvc3Bhbj48L3ByZT48L2Rpdj48L2Rpdj4KICAgIDxzdHlsZT4KICAgICAgI2VkaXRvci1hcmVhIHsKICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA4MHB4KTsKICAgICAgICBtYXJnaW4tdG9wOiAyMHB4OwogICAgICAgIG92ZXJmbG93OiBzY3JvbGw7CiAgICAgICAgb3V0bGluZTogMXB4IHNvbGlkIGdyYXk7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8c2NyaXB0PgogICAgICBmdW5jdGlvbiB1dGY4X3RvX2I2NChzdHIpIHsKICAgICAgICByZXR1cm4gd2luZG93LmJ0b2EodW5lc2NhcGUoZW5jb2RlVVJJQ29tcG9uZW50KHN0cikpKTsKICAgICAgfQogICAgICAvLyBmdW5jdGlvbiBiNjRfdG9fdXRmOChzdHIpIHsKICAgICAgLy8gICByZXR1cm4gZGVjb2RlVVJJQ29tcG9uZW50KGVzY2FwZSh3aW5kb3cuYXRvYihzdHIpKSk7CiAgICAgIC8vIH0KICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImJ0biIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgKCkgPT4gewogICAgICAgIGNvbnN0IGlwdCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImlucHV0Iik7CiAgICAgICAgY29uc3QgdHh0ID0gYGRhdGE6dGV4dC9odG1sO2Jhc2U2NCwke3V0ZjhfdG9fYjY0KGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImh0bWwiKS5vdXRlckhUTUwpfWA7CiAgICAgICAgaXB0LnNldEF0dHJpYnV0ZSgidmFsdWUiLCB0eHQpOwogICAgICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoaXB0KTsKICAgICAgICBpcHQuc2V0U2VsZWN0aW9uUmFuZ2UoMCwgdHh0Lmxlbmd0aCk7CiAgICAgICAgaXB0LnNlbGVjdCgpOwogICAgICAgIGRvY3VtZW50LmV4ZWNDb21tYW5kKCJjb3B5Iik7CiAgICAgICAgZG9jdW1lbnQuYm9keS5yZW1vdmVDaGlsZChpcHQpOwogICAgICB9KTsKICAgIDwvc2NyaXB0PgogIAoKPC9ib2R5PjwvaHRtbD4=

[meeop]

可以的话分享到 urlapp.org 吧,这样别人就能使用这个功能了
参考:
https://urlapp.org/apps/doc2024072200003/howToPublish
发个帖就行