AppifyでWeb Viewを表示する際のヘッダー/フッター重複を回避する方法

AppifyでWeb Viewを使用してオンラインストアを表示する際、モバイルアプリとオンラインストアのヘッダーやフッターが重複して表示されることがあります。

この問題を回避するためには、オンラインストアへのアクセス元がAppifyである場合に、オンラインストアのヘッダーやフッターを非表示にする実装を追加する必要があります。

具体的には、User-Agentを利用してShopifyにて、Appifyで表示されるWebViewのWebページ内容を切り替えることにより、AppifyからWeb Viewでオンラインストアを表示する際にオンラインストアのヘッダーやフッターを非表示にすることができます。

AppifyでWeb Viewを表示する際、User-Agentリクエストヘッダーには以下のような値が設定されています。これにより、Appifyからのアクセスを識別できます。

• iOS: iOS Appify {アプリのバージョン}

• Android: Android Appify Android

Webページ内でnavigator.userAgentを使用して、リクエストヘッダーからUser-Agentを取得します。

取得したUser-Agentに「Appify」の文字列が含まれているかを確認します。含まれている場合、Appify経由でのアクセスと判断できます。

User-Agentの送信文字列

• iOS

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Appify/[APPIFY_VERSION]

• Android

Mozilla/5.0 (Linux; Android 14; [DEVICE_MODEL] Build/[BUILD_ID]; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/[CHROME_VERSION] Mobile Safari/537.36 Appify/[APPIFY_VERSION]

上記の条件が満たされた場合、オンラインストアのヘッダーやフッターを非表示にする処理を実行します。

設定の1と2の実装方法例です。

<script>
  document.addEventListener('DOMContentLoaded', function() {
　　// userAgent を取得
    var userAgent = navigator.userAgent || '';
    
    // userAgent に "Appify" という文字列が含まれているかを判定
    if (userAgent.indexOf('Appify') !== -1) {
       // 含まれている場合の処理を実装する
    }
  });
</script>

上記は実装方法例であり、動作を保証するものではないのでご了承ください。