埋込型APを迅速かつ確実に読み込む方法

埋込型APはローディングが遅く、ユーザーにストレスを与える。アプリユーザーは仕事ができないので、あなたのアプリに対してネガティブな印象を持ってしまいます。さらに悪いことに、まったく読んでいなければ、レポートを確認して原因を探るしかありません。

APロードの遅延や失敗は、主にShopifyのAP認証に起因する。本記事では、埋込型APの認証の仕組みと、このもどかしい問題に対する新たな解決策を紹介します。

埋込AP型はどう読まれるのか？

アプリをロードしたリンクをクリックすると、数秒後に画面に表示される。水中で何が起きているのでしょう?

まずShopifyは管理画面でiframeを作成し、APのURLを設定する。ブラウザがAPに要求すると、APが以前に設定したあるcookieがそこに含まれる。クッキーに含まれるセッション情報によって、APは誰がアクセスしているかを識別する。

クッキーがなかったり、セッションにユーザ情報が含まれていない場合もある。この場合、APはShopifyのOAuthサービスにユーザーをリダイレクトし、OAuthはユーザーがAPをインストールしたことを確認すると、ユーザーをAPにリダイレクトする。このとき、ユーザー識別情報はアプリに渡される。APはユーザ情報を保持し、セッションcookieにリンクする。したがって、今後の相互作用はOAuthサービスの関与なしに行われる。

APは、ユーザが誰であるかを識別できるので、ユーザの特定の情報に基づいて読み取ることができる。

アプリの読み込みが遅くなる原因

OAuthサービングへのリダイレクトのプロセスは非常に遅い。セッションcookieが設定されているため、iframe内でのリダイレクトはできない。その代わり、ブラウザ全体がリダイレクトされる。OAuthに必要なすべてのリダイレクトは、最終的にShopify adminとAPに埋め込まれたページにユーザーをリダイレクトするだけである。多くの場合、ブラウザのリダイレクションはユーザーの視点から見るとシームレスである。しかし、リダイレクトが必要な数や、iframeとブラウザのトップレベルのフレームを交互に切り替えるジャンプのため、APのロード方向が定らず、遅いとユーザーは感じる。

全体の流れは次のようになります。

1 .埋込iframe:APの読み込み

2トップフレームワーク:APをShopify OAuthにリダイレクトする

3トップフレームワーク:Shopify OAuthをAPにリダイレクトする

4 .トップフレーム:APを読み出し、iframeでないことを認識し、adminにリダイレクトする

5トップフレームadminの読み出し

6埋込iframe:APの読み込み

各段階での低下を見せ、最後を遺憾を作り上げるux。全体のロード時間は10秒程度に増加しており,根気のないユーザーには非常に長く感じられる。

全く読み取れないAPの時の原因

ブラウザベンダーは過去数年間、ユーザーのプライバシー保護に取り組んできた。データの扱い方を自分でコントロールできるので、ユーザーにとってはいいことです。特にブラウザベンダーは、クロスサイトトラッキングを防ぐために努力してきた。

Shopifyも関連アプリも、ブラウザベンダーが止めたい「トラッカー」ではない。しかし、埋込型AP(iframe)を充実させるために使っている技術は、多くのサイト横断トラッキングで使われている技術と同じです。好み追跡の結果、safariとかitp(知能)などのブラウザで多追跡サイトの設置規定に基づき、shopify応用の機能を妨害した。

使用制限のうち最も密接な関係はiframeクッキー(第3者のクッキー)の制限はない。ユーザーshopify応用クッキーを使って保存会话なので、oauth流は必要だ。第三者のcookieが制限されると、その情報へのアクセスや保存ができなくなり、読み取りエラーが発生しやすくなる。2020年8月、1日平均5500回アプリノードのエラーが発生。