alanost
2021 年 10 月 31 日午前 12:17
1
こんにちは、
iOS デバイス用のフォーラムアプリを作成中です。幸いにも、ウェブアプリをアプリとしてパッケージ化するための準備済みの Xcode プロジェクトを提供する「PWABuilder」というプロジェクトがあります。これは私の Discourse フォーラムでも非常にうまく機能しましたが、ナビゲーションを容易にする戻るボタンや同様の機能がありません。
PWABuilder で生成された iOS アプリ（ナビゲーションフッターなし）：
一方、iOS PWA には戻るボタンがあるフッターバーが表示されます。ただし、iOS PWA 以外でこれを表示する方法はまだ見つけていません。
iOS PWA にはナビゲーションフッターがありますが、それを強制的に外部で表示させる方法（簡単な方法が見つかりませんでした）：
ここで質問です：このフッターを WKWebView 内でも表示することは可能でしょうか？また、解決策のアイデアもあります。PWABuilder で生成されたアプリには、使用時にクッキーを設定する機能があります。「mobile_footer_nav」というクッキーが設定されている場合にのみ、このナビゲーションフッターを表示するのはどうでしょうか？そうすれば問題は解決します。
PWABuilder で生成されたアプリ内で設定可能なオプション（アプリ使用時のクッキー設定）：
開発チームがこれを確認してくださることを心より願っております。
（DiscourseHub アプリという選択肢もありますが、フォーラム用の個別のアプリの方がよりエレガントで、ユーザーにとっても使いやすく理解しやすいオプションです。）
「いいね！」 1
Johani
2021 年 10 月 31 日午前 2:22
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 サイト内）で、クッキーをチェックする追加の条件を作成することができます。以下のようにします。
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>
これは、テーマのヘッダータブ、またはリモートテーマを使用している場合はイニシャライザーに記述します。
「いいね！」 5
alanost
2021 年 10 月 31 日午前 8:58
3
迅速なご対応、ありがとうございます。残念ながらエラーが発生します。
上記のコード行をテーマのヘッダーに記述し、isWKWebView() 内にクッキー確認機能を追加しました。クッキーがない場合は何も起こりません。これは現在機能しています。しかし、クッキーがある場合、このバーは残念ながら表示されず、コンソールに「TypeError: Attempted to assign to readonly property.」というエラーが表示されます。
「いいね！」 1
Johani
2021 年 10 月 31 日午前 9:05
4
私はローカル環境でのみ試したため、それが理由かもしれません。
applicationController.set("showFooterNav", true);
を代わりに使ってみてください。
applicationController.showFooterNav = true;
その変更で投稿を編集します。
「いいね！」 2
alanost
2021 年 10 月 31 日午前 9:14
5
完璧に動作します！ありがとうございます
最終的なコード：
<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
