# 添加到主屏幕（iOS、iPadOS）

**URL:** <https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897>\
**Category:** Theme component\
**Tags:** official, ios-add-home-screen\
**Created:** [2023年六月1日 14:48 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897 "2023-06-01T14:48:51Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ClawdiaWolf](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clawdiawolf/32/262518_2.png) [@ClawdiaWolf](https://meta.discourse.org/u/ClawdiaWolf)\
**Post date:** [2023年六月11日 08:51 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/21 "2023-06-11T08:51:29Z")

</div>

事后看来，我可能应该问你是否检查过。 🙂

我倾向于忘记，因为我是注册开发者，所以很早就接触到测试版，有时会忘记不是每个人都在发布日更新。 🙂

---

<div class="post-metadata">

**Author:** ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)\
**Post date:** [2023年六月11日 08:58 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/22 "2023-06-11T08:58:17Z")

</div>

> [@dfabulich](#):
>
> 我建议默认文本应提及推送通知

我同意，因为这是私有托管站点（与 Hub 应用程序相比）的主要优势。

但是代码是否检查 iOS 版本是否为 16.4 或更高？如果不是，提及通知就没有意义（而且可以说，提及 A2HS 也没有多大意义）。我不知道 Ruby，但它似乎只是检查你使用的是 iPhone 还是 iPad：

> <https://github.com/discourse/discourse-apple-add-to-homescreen/blob/94bcee284d97127f60ca07406eb9fc9bc35046ba/javascripts/discourse/components/add-to-homescreen.js#L33>

如果我理解错了，我很抱歉。

---

<div class="post-metadata">

**Author:** ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)\
**Post date:** [2023年六月12日 13:42 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/23 "2023-06-12T13:42:17Z")

</div>

> [@Jonathan5](#):
>
> 抱歉，如果我理解错了。

你理解对了！不过这是 Javascript，不是 Ruby。😄

---

<div class="post-metadata">

**Author:** ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)\
**Post date:** [2023年六月12日 19:32 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/24 "2023-06-12T19:32:55Z")

</div>

抓错了！ 🙂

---

<div class="post-metadata">

**Author:** ![hoangviet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangviet/32/174417_2.png) [@hoangviet](https://meta.discourse.org/u/hoangviet)\
**Post date:** [2023年六月13日 11:14 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/25 "2023-06-13T11:14:44Z")

</div>

我也想在Android上安装论坛，就像在这个主题中的iOS一样。如何在Android上操作？\n谢谢大家

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2023年六月13日 12:54 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/26 "2023-06-13T12:54:33Z")

</div>

打开 Chrome，点击三个点，然后选择“安装应用”… 点击“安装”。

---

<div class="post-metadata">

**Author:** ![hoangviet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangviet/32/174417_2.png) [@hoangviet](https://meta.discourse.org/u/hoangviet)\
**Post date:** [2023年六月13日 14:44 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/27 "2023-06-13T14:44:33Z")

</div>

我的意思是，在我的论坛（使用 discourse 平台）上，我希望 Android 用户像这样安装组件应用程序。

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2023年六月13日 16:44 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/28 "2023-06-13T16:44:44Z")

</div>

在 Android Chrome 浏览器上显示 Discourse 论坛时会出现这种情况。

开箱即用还有一个横幅提示，例如：

 ![Screenshot_20230613-174923](https://global.discourse-cdn.com/meta/original/4X/e/7/3/e7397fd1e8ff7b7298d1470a4fc3772c77f85bec.png)

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/pwa-install-banner.js#L41-L46](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/pwa-install-banner.js#L41-L46)

---

<div class="post-metadata">

**Author:** ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)\
**Post date:** [2023年七月8日 00:53 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/29 "2023-07-08T00:53:36Z")

</div>

嘿，各位！我刚在论坛上安装了这个组件，但它有一个重大错误：桌面版、移动版和应用版都变成了无限滚动，而且我无法再点击任何按钮了。我的运气好在我还没在电脑上刷新页面，所以一发现问题就能快速禁用它。希望这对大家有帮助。🙂

---

<div class="post-metadata">

**Author:** ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)\
**Post date:** [2023年八月21日 21:58 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/30 "2023-08-21T21:58:18Z")

</div>

你还遇到这种情况吗？我无法重现。

---

<div class="post-metadata">

**Author:** ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)\
**Post date:** [2023年八月22日 20:17 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/31 "2023-08-22T20:17:48Z")

</div>

嘿，乔丹！我没再试过——我也不打算再试了。

---

<div class="post-metadata">

**Author:** ![what](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/what/32/264194_2.png) [@what](https://meta.discourse.org/u/what)\
**Post date:** [2024年一月17日 04:16 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/32 "2024-01-17T04:16:18Z")

</div>

Add to Homescreen 提示出现在 discoursehub 应用上

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2024年一月25日 17:08 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/33 "2024-01-25T17:08:32Z")

</div>

我也注意到这也会出现在 iOS 上的 Chrome 中，这没有帮助。

理想情况下，它应该为非 Safari 浏览器显示不同的消息 - 即

> 要将此安装到您的设备上，请在 Safari 中打开它  
> 或类似内容。

---

<div class="post-metadata">

**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\
**Post date:** [2024年一月25日 19:42 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/34 "2024-01-25T19:42:57Z")

</div>

iOS Chrome 自 iOS 16.4 起支持“添加到主屏幕”。

您仍然需要点击一个分享按钮，它看起来像一个带有向上箭头的框，但在 iOS Chrome 中，该按钮会出现在屏幕顶部的 URL 栏中；URL 栏可能会折叠，因此分享按钮默认可能不可见。

因此，消息不需要更改为“在 Safari 中打开”，但如果能正确猜测分享按钮的位置就更好了。在 iPhone Safari 中，它出现在页脚的中央，可能会被折叠。在 iPad Safari 中，它出现在右上角，不会被折叠。

在 iPhone Chrome 中，它出现在右上角，可能会被折叠。在 iPad Chrome 中，它仍然出现在右上角，但不会被折叠。

---

<div class="post-metadata">

**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\
**Post date:** [2024年一月25日 19:45 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/35 "2024-01-25T19:45:05Z")

</div>

我一直在关注其他人如何指导用户在 iOS 上安装 PWA，我看到一种常见的模式是使用一个可点击的横幅打开一个新的浏览器标签页，指向一个_不会滚动_的单独的“安装 PWA”页面。

这可以确保该页面上的 URL 栏不会折叠，方便用户找到并点击“共享”按钮。

（当然，打开共享表单后，他们仍然需要向下滚动到“添加到主屏幕”，这是一个痛点，但任何能减少摩擦的地方都有帮助……）

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2024年一月26日 01:03 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/36 "2024-01-26T01:03:00Z")

</div>

> [@dfabulich](#):
>
> 自 iOS 16.4 起，iOS Chrome 支持“添加到主屏幕”。

我之前没意识到这一点——我确信我曾在某处读到过，必须通过 Safari 才能安装 PWA。那么 TC 就相当准确了！

我遇到的一个问题是，具有重要企业控制的 iPhone 可能会阻止网页通知（我的就是），这真的很麻烦。

---

<div class="post-metadata">

**Author:** ![microhit](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/microhit/32/447960_2.png) [@microhit](https://meta.discourse.org/u/microhit)\
**Post date:** [2024年四月13日 19:02 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/37 "2024-04-13T19:02:50Z")

</div>

“您想在此设备上安装 \_\_\_ 论坛吗？”

如果用户不小心关闭此弹出窗口，我能期望它再次打开吗？

---

<div class="post-metadata">

**Author:** ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)\
**Post date:** [2024年四月14日 04:59 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/38 "2024-04-14T04:59:22Z")

</div>

> [@microhit](#):
>
> 我能期望它再次开启吗？

根据我的经验，通常只需退出论坛然后重新登录即可触发。

---

<div class="post-metadata">

**Author:** ![microhit](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/microhit/32/447960_2.png) [@microhit](https://meta.discourse.org/u/microhit)\
**Post date:** [2024年四月18日 17:59 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/39 "2024-04-18T17:59:58Z")

</div>

谢谢

我注意到的另一件事是，安装应用程序后，徽标不会按比例缩小，看起来格格不入。

有人知道“品牌”部分使用的徽标是什么吗？

---

<div class="post-metadata">

**Author:** ![justinm](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@justinm](https://meta.discourse.org/u/justinm)\
**Post date:** [2025年七月30日 23:46 UTC](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897/40 "2025-07-30T23:46:55Z")

</div>

嘿，感谢您制作这个主题组件！这对我来说非常有用 😃

我有一些反馈：有些人不知道分享按钮是什么，所以用图标而不是按钮名称来显示会更有帮助。

您可以使用此 `pwa_text` 来实现：

```plaintext
Install <b>%{siteTitle}</b> on your iOS device. Tap <img height="25" width="20" src="https://help.apple.com/assets/683A54F5227CBBDB98051B96/683A54FC545676DF600F97D4/en_US/d26fe35d3438fe81179a80c2b6c9b0c9.png" /> and then <b>Add to Home Screen.</b>

```

它看起来像这样：

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/3/5/135e758e5952bd610e15fe4b04c6a6ea92babfb4.png)

[上一頁](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897.md?page=1)

[下一頁](https://meta.discourse.org/t/add-to-home-screen-ios-ipados/266897.md?page=3)
