쿠키로 푸터 내비게이션 강제 표시

[alanost (Alan)]

안녕하세요,
저는 iOS 기기를 위한 포럼 앱을 제작하고 있습니다. 다행히 PWABuilder라는 프로젝트가 있어 웹앱을 앱으로 패키징할 수 있는 완성된 XCode 프로젝트를 제공합니다. 이 방법은 제 Discourse 포럼에서도 잘 작동했지만, 내비게이션을 쉽게 만들어 줄 뒤로 가기 버튼이나 유사한 기능이 없습니다.

PWABuilder로 생성된 iOS 앱 (내비게이션 푸터 없음):

iOS PWA에는 뒤로 가기 버튼이 있는 푸터 바가 있습니다. 하지만 아직 iOS PWA 외부에서 이 푸터를 표시할 방법을 찾지 못했습니다.

iOS PWA에는 내비게이션 푸터가 있지만, 외부에서 이를 강제 표시할 수 없습니다 (간편한 방법을 찾지 못함):

그렇다면 제 질문은 이렇습니다: 이 푸터를 WKWebView 내부에서도 표시할 수 있을까요? 또한 해결책에 대한 아이디어도 있습니다. PWABuilder로 생성된 앱은 사용 시 쿠키를 설정하는 기능이 있습니다. 사용자가 "mobile_footer_nav"와 같은 쿠키를 가지고 있을 때마다 이 내비게이션 푸터를 표시하면 어떨까요? 그렇게 하면 문제가 해결될 것입니다.

PWABuilder로 생성된 앱 내에서 설정할 수 있는 옵션 (앱 사용 시 쿠키 설정)

개발 팀이 이 문제를 살펴봐 주시면 매우 감사하겠습니다.

(DiscourseHub 앱이 있다는 것은 알고 있지만, 포럼을 위한 별도의 앱이 더 우아한 선택이며 사용자가 사용하거나 이해하기가 더 쉽습니다.)

[Johani (Joe)]

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

테마에서 쿠키를 확인하기 위한 추가 조건을 만들 수 있습니다. 예를 들어 다음과 같이요.

const isWKWebView = () => {
  // 쿠키를 확인하고 존재하면 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>

테마의 헤더 탭에, 또는 원격 테마를 사용하는 경우 이니셜라이저에 이 코드를 추가하세요.

[alanost (Alan)]

빠른 도움 주셔서 정말 감사합니다. 불행히도 오류가 발생합니다.

@Johani

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // check and return your condition
  };

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

이 코드 줄들을 테마 헤더에 작성하고 isWKWebView()에 쿠키 확인 기능도 추가했습니다. 쿠키가 없으면 아무 일도 일어나지 않습니다. 현재까지는 이렇게 작동합니다. 하지만 쿠키가 있으면 이 바가 표시되지 않고 콘솔에 "TypeError: Attempted to assign to readonly property."라는 오류가 표시됩니다.

[Johani (Joe)]

일단 로컬에서만 시도해 봤기 때문에, 그래서인 것 같기도 해요.

다음처럼

applicationController.set("showFooterNav", true);

을 사용해 보세요.

applicationController.showFooterNav = true;

대신 말이에요.

해당 변경 사항으로 게시글을 수정할게요.

[alanost (Alan)]

완벽하게 작동합니다! 정말 감사합니다

제 최종 코드:

<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>