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プラグインを 有効 にしてご利用ください。