Developer friends.
I’m asking for your help to try to clear up a big problem we have with an Angular + Capacitor app that we are developing.
We have the same Angular code base for the native Web and Hybrid App version, so we can compare the performance of the app running on the mobile browser and the hybrid app on the same mobile.
We use the Deploy service included in cordova-plugin-ionic to make hybrid app updates via live-updates from Ionic Appflow, and we think this is the cause of the problem, I explain below.
As soon as the app receives an update via live-update (Ionic Appflow), downloads and installs it, it gets the expected speed and performance (fast). But after the update, just close and reopen the app and then a tidal wave of slowness takes over every interaction, to the point where a click on a link to change a route takes 1~3 minutes to run!
The same does not happen, never, in the web version.
You see, we know that if we do an analysis with Lighthouse in our web version, we will find bottlenecks, but our problem with the app’s performance/slowness is not related to the first load (which is what Lighthouse is about after all), but yes from the continuity of navigation in the app.
Our web version: https://somos.ageas.pt
Our current live-update flow (Ionic Appflow):
1- We check for new updates every 5min
2- If there is an update, we display a UI asking if you want to download it, if so we do it in the background while the app is open
3- When finished downloading, we show a UI asking if you want to install the update now.And that’s it.
Another problem we noticed is that on some devices Android alerts that the app is consuming too much battery power.
I don’t know if I’ve put here everything necessary to analyze the problem, but if you need any more data, ask me.
What we have installed in our app today is:
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^11.2.9",
"@angular/cdk": "^11.2.11",
"@angular/common": "^11.2.9",
"@angular/compiler": "^11.2.9",
"@angular/core": "^11.2.9",
"@angular/fire": "^6.1.4",
"@angular/forms": "^11.2.9",
"@angular/platform-browser": "^11.2.9",
"@angular/platform-browser-dynamic": "^11.2.9",
"@angular/platform-server": "^11.2.9",
"@angular/pwa": "^0.803.5",
"@angular/router": "^11.2.9",
"@angular/service-worker": "^11.2.9",
"@capacitor-community/fcm": "^2.0.0",
"@capacitor/android": "^3.2.0",
"@capacitor/browser": "^1.0.2",
"@capacitor/core": "^3.2.0",
"@capacitor/device": "^1.0.2",
"@capacitor/ios": "^3.2.0",
"@capacitor/push-notifications": "^1.0.3",
"@capacitor/status-bar": "^1.0.2",
"@capacitor/toast": "^1.0.2",
"@firebase/app-types": "^0.4.3",
"@fortawesome/angular-fontawesome": "^0.8.2",
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@ionic/angular": "^5.3.5",
"@kolkov/angular-editor": "^1.1.3",
"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@ngneat/transloco": "^2.12.4",
"@ngneat/transloco-preload-langs": "^2.0.2",
"@ngx-lite/input-tag": "^0.4.9",
"@pre-bundled/minify-html-literals": "^1.3.2",
"@swimlane/ngx-charts": "^16.0.0",
"@trademe/ng-defer-load": "^3.1.0",
"@types/scriptjs": "0.0.2",
"@videogular/ngx-videogular": "^2.1.0",
"@zxing/ngx-scanner": "^3.0.0",
"angular-calendar": "^0.28.22",
"angular-gtag": "^1.0.3",
"angular-instantsearch": "^2.3.0",
"angular2-uuid": "^1.1.1",
"angular2latinize": "^1.0.0",
"angularx-flatpickr": "^6.2.0",
"array-to-tree": "^3.3.2",
"bootstrap": "^5.0.0-beta3",
"capacitor-idfa-ios-app-tracking": "^1.0.2",
"capacitor-plugin-app-tracking-transparency": "^2.0.0",
"classlist.js": "^1.1.20150312",
"cordova-plugin-ionic": "^5.4.7",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^3.2.1",
"d3": "^4.13.0",
"d3-selection": "^1.4.1",
"d3-transition": "^1.3.2",
"date-fns": "^1.30.1",
"file-saver": "^2.0.5",
"firebase": "^8.6.7",
"firebase-functions": "^3.14.1",
"firestore-parser": "^0.8.9",
"flatpickr": "^4.6.3",
"font-awesome": "^4.7.0",
"grapesjs": "^0.16.44",
"grapesjs-mjml": "^0.5.2",
"grapesjs-plugin-ckeditor": "0.0.10",
"grapesjs-preset-webpage": "^0.1.11",
"hammerjs": "^2.0.8",
"html-crush": "^4.1.6",
"html2canvas": "^1.0.0-alpha.12",
"jspdf": "^2.3.1",
"lodash-es": "^4.17.15",
"mjml-browser": "^4.9.3",
"ng-click-outside": "^5.1.1",
"ng2-select": "^2.0.0",
"ng2-tree": "^2.0.0-rc.11",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^6.2.0",
"ngx-chips": "^2.2.2",
"ngx-color-picker": "^8.2.0",
"ngx-device-detector": "^2.0.6",
"ngx-filter-pipe": "^2.1.2",
"ngx-input-autocomplete": "^0.2.1",
"ngx-order-pipe": "^2.0.4",
"ngx-spinner": "^11.0.1",
"pexels": "^1.2.1",
"polished": "^3.4.1",
"popper.js": "^1.15.0",
"primeflex": "^2.0.0",
"primeng": "^11.2.0",
"quill": "^1.3.7",
"rxfire": "^4.0.0",
"rxjs": "^6.5.3",
"rxjs-tslint": "^0.1.8",
"scriptjs": "^2.5.9",
"slugify": "^1.3.6",
"subsink": "^1.0.0",
"validator": "^11.1.0",
"video-metadata-thumbnails": "^1.0.22",
"video-thumb-generator": "^1.2.0",
"video-thumbnail-url": "^1.0.1",
"video.js": "^7.12.1",
"web-animations-js": "^2.3.2",
"xlsx": "^0.16.9",
"zone.js": "^0.10.2"
And Ionic info:
Ionic:
Ionic CLI : 6.13.1
Capacitor:
Capacitor CLI : 3.2.0
@capacitor/core : 3.2.0
Cordova:
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : 1.4.0
System:
NodeJS : v12.22.1 (/usr/bin/node)
npm : 7.16.0
OS : Linux 5.4