浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Cordova】Android 9で画像が表示されない時の対処法

以前、「【Android】WebViewでURLで指定された画像が表示されないときの対処法」という記事を書きましたが、全く同じ問題が Cordova でも発生していたのでその解決方法についてです。
ちなみに、発生していたエラーは「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」でした。

今回参考にさせていただいた記事はこちらです。

【Monaca】Android版をビルドしてAndroid 9 で実行すると「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」と表示される | Hato Poppo Project
http://hatopp.wpblog.jp/archives/2508

 

対処方法としては、AndroidManifest.xml<application> タグに android:usesCleartextTraffic="true" を追加するだけです。
サンプルコードは下記のとおりです。

<application ... android:usesCleartextTraffic="true">
    ...
</application>

ですが、Cordova の場合、プラットフォームを再インストールすると Android Studio 上で直接追記した箇所はすべて削除されてしまうので、都度追加しなおすのは若干面倒です。

そのため、上記の参考サイトにあるように、config.xml に指定するようにします。
追加した箇所は、2行目と、12~14行目です。

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="com.example.helloworld" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android">
  <name>HelloWorld</name>
  <description>Made with Monaca (http://monaca.mobi)</description>
  <author/>
  <content src="index.html"/>
  <allow-navigation href="*"/>
  <allow-intent href="itms:*"/>
  <allow-intent href="itms-apps:*"/>
  <!-- 省略 -->
  <platform name="android">
    <edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
      <application android:usesCleartextTraffic="true" />
    </edit-config>
  </platform>
</widget>

具体的には、<widget> タグに xmlns:android="http://schemas.android.com/apk/res/android" を追加し、<platform name="android"> タグ内に下記を追加しています。

<edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
  <application android:usesCleartextTraffic="true" />
</edit-config>

上記を追加して実行すると、AndroidManifest.xmlandroid:usesCleartextTraffic="true" を自動で追記してくれます。
意外とプラットフォームの削除・追加は行うので、こうやって Android Studio 上での変更を減らしておくと後々楽になるのでお勧めです。

 

以上、Cordova で開発したアプリを Android 9 で実行した際に画像が表示されない時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)