在 safari 中添加这些 meta tag ,然后手机上选择添加桌面快捷方式,网站就能像 app 一样打开和使用
可以试试: https://pasteboard.online/
据说星巴克也支持这个: https://app.starbucks.com/
<!-- 添加苹果快捷方式图标 -->
<!-- <link rel="apple-touch-icon" href="icon.png" /> -->
<link rel="apple-touch-icon" href="icon.icns" />
<!-- 开启全屏显示(以 App 模式运行) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="bg.jpg">
<!-- APP 模式下,顶部空白处的颜色,可选为 default black black-translucent , default 使用 body 的背景色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- App 名称,在用户选择添加到主页的时候这个名字会自动蹦出来 -->
<meta name="apple-mobile-web-app-title" content="Cliper">
据说是上古时期,ios 不准备允许开发者搞第三方 app ,所有的 app 都需要通过 safari 运行,所以说这是一个上古兼容层。
不过用起来还是挺方便的!只要写一个小网页,就能当作 app 来用,也不用开发者账号和上架,并且分发起来也超级方便的。
1
labdum 136 天前
starbuck 网页上有 PWA
|
2
kasusa OP @labdum 跨浏览器兼容性
Apple 是跨设备世界的重要公司,拥有 iOS 、iPadOS 、macOS 和 Safari 。虽然 Apple 从未公开使用“PWA”一词,但自 2018 年以来,他们一直在支持相关技术,使 PWA 支持在 iPhone 和 iPad 上的 Safari 中安装和离线使用。 但是,Apple 的 PWA 规范实现缺少其他浏览器具备的许多功能,尤其是由 Chromium 引擎提供支持的浏览器。 另一方面,我们还拥有 Firefox 及其 Gecko 引擎,其实现包括在 Android 上使用更多 PWA 规范,并减少在桌面设备上的安装功能。 局限性包括缺少推送通知、集成 API (例如 Web Bluetooth 或 WebNFC ),以及安装宣传技术(帮助用户知道可以安装当前网站来获得应用体验)。此外,已实现的功能还存在多个 bug 。 |
3
kasusa OP pwa 和 safari 兼容性有限
|
4
okakuyang 136 天前
我想知道,你 2 楼说这么多技术,你知道现在移动版 chrome 都有吗?
|
5
iold 136 天前 1
我就是用的这个方法,把彩云 h5 添加到桌面当 App 用的。
|
6
maladaxia 136 天前
学习了
|