强制页脚导航与 Cookie

贡献 功能
1

您好，

我正在为我的论坛创建一个适用于 iOS 设备的 App。幸运的是，有一个名为 PWABuilder 的项目，它提供了一个现成的 XCode 项目，可将 Web 应用打包为 App。这对于我的 Discourse 论坛也非常有效，但目前没有返回按钮或类似功能，使得导航不够便捷。

使用 PWABuilder 生成的 iOS App（无导航底部栏）：

IMG_3321.PNG
IMG_3321.PNG750×1334 89.4 KB

不过，iOS PWA 中有一个底部栏，其中包含返回按钮。我尚未找到一种方法能在 iOS PWA 之外显示该底部栏。

iOS PWA 具有导航底部栏，但无法强制在外部显示（我尚未找到简单的方法）：

IMG_3322.PNG
IMG_3322.PNG750×1334 44.5 KB

现在我的问题是：这个底部栏是否也可以在 WKWebView 中显示？我还有一个解决思路。使用 PWABuilder 生成的 App 具备在使用时设置 Cookie 的功能。我们是否可以在用户拥有名为 “mobile_footer_nav” 的 Cookie 时显示该导航底部栏？这样问题就解决了。

在使用 PWABuilder 生成的 App 中可设置的选项（在使用 App 时设置 Cookie）：

Bildschirmfoto 2021-10-31 um 02.11.34
Bildschirmfoto 2021-10-31 um 02.11.341366×703 176 KB

如果开发团队能够查看此问题，我将非常感激。

（我知道有 DiscourseHub 应用，但为论坛单独开发一个 App 是更优雅的选择，也更容易让用户使用和理解。）

1 个赞
2

Discourse 根据某些条件渲染该页脚。页脚在此处添加。

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

showFooterNav 在此处定义。

discourse/app/assets/javascripts/discourse/app/controllers/application.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

如果其中任意一个为 true，导航栏将会显示。

isiOSPWA() 和 isAppWebview() 在此处定义。

discourse/app/assets/javascripts/discourse/app/lib/utilities.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

例如，isAppWebview() 的实现如下。

discourse/app/assets/javascripts/discourse/app/lib/utilities.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

您可以在主题（即您的 Discourse 站点）中创建一个额外的条件来检查 Cookie，方法如下：

const isWKWebView = () => {
  // 检查 Cookie 并在存在时返回 true
  // 或使用其他任何方法来检测用户是否正在使用您的应用程序
}

对于其他类，您通常可以按如下方式修改 showFooterNav()：

api.modifyClass("controller:application", {
  pluginId: "show-footer-nav",
  @discourseComputed
  showFooterNav() {
    // ...
  }
});

然而，这是应用程序控制器，这意味着它会在您的代码有机会执行之前被缓存。换句话说，您将无法修改该类。

尽管如此，您仍然可以通过以下方式更改 showFooterNav 的值：

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // 检查并返回您的条件
  };

  if (isWKWebView()) {
    const applicationController = api.container.lookup("controller:application");
    applicationController.set("showFooterNav", true);
  }
</script>

将其放在主题的 header 标签页中，或者如果您使用的是远程主题，则放在初始化器中。

5 个赞
Desktop PWA Navigation
3

非常感谢您的快速帮助。不幸的是，我遇到了一个错误。

我在主题的头部编写了这些代码行，并在 isWKWebView() 中添加了 cookie 检查功能。如果我没有 cookie，则不会发生任何变化。这目前可以工作。但是，如果我有 cookie，该栏 unfortunately 不会显示，并且在控制台中会显示错误 “TypeError: Attempted to assign to readonly property.”。

1 个赞
4

我只是在本地测试过，所以也许就是这个原因。

尝试使用

applicationController.set("showFooterNav", true);

而不是

applicationController.showFooterNav = true;

我会用这个修改更新帖子。

2 个赞
5

它运行完美！非常感谢 :slight_smile:

我的最终代码：

<script type="text/discourse-plugin" version="0.8">
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

if (getCookie("app-platform") != "") {
    const applicationController = api.container.lookup("controller:application");
    applicationController.set("showFooterNav", true);
}
</script>
2 个赞