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
- capacitor.config.json for capacitor
- ionic.config.json for ionic
- vue.config.json for vuejs
- 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/f9bd349d3354ad4e3ee62a0a7169d5749d9ee2b8/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 :
- Is appflow compatible with vue-ionic-capacitor project?
- if yes, how to deal with resources?
- What file is read for the config, all? ionic? capacitor? vue? config.xml? none of them? merge of them?
- Why service worker are not available (Error during service worker registration) as the file is available throw browser?
- Maybe I’m missing something, any ideas?
Thanks
fky