在 iOS 上为启用 PWA 的应用安装到主屏幕
[英]Install To Home Screen on iOS for PWA enabled app
问题描述
I've added the pwa modules (or schematic) and I've setup my manifest.json file correctly.
我已经添加了 pwa 模块（或原理图）并且我已经正确设置了我的 manifest.json 文件。 On an Android device, my service workers are engaged, I get the install to home screen prompt and the address bar disappears and I can see the native look and feel.在 Android 设备上，我的 Service Worker 正在工作，我得到了安装到主屏幕的提示，地址栏消失了，我可以看到本机的外观和感觉。 However, on Chrome/Safari iOS there is no prompt.但是，在 Chrome/Safari iOS 上没有提示。 Is there anything I need to do programmatically/additionally?有什么我需要以编程方式/额外方式做的吗？
4 个解决方案
解决方案1
11 2019-05-07 01:04:07
iOS IOS
My PWA's index.html includes the following iOS specific meta tags:我的 PWA 的index.html包含以下 iOS 特定的元标记：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">
<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">
The "apple-mobile-web-app-capable" and the "apple-mobile-web-app-title" meta tags are required by Safari to show the 'Add to Home' screen: Safari 需要“apple-mobile-web-app-capable”和“apple-mobile-web-app-title”元标记来显示“添加到主页”屏幕：
Ref: PWA Tips and Tricks参考： PWA 提示和技巧
解决方案2
9 2019-05-06 15:02:14
Update March 2020 2020 年 3 月更新
While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets( splash images and touch icons ) for PWA support on iOS devices.虽然添加到主屏幕提示支持在 iOS 上仍然不可用，但pwacompat包（由 Google Chrome 团队开发）将允许您轻松生成所需的资产（启动图像和触摸图标）以在 iOS 设备上支持 PWA .
Installation:安装：
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head> .这将确保即使在不合规的设备/浏览器中也能支持您的 PWA，而无需在文档的<head>上手动指定链接标签。 More specifically, for the case of Safari, the pwacompat package will do the following:更具体地说，对于 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
You may read more about the package on their documentation .您可以在他们的文档中阅读有关该软件包的更多信息。
On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen.在 Android 设备（或更具体地说，Android 设备上的 Chrome 移动网络浏览器）上，启用 PWA 的网络应用程序将收到提示以鼓励用户将 PWA 添加到主屏幕。 It may look something like this:它可能看起来像这样：
Image credits: Andy Osmani (Getting started with Progressive Web Apps)图片来源： Andy Osmani（渐进式 Web 应用程序入门）
On the other hand, iOS does not support that PWA installation prompt.另一方面，iOS 不支持 PWA 安装提示。
Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button.用户只能通过点击“添加到主屏幕”按钮将其添加为 PWA。 For those who are wondering, the OP is referring to this:对于那些想知道的人，OP指的是：
The following types of asset files ( Touch icons , and Splash screens ) are required for PWAs on iOS devices. iOS 设备上的 PWA 需要以下类型的资产文件（触摸图标和启动画面）。
1) Touch Icons 1) 触摸图标
On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png"> , like this:在 index.html 的标题标签上，您必须添加<link rel="apple-touch-icon" sizes="192x192" href="/example.png"> ，如下所示：
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head>
Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel.请注意，图标大小应至少为 180x180 像素或 192x192 像素。 You may read up on the good practices on the documentation .您可以阅读文档中的良好实践。
2) Splash Screens 2) 启动画面
You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.您将使用 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>
Here is a working example by Evan Bacon of the full list of tags will need for the touch icons这是Evan Bacon的一个工作示例，其中包含触摸图标所需的完整标签列表
You may also check out this blog for the list of PWA features supported on iOS.您还可以查看此博客，了解 iOS 支持的 PWA 功能列表。
Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company.当然，有一种阴谋论认为，由于与原生 App Store 竞争的可能性，Apple 有意放慢了 PWA 的采用，这对公司来说是一个巨大的收入来源。 I leave it for you to decide if that is really true 🙃我把它留给你来决定这是否真的是真的🙃
解决方案3
2 2019-11-06 12:09:17
Here is a code snippet for detecting if the app is on IOS and triggering a popup to add to home screen:这是用于检测应用程序是否在 IOS 上并触发弹出窗口以添加到主屏幕的代码片段：
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.setState({ showInstallMessage: true });
}
解决方案4
1 2019-07-17 12:09:28
I use JavaScript in both iOS and on android to check if the app is in standalone mode and display a prompt on iOS and non-chrome browsers in android.我在 iOS 和 android 上都使用 JavaScript 来检查应用程序是否处于独立模式并在 android 中的 iOS 和非 Chrome 浏览器上显示提示。 I just let chrome do it's thing as it's efficient enough.我只是让 chrome 做这件事，因为它足够高效。 On iOS, only safari supports service worker installs for now.在 iOS 上，目前只有 safari 支持 Service Worker 安装。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.