筆者は普段サーバサイドのエンジニアとしてWebシステムの開発をしているが、
担当している案件でスマホのネイティブアプリ内のWebView内にコンテンツを組み込む案件がありました。
その際に、URLスキームを使ってネイティブアプリとWebViewのコンテンツ間の連携でハマったので、備忘録として残しておきます。
本記事はあくまでサーバサイドの立場からの対処方法になります。
URLスキームの書き方
筆者ははじめ、下記のコード用にfetch関数での読み込みを想定していました。
しかしURLスキームはネイティブアプリのWebViewのURLローダーの部分で実行する仕組みのため、
fetch関数のようなJavaScriptの非同期処理では実行が出来ませんでした。
そこで以下のように location.href にURLスキームを設定し、
ネイティブアプリのWebViewに読み込ませることで問題を解消しました。
// 間違い
fetch("【URLスキーム】");
// 正解
location.href = "【URLスキーム】";
// 参考例
location.href = "appli://test";
最後に
ちなみに以前、スマホアプリのエンジニアとして案件を担当した際に、上記のようなケースの経験がありました。
今回はサーバサイドの案件の担当者として参画したので、アプリの開発にノータッチの状況は初でした。
久々に対応すると忘れていることも多いので、注意が必要ですね。。。