gpt4 book ai didi

ios - 在 iOS 上为启用 PWA 的应用程序安装到主屏幕

转载 作者:行者123 更新时间:2023-12-02 16:12:54 58 4
gpt4 key购买 nike

我已经添加了 pwa 模块(或原理图),并且已经正确设置了我的 manifest.json 文件。在 Android 设备上,我的服务人员正在参与,我收到安装到主屏幕的提示,地址栏消失,我可以看到 native 的外观和感觉。但是,在 Chrome/Safari iOS 上没有提示。我需要以编程方式/另外做些什么吗?

最佳答案

2020 年 3 月更新

虽然 iOS 上仍不支持添加到主屏幕提示,但pwacompat软件包(由 Google Chrome 团队开发)可让您轻松生成 iOS 设备上的 PWA 支持所需的资源(启动图像触摸图标)。

安装:

npm i pwacompat

这将确保您的 PWA 即使在不兼容的设备/浏览器中也能得到支持,而无需在文档的 <head> 上手动指定链接标签。 。更具体地说,对于 Safari,pwacompat 包将执行以下操作:

  • Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui
  • Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
  • Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers

您可以在他们的 documentation 上阅读有关该软件包的更多信息。 。

<小时/>

在 Android 设备(或更具体地说,Android 设备上的 Chrome 移动网络浏览器)上,启用 PWA 的网络应用将收到提示,鼓励用户将 PWA 添加到主屏幕。它可能看起来像这样:

Image credits: Andy Osmani

图片来源:Andy Osmani (Getting started with Progressive Web Apps)

另一方面,iOS 不支持 PWA 安装提示。

用户只能通过点击“添加到主屏幕”按钮将其添加为 PWA。对于那些想知道的人,OP 指的是:

enter image description here

图片来源:Expo

iOS 设备上的 PWA 需要以下类型的资源文件(触摸图标启动画面)。

1) 触摸图标

在index.html的标题标签上,您必须添加<link rel="apple-touch-icon" sizes="192x192" href="/example.png"> ,像这样:

<head>

<link rel="apple-touch-icon" sizes="192x192" href="/example.png">

</head>

请注意,图标大小应至少为 180x180 像素或 192x192 像素。您可以在 documentation 上阅读有关良好实践的信息。 .

2) 启动画面

您将使用 rel 属性 apple-touch-startup-image在 iOS 设备上启用启动屏幕。

<head>

<link
rel="apple-touch-startup-image"
media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
href="example2.png"
/>

</head>

这是一个working example by Evan Bacon触摸图标需要完整的标签列表

您还可以查看此blog查看 iOS 支持的 PWA 功能列表。

当然,有一种阴谋论称,苹果有意放慢 PWA 的采用,因为可能会与其原生应用商店发生竞争,而应用商店是该公司的巨大收入来源。我留给你来决定这是否属实🙃

关于ios - 在 iOS 上为启用 PWA 的应用程序安装到主屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56007571/

58 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com