Web View表示時のヘッダー・フッター重複を回避する方法

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

この問題を回避するには、アクセス元がAppifyであることを判別し、オンラインストア側のヘッダーやフッターを非表示にする実装を行う必要があります。

Appifyでは、Web Viewアクセス時に専用のUser-Agentを付与しています。

そのため、Shopify側でUser-Agentを判別し、表示するコンテンツを切り替えることで、AppifyからWeb View経由でオンラインストアを表示した場合に、オンラインストアのヘッダーやフッターを非表示にすることができます。

Appifyで送信している「User-Agent」

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>