# 让将 Discourse 安装为 PWA 更加容易

**URL:** https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034
**Category:** Feature
**Created:** [2020年七月17日 13:24 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034 "2020-07-17T13:24:54Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![John\_Lehmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_lehmann/32/140084_2.png) [@John\_Lehmann](https://meta.discourse.org/u/John_Lehmann)
#### Post date: [2021年二月25日 21:01 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/22 "2021-02-25T21:01:34Z")

</div>

无论我怎么做，这个我转换成 PNG 的文件仍然显示为 JPEG。起初我以为预览（Preview）转换出了问题，但后来我使用了应该更可靠的 Affinity Photo。

我不记得更改过该设置，因为它旁边没有“重置”选项。

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/b/8b5d340bdd9c1a587c5ea1705d08f959bcc38104.png)

当我上传另一张确实是 PNG 格式的图片时，我发现类型仍然被固定住了。Discourse 似乎特别想转换这个文件。有什么建议吗？

---

<div class="post-metadata">

### Author: ![jamie.wilson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamie.wilson/32/185466_2.png) [@jamie.wilson](https://meta.discourse.org/u/jamie.wilson)
#### Post date: [2021年二月25日 21:33 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/23 "2021-02-25T21:33:34Z")

</div>

> <https://github.com/discourse/discourse/commit/70050a8ba365628394fbf7597daf75891328d991>
>
> \`convert\_to\_jpeg!\` is only called if \`convert\_png\_to\_jpeg?\` and/or \`should\_alter…\_quality?\` is true.
> 
> \`convert\_png\_to\_jpeg?\` can be disabled by setting \`SiteSetting.png\_to\_jpg\_quality\` to 100.
> 
> However, \`should\_alter\_quality?\` could be true if \`SiteSetting.recompress\_original\_jpg\_quality\` was lower than the quality of the uploaded file, regardless of file type.
> 
> This commits changes \`should\_alter\_quality?\` so that uploaded png files will use the \`SiteSetting.png\_to\_jpg\_quality\` value, rather than \`\`SiteSetting.recompress\_original\_jpg\_quality\` value.

您遇到了一个已知（尽管比较冷门）的 Bug，上述提交已修复该问题。不过，该提交尚未包含在 Discourse 的稳定版本中。

\_临时\_将 `recompress original jpg quality`（重新压缩原始 JPG 质量）设置为 100，应可阻止转换发生。

（……或者，您可以尝试降低导出 PNG 的质量，使其低于 `recompress original jpg quality` 设置的值。）

请务必在上传徽标后将该设置恢复为之前的值！

---

<div class="post-metadata">

### Author: ![John\_Lehmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_lehmann/32/140084_2.png) [@John\_Lehmann](https://meta.discourse.org/u/John_Lehmann)
#### Post date: [2021年二月25日 22:15 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/24 "2021-02-25T22:15:01Z")

</div>

我觉得我应该获得一枚徽章，因为我在一个星期内发现了两个 Discourse 的漏洞。🙂

不过，尽管我采取了上述两个步骤，文件仍然被转换成了 JPEG。我将设置调整为 100%，并将图像以 92% 的质量保存为 JPG，然后导出为 PNG（我无法直接更改 PNG 的质量？）。还有其他变通方法吗？或者我是不是哪里做错了？

---

<div class="post-metadata">

### Author: ![jamie.wilson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamie.wilson/32/185466_2.png) [@jamie.wilson](https://meta.discourse.org/u/jamie.wilson)
#### Post date: [2021年二月25日 23:57 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/25 "2021-02-25T23:57:41Z")

</div>

> [@John\_Lehmann](#):
>
> 然而，尽管我采取了这两个步骤，文件仍然被转换为 jpeg 格式。

切换到 `stable` 分支后，我可以复现这个（已知的）问题：

 ![Screen Shot 2021-02-25 at 6.47.52 PM](https://global.discourse-cdn.com/meta/original/3X/3/0/301968b869401735685ffb78ff94e4519a874e25.png)

但我无法用建议的变通方法复现该问题：

 ![Screen Shot 2021-02-25 at 6.47.11 PM](https://global.discourse-cdn.com/meta/original/3X/6/2/625c8178f85cbe6ef5b60bcbf37dbeaca3f56863.png)

说实话，我有点困惑！

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [2021年二月26日 01:26 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/26 "2021-02-26T01:26:18Z")

</div>

> [@JQ331](#):
>
> 请注意，据我所知，在 Mac 的 Safari 浏览器上没有 PWA 安装选项。

Mozilla Firefox 中也没有出现该选项。

> [@Falco](#):
>
> Discourse 默认就支持此功能。如果用户同时满足 Chrome 的 criteria 且用户等级为 TL1 或以上。

为什么在 iOS 设备上（尤其是现在它们已支持 PWA）没有出现安装横幅？

> [@codinghorror](#):
>
> 我可以确认，至少在我的 Chromebook 上，PWA 运行得非常出色！我已经为 Meta 和我们内部的 Discourse 都设置了 PWA 💪

是的，在我的 Pixelbook Go 上运行效果极佳。PWA 在 Chrome OS 上是必不可少的功能。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021年二月26日 02:35 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/27 "2021-02-26T02:35:02Z")

</div>

> [@anon82467725](#):
>
> 为什么安装横幅没有出现在 iOS 设备上（尤其是在它们现在支持 PWA 的情况下）？

因为 iOS 浏览器不支持此功能，且暂无添加该功能的计划。

---

<div class="post-metadata">

### Author: ![John\_Lehmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_lehmann/32/140084_2.png) [@John\_Lehmann](https://meta.discourse.org/u/John_Lehmann)
#### Post date: [2021年二月26日 12:57 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/29 "2021-02-26T12:57:39Z")

</div>

我之前建议过，为什么不在网站的某个位置添加一个按钮或链接，用于安装 PWA，正如[这篇文章](https://web.dev/promote-install/#simple-button)中所解释的那样。

 ![simple-button_mobile-crop](https://global.discourse-cdn.com/meta/original/3X/b/7/b7ea577a9c6b0700e2d76f21f600d051d1a2ac65.png)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021年二月26日 14:05 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/30 "2021-02-26T14:05:35Z")

</div>

我们几年前就已经有了：

> [@Encourage members to install WebApp](https://meta.discourse.org/t/encourage-members-to-install-webapp/138003/2?u=falco):
>
> We already have a PWA install promotion banner built-in. It is triggered after a logged in user hits Trust Level 1, and shows a banner at the top promoting the install.

---

<div class="post-metadata">

### Author: ![John\_Lehmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_lehmann/32/140084_2.png) [@John\_Lehmann](https://meta.discourse.org/u/John_Lehmann)
#### Post date: [2021年二月26日 14:18 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/31 "2021-02-26T14:18:18Z")

</div>

抱歉，我指的是为未安装 PWA 的用户提供一个不那么显眼但 **持久** 的按钮或链接，例如放在菜单中。

我认为这很有用，因为当有用户想要安装应用时，我们往往不清楚他们所处的具体状态，进行问答沟通又非常耗费精力。如果我们能提供一个非常可靠的“两步走”流程给用户，那就太好了：例如，进入汉堡菜单 → 安装应用。这样一来，我们就不必再担心他们的语言环境、访问次数、是否曾关闭过横幅或卸载过应用，以及他们使用的是哪种浏览器、该浏览器如何呈现安装选项等问题。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021年二月26日 14:44 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/32 "2021-02-26T14:44:56Z")

</div>

> [@John\_Lehmann](#):
>
> 如果能有一个可靠的两步流程供他们使用，那就太好了。

这 literally 就是现有的工作流程 😂

> [@John\_Lehmann](#):
>
> 进入汉堡菜单

 ![Screenshot_20210226-114357](https://global.discourse-cdn.com/meta/original/3X/0/f/0f9b8965827b16f099e61f7c595a85d1beb50f30.png)

> [@John\_Lehmann](#):
>
> 安装应用

 ![Screenshot_20210226-114404](https://global.discourse-cdn.com/meta/original/3X/5/b/5b94838d89e468a7d0a62b58445b8f67a46ef8de.png)

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2021年二月26日 14:53 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/33 "2021-02-26T14:53:17Z")

</div>

> [@Falco](#):
>
> 这 literally 就是现有的工作流程 😂

这里（包括我自己在内）的很多困惑可能源于：不同浏览器有不同的 PWA 安装选项：

1. Android Chrome（即默认浏览器）：我猜您发布的截图就是来自这里。看起来在这里，汉堡菜单中有一个“安装应用”选项。如果所有浏览器都能提供该选项就太好了，但听起来目前似乎无法实现。

2. iPhone Safari（默认浏览器）：汉堡菜单中没有安装按钮。要安装，需要点击分享图标（带向上箭头的方框），然后向下滚动找到“添加到主屏幕”。根据这里的讨论，我推测无法在汉堡菜单中添加该按钮。不过，这确实会将应用保存到主屏幕，但我不确定仅凭这一点是否足以赋予其 PWA 功能，例如保存之前的状态。

3. 桌面版 Chrome：在我的 Mac Chrome 浏览器中，汉堡菜单里没有安装按钮。它应该在那里吗？能否将其添加进去？

4. 桌面版 Safari：在我的 Mac Safari 浏览器中，汉堡菜单里也没有安装按钮。它应该在那里吗？能否将其添加进去？

---

<div class="post-metadata">

### Author: ![John\_Lehmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_lehmann/32/140084_2.png) [@John\_Lehmann](https://meta.discourse.org/u/John_Lehmann)
#### Post date: [2021年二月26日 15:03 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/34 "2021-02-26T15:03:33Z")

</div>

是的，@JQ331 说得对。

Falco 提出的方案是 Chrome 菜单。我所说的“汉堡菜单”指的是 Discourse 的菜单，而不是浏览器自带的菜单。由于上面有人指出该功能在 Safari 或 Firefox 中无法使用，因此该选项依赖于浏览器。假设它能够在这些浏览器中安装，但用户并未获得该选项，那么提供一个 Discourse 菜单选项似乎是最佳方案。此外，这还能提醒用户该选项的存在，否则他们可能永远不会去查看 Chrome 菜单。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021年二月26日 15:17 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/35 "2021-02-26T15:17:50Z")

</div>

您无法在任何由苹果控制的内容上添加安装按钮，苹果已多次表示，他们不希望开发者创建此类按钮。

> [@JQ331](#):
>
> 桌面版 Chrome：在我的 Mac 版 Chrome 浏览器的汉堡菜单中，我没有看到安装按钮。它应该在那里吗？能否将其添加进去？

对我来说它是存在的：

 ![ss](https://global.discourse-cdn.com/meta/original/3X/7/1/71c5af2f9eb5040e42c2ef0ab159868854511939.png)

在桌面版的地址栏中也能找到它。

您在自己的网站上看不到该按钮，是因为使用了 JPG 格式的图标问题。PWA 是一个快速变化的领域，相关标准也在不断调整。如果您希望获得最佳的 PWA 兼容性，建议使用我们的默认发布渠道。

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2021年二月26日 15:26 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/36 "2021-02-26T15:26:57Z")

</div>

> [@Falco](#):
>
> 对我来说它在那里：

我指的是 Discourse 的汉堡菜单（而不是 Chrome 菜单）。实际上，我现在看到安卓截图也是来自 Chrome 菜单，而非 Discourse 的汉堡菜单。

如果能在 Discourse 的汉堡菜单中添加该按钮就好了——用户会更频繁地看到它，而且在指导用户将其安装为 PWA 时也会更清晰。这可能不值得投入大量的开发精力，但会是一个贴心的改进。

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [2021年二月26日 22:08 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/37 "2021-02-26T22:08:54Z")

</div>

> [@John\_Lehmann](#):
>
> 由于上面有人指出它在 Safari 或 Firefox 中无法运行，因此该选项取决于浏览器。

Chromium 浏览器似乎是唯一显示安装提示的浏览器。Mozilla Firefox 和 Safari 基于不同的渲染引擎。

---

<div class="post-metadata">

### Author: ![surajmpatel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/surajmpatel/32/205724_2.png) [@surajmpatel](https://meta.discourse.org/u/surajmpatel)
#### Post date: [2021年五月16日 03:47 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/38 "2021-05-16T03:47:48Z")

</div>

我仅仅通过创建一个主题组件添加了该按钮。

只需创建一个新的主题组件。

在 header 中添加以下 JS 代码：

```html
<script>
    let deferredPrompt; // 允许显示安装提示
    const installButton = document.getElementById("install_button");

    window.addEventListener("beforeinstallprompt", e => {
      console.log("beforeinstallprompt 事件已触发");
      // 阻止 Chrome 76 及更早版本自动显示提示
      e.preventDefault();
      // 暂存事件以便稍后触发
      deferredPrompt = e;
      // 显示安装按钮
      installButton.hidden = false;
      installButton.addEventListener("click", installApp);
    });

    function installApp() {
      // 显示提示
      deferredPrompt.prompt();
      installButton.disabled = true;

      // 等待用户响应提示
      deferredPrompt.userChoice.then(choiceResult => {
        if (choiceResult.outcome === "accepted") {
          console.log("PWA 设置已接受");
          installButton.hidden = true;
        } else {
          console.log("PWA 设置已拒绝");
        }
        installButton.disabled = false;
        deferredPrompt = null;
      });
    }

    window.addEventListener("appinstalled", evt => {
      console.log("appinstalled 事件已触发", evt);
    });
</script>

```

并在需要安装按钮的位置放置以下 HTML：

`<button id="install_button" hidden>安装</button>`

该按钮默认隐藏，仅在 PWA 未安装时显示。

我已在 Chrome 上对此进行了测试。

---

<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: [2021年五月16日 09:22 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/39 "2021-05-16T09:22:54Z")

</div>

> [@surajmpatel](#):
>
> 创建一个主题组件。

太棒了！您是否考虑将其作为一个正式的主题组件？或者更好的是，修改“汉堡链接”主题组件以包含它？因为那里正是我想要它的位置！

---

<div class="post-metadata">

### Author: ![john\_scalton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_scalton/32/205241_2.png) [@john\_scalton](https://meta.discourse.org/u/john_scalton)
#### Post date: [2021年六月6日 15:17 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/40 "2021-06-06T15:17:41Z")

</div>

能否请您上传修改后的代码，以便在汉堡菜单中显示“安装应用”按钮？

---

<div class="post-metadata">

### Author: ![bengrover](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@bengrover](https://meta.discourse.org/u/bengrover)
#### Post date: [2022年八月11日 20:32 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/41 "2022-08-11T20:32:43Z")

</div>

我似乎无法让它正常工作。承认对这一切都很陌生。

我加载了组件，将 JavaScript 添加到了标头，并将组件设置为默认主题。

但是 HTML 脚本呢——是否可以在帖子中使用 HTML？似乎不行。如果不行，我还能在哪里有效地放置它？

谢谢！真的希望这能帮助我。

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [2022年八月13日 01:31 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/42 "2022-08-13T01:31:38Z")

</div>

我猜这只适用于安卓系统？

[上一頁](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034.md?page=1)

[下一頁](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034.md?page=3)