LoginSignup
0
0

More than 3 years have passed since last update.

WKWebViewでローカルリソースにAjaxアクセスする場合について

Posted at

Monacaで利用しているCordovaでは、ローカルリソースにアクセスする場合、file://スキームが使用されます。

WKWebViewでは、セキュリティーの制約により、ローカルリソースに対して「file://スキーム」を使用してAjaxアクセスすることができません。この問題に対応するために、Monacaから Custom Schemeプラグイン がリリースされました。

注意点

  • このCustom Schemeプラグインは、iOS 11以降 から利用することができます。 そのため、 以下のように config.xml にiOSの Deployment Target を指定する必要があります。
config.xml
  <platform name="ios">
    <preference name="deployment-target" value="11" />
  </platform>
  • Custom Schemeプラグインの動作を確認する場合は、デバッグビルドで確認する必要があります。WkWebView が 有効 になっているカスタムビルドデバッガーでは、デバッガー内で設定が行われているため Custom Schemeプラグイン無効 の状態でもローカルリソースにAjaxアクセスすることができます。

Custom Schemeプラグインの利用方法

Custom Schemeプラグインを利用する場合は、Monacaプロジェクトの

設定 > Cordovaプラグインの管理 > 利用可能なプラグイン > Custom Scheme

有効 にします。その他の設定は、必要ありません。

Custom Schemeプラグインの動作確認

今回は、ローカルリソースとしてJSONファイルにAjaxアクセスして動作確認を行ってみたいと思います。

Monacaプロジェクトの www フォルダーに検証用のJSONファイルを作成します。検証用データは、以下を使用します。ファイル名は test.json にしています。

test.json
{
  "name": "Monaca", 
  "age": 1000
}

検証コードは、以下になります。
今回、Ajaxアクセスには Fetch API を使用しています。

<script>
  function test01() {
    fetch("test.json")
      .then(function(response) {
        alert("response.status: " + response.status);
        alert("response.ok: " + response.ok);

        if (response.ok) {
          response.json().then(function(json) {
            alert(JSON.stringify(json));
          })
        }
      })
      .catch(function(error) {
        alert("error: " + error);
      });
  }
</script>

<body>
  <input type="button" value="Fetch APIテスト" onclick="test01()" />
</body>

MonacaプロジェクトのiOSアプリ設定画面から WkWebView を 有効 にして、Custom Schemeプラグインを 無効 にしている場合は、以下のようなエラーが出力されます。

TypeError: Cross origin requests are only supported for HTTP.

iOSアプリ設定画面から WkWebView を 有効 にして、Custom Schemeプラグインも 有効 にしている場合は、正常に test.json にアクセスされ、以下の内容が出力されます。

response.status: 200
response.ok: true

{"name":"Monaca","age":1000}

おわりに

WKWebViewを使用してローカルリソースにAjaxアクセスする必要がある場合は、Custom Schemeプラグインを 有効 にしてご利用ください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0