App Bridge 2.0.5以上を使用していない埋め込みアプリは、新しいタブでユーザーをリダイレクトします

1. 技術的課題の定義と現状分析

Shopifyで埋め込みアプリを運用している開発者と事業者は、新たな要件に対応する必要があります。具体的には、埋め込みアプリがadmin.shopify.comで正常に動作するためには、以下の条件を満たす必要があります。

• Content Security Policyにadmin.shopify.comが含まれていること
• アプリがApp Bridge 2.0.5以上を使用し、hostパラメータを正しく実装していること（App Bridge 3.0の使用が推奨されています）

この要件を満たさない場合、ユーザーは新しいタブで旧管理ドメインにリダイレクトされ、元のタブではリダイレクトされたことを通知するバナーが表示されます。

2. 技術的ソリューションの提案

旧管理ドメインへのリダイレクトを防ぐためには、上記の要件を満たすようアプリをアップデートする必要があります。これにより、ユーザーは新しいタブを開くことなく、現在のタブでアプリを使用することができます。

3. 実装手順とコード例

まず、Content Security Policyにadmin.shopify.comを追加します。これはアプリがadmin.shopify.comからのリクエストを受け入れるようにするためです。

Content-Security-Policy: default-src 'self' https://admin.shopify.com

次に、アプリをApp Bridge 2.0.5以上にアップデートし、hostパラメータを正しく実装します。

import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: 'your-api-key',
  shopOrigin: 'your-shop-origin',
  host: 'your-host',
});

// Redirect to admin.shopify.com
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.ADMIN_PATH, '/');

4. パフォーマンス・コスト分析

このアップデートは、ユーザーがアプリを使用する際のユーザビリティを向上させます。新しいタブにリダイレクトされると、ユーザーは元のタブと新しいタブの間を行き来する必要があり、これがユーザー体験の低下を招く可能性があります。そのため、このアップデートはユーザーの満足度を高めるだけでなく、アプリの利用率を向上させる可能性もあります。

5. 実装時の注意点・ベストプラクティス

アップデート後、パートナーが所有する開発ストアでアプリをテストすることを強く推奨します。リダイレクトが発生した場合、アプリがadmin.shopify.comのバナー下で正しくロードされていることを確認してください。

6. 次のステップ・発展案

ShopifyはApp Bridge 3.0の利用を推奨しています。App Bridge 3.0にアップグレードすることで、さらなるパフォーマンス改善や新機能の利用が可能となります。

参考記事: Embedded Apps not on App Bridge 2.0.5 or higher will redirect merchants to a new tab