WKWebViewでダウンロードしてファイル保存した画像を表示する – Cordova 10の場合 –

keiji_asial

Cordova

Pocket

Monacaチームの小田川です。

2020年11月19日からMonacaでのCordova 10サポートが開始されました。

Cordova 10では、iOSプラットフォームのバージョンが「6系」にアップデートされています。iOSプラットフォーム6系からは、UIWebViewサポートが廃止され、WKWebViewのみの対応になっています。

WKWebViewでは、「file:」スキームに対してアクセス制限があるため、外部ファイルにアクセスする場合は、カスタムスキームを使用する必要があります。

Monacaで提供しているCordova 10用のテンプレートでは、カスタムスキームとしてmonaca-app:が設定されています。

WKWebViewで画像ファイルをダウンロードして、アプリ内に保存した画像ファイルを表示する場合、Cordova 9.0では、保存した画像ファイルをblobデータで取得し、window.URL.createObjectURLで取得したURLを使用する必要がありました。詳しくは、WKWebView環境でダウンロードした画像を表示してみるを参照してください。

iOSプラットフォーム6系からは、「file:」スキームパスをカスタムスキームパスに変換する、

window.WkWebView.convertFilePath()

が、提供されています。

アプリ内に保存した画像ファイルを表示する

サンプルでは、Fileプラグインを使用しています。Fileプラグインのcordova.file.documentsDirectoryから取得できるDocumentsフォルダーパスにダウンロードしたファイルを保存しています。保存したファイルの「file:」スキームパスをwindow.WkWebView.convertFilePath()でカスタムスキームパスに変換することで、画像を表示することができます。

<script>
  function downloadFile() {
    // ファイル保存ディレクトリに cordova.file.documentsDirectory を設定
    window.resolveLocalFileSystemURL(cordova.file.documentsDirectory, function (dirEntry) {
      var fileName = "sample.png";
      var mimeType = "image/png"
      var xmlHttpRequest = new XMLHttpRequest();

      xmlHttpRequest.open("GET", "https://cordova.apache.org/static/img/cordova_bot.png", true);
      xmlHttpRequest.responseType = 'blob';

      xmlHttpRequest.onload = function() {
        if (this.status == 200) {
          var blob = new Blob([this.response], { type: mimeType });

          // ファイルを保存
          dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {
            fileEntry.createWriter(function (fileWriter) {
              fileWriter.onwriteend = function() {
                // 「file:」スキームパスをカスタムスキームパスに変換
                var url = window.WkWebView.convertFilePath(fileEntry.toURL());
                
                // 画像を表示
                document.getElementById('img1').src = url;
              };

              fileWriter.onerror = function(err) {
                console.log("Failed file write: " + err.toString());
              };

              // ファイルへ書き込み
              fileWriter.write(blob);
            });
          });
        }
      };

      // ファイルをダウンロード
      xmlHttpRequest.send();

    }, function(err) {
      console.log('error: resolveLocalFileSystemURL');
    }); 
  }
</script>

<body>
  <input type="button" value="downloadFile" onclick="downloadFile()" />
  <img id="img1" />
</body>