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

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()でカスタムスキームパスに変換することで、画像を表示することができます。

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

注意点として、WKWebViewでは、「cdvfile:」スキームをサポートしていないため、window.WkWebView.convertFilePath()を使用して「cdvfile:」スキームパスをカスタムスキームのパスに変換することはできません。

おわりに

Cordova 10でアプリ内に保存されている画像ファイル等にアクセスできない場合は、一度、window.WkWebView.convertFilePath()を使用して、「file:」スキームパスをカスタムスキームパスに変換して試してみてください。