Ionic appflow capacitor resources and others issues

@franckysolo wrote:

hello,

i’am trying to build ionic app with flow i’ve have several issues :

• the resources icons and splash are not copied
• want to user yarn to build but config not respected
• An exception raise in android log

dependencies :

Ionic:

  Ionic CLI       : 6.6.0 (/home/franckysolo/.npm-global/lib/node_modules/@ionic/cli)
  Ionic Framework : @ionic/vue 0.0.9

Capacitor:

  Capacitor CLI   : 2.0.1
  @capacitor/core : 2.0.1

Utility:

  cordova-res : 0.13.1
  native-run  : 1.0.0

System:

  NodeJS : v10.18.0 (/usr/bin/node)
  npm    : 6.9.0
  OS     : Linux 4.15

i 've tried differents solutions to copy resources :

1 - Add the resources via android studio and copy icons and splashes in res android directory
2 - Use cordova-res
3 - Use a live generator to get images and copy icons and splashes in res android directory

What’s happen :

When using my own resources (1 , 3) i build on app flow the default splashes and icons are present but not mine
When using cordova-res on local build (2) splashes are cropped and splashes and icons not build on app flow steel have defaults

When i run npx cap open android, build and run several exceptions are raised :

E/chatdmvet.ioni: Invalid ID 0x00000000.
E/PluginManager: Uncaught exception from plugin
    android.content.res.Resources$NotFoundException: String resource ID #0x0
        at android.content.res.Resources.getText(Resources.java:382)
        at android.content.res.Resources.getString(Resources.java:475)
        at android.content.Context.getString(Context.java:641)
        at com.ionicframework.common.IonicCordovaCommon.getStringResourceByName(IonicCordovaCommon.java:341)
        at com.ionicframework.common.IonicCordovaCommon.getNativeConfig(IonicCordovaCommon.java:425)
        at com.ionicframework.common.IonicCordovaCommon.getPreferences(IonicCordovaCommon.java:384)
        at com.ionicframework.common.IonicCordovaCommon.execute(IonicCordovaCommon.java:92)
        at org.apache.cordova.CordovaPlugin.execute(CordovaPlugin.java:98)
        at org.apache.cordova.PluginManager.exec(PluginManager.java:132)
        at com.getcapacitor.MessageHandler.callCordovaPluginMethod(MessageHandler.java:70)
        at com.getcapacitor.MessageHandler.postMessage(MessageHandler.java:46)
        at android.os.MessageQueue.nativePollOnce(Native Method)
        at android.os.MessageQueue.next(MessageQueue.java:336)
        at android.os.Looper.loop(Looper.java:197)
        at android.os.HandlerThread.run(HandlerThread.java:67)

Another issue with pwa :

Line 1 - Msg: Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://ionic.chatdmvet.com/') with script ('https://ionic.chatdmvet.com/service-worker.js'): ServiceWorker script evaluation failed
D/ViewRootImpl@b10dcef[MainActivity]: ViewPostIme key 0

Strange as the js file is available!

As i use a vue project and it’s not supported
i was oblige to convert vue project in ionic project to make it work with app flow
so now i’ve to many configs files

1. capacitor.config.json for capacitor
2. ionic.config.json for ionic
3. vue.config.json for vuejs
4. config.xml for cordova-res

capacitor.config.json

{
  "appId": "com.chatdmvet.ionic",
  "appName": "chatDMVet",
  "bundledWebRuntime": false,
  "npmClient": "yarn",
  "webDir": "www",
  "server": {
    "url": "https://ionic.chatdmvet.com",
    "allowNavigation": [
      "chatdmvet.com",
      "*.pusher.com",
      "dmv-platform.s3.amazonaws.com"
    ]
  },
  "android": {
    "allowMixedContent": true,
    "captureInput": true,
    "webContentsDebuggingEnabled": true
  },
  "linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh",
  "windowsAndroidStudioPath": "C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe"
}

ionic.config.json

{
  "name": "chatdmvet",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue"
}

vue.config.js

const _ = require('lodash')
const webpack = require('webpack')
const path = require('path')
const pattern =  /\@angular(\\|\/)core(\\|\/)fesm5/
const sourceDirectory = path.join(__dirname, 'src')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ContextReplacementPlugin(pattern, sourceDirectory)
    ]
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
      // use default config plugin pwa
      config.plugin('workbox')
    }

    config
      .plugin('provide')
      .use(webpack.ProvidePlugin, [{
          $: 'jquery',
          jquery: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
      }])
      config.plugin('html')
        .tap(args => {
         if (args[0].minify) {
           args[0].minify.removeAttributeQuotes = false
         }
         return args
       })
      // fix warning angular/core
      config.module
        .rule('angular-core-js')
        .test(/[\/\\]@angular[\/\\].+\.js$/)
        .use('cache-loader')
        .loader('cache-loader')
        .end()
        .use('babel-loader')
        .loader('babel-loader')
        .end()
        .parser({ system: true })
  },
  pwa: {
     // @see https://github.com/bradtraversy/zip-info-pwa/blob/master/vue.config.js
     // for more config
     name: 'chatDMVet',
     short_name: "chatDMVet",
     themeColor: '#3490dc',
     start_url: '/'
  }
}

the config xml

<?xml version='1.0' encoding='utf-8'?>
<widget
    id="com.chatdmvet.ionic"
    version="0.1.0"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>chatDMVet</name>
    <description>An awesome chat for veterinaries hospital.</description>
    <author email="franckysolo@gmail.com" href="http://www.franckysolo-productions.com/">
      MATHERAT Franck
    </author>
    <author email="nicolas@lemarson.com" href="https://gnmwebdesign.com//">
      Marson nicolas
    </author>
    <access origin="*" />
    <feature name="IonicCordovaCommon">
      <param name="android-package" value="com.ionicframework.common.IonicCordovaCommon" onload="true"/>
    </feature>
    <feature name="StreamingMedia">
      <param name="android-package" value="com.hutchind.cordova.plugins.streamingmedia.StreamingMedia"/>
    </feature>
    <feature name="Whitelist">
      <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
      <param name="onload" value="true"/>
    </feature>
    <platform name="android">
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />

        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
        <string>Used to take pictures</string>
    </edit-config>
    <engine name="android" spec="7.1.4" />
    <engine name="ios" spec="4.5.5" />
</widget>

My questions :

1. Is appflow compatible with vue-ionic-capacitor project?
2. if yes, how to deal with resources?
3. What file is read for the config, all? ionic? capacitor? vue? config.xml? none of them? merge of them?
4. Why service worker are not available (Error during service worker registration) as the file is available throw browser?
5. Maybe I’m missing something, any ideas?

Thanks
fky

Posts: 1

Participants: 1

Read full topic