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

学到了新东西(上古 safari - app 技术)

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

    在 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 来用,也不用开发者账号和上架,并且分发起来也超级方便的。

    12 条回复    2024-07-10 14:41:32 +08:00
    labdum
        1
    labdum  
       136 天前
    starbuck 网页上有 PWA
    kasusa
        2
    kasusa  
    OP
       136 天前
    @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 。
    kasusa
        3
    kasusa  
    OP
       136 天前
    pwa 和 safari 兼容性有限
    okakuyang
        4
    okakuyang  
       136 天前
    我想知道,你 2 楼说这么多技术,你知道现在移动版 chrome 都有吗?
    iold
        5
    iold  
       136 天前   ❤️ 1
    我就是用的这个方法,把彩云 h5 添加到桌面当 App 用的。
    maladaxia
        6
    maladaxia  
       136 天前
    学习了
    di11wei
        7
    di11wei  
       136 天前 via iPhone
    @iold 彩云还可以这样用,学习到了。
    jpyl0423
        8
    jpyl0423  
       136 天前
    @iold #5 请问下怎么在彩云 H5 里加上 meta 信息,先把网页下载到本地吗
    iold
        9
    iold  
       136 天前
    @jpyl0423 #8 js 脚本,之前有佬在 v 站送过一个可以给 Safari 拓展脚本的 App ,叫 Stay 。
    kasusa
        10
    kasusa  
    OP
       136 天前
    @okakuyang 没 我从官网拷贝的)
    chapiom
        11
    chapiom  
       133 天前
    @iold 这样和网页直接加到桌面有什么不一样吗
    kasusa
        12
    kasusa  
    OP
       130 天前
    @chapiom 没有 safari 自带的上下栏位,看着清爽
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   905 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 20:34 · PVG 04:34 · LAX 12:34 · JFK 15:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.