How to Create Background Tasks in Ionic with Capacitor ⚡️

This is where things get interesting, hopefully it will be improved for future versions, cause when the app is closed or dismissed the task won't run anymore, tried both implementations for push and backgroundgeolocation, for now onesignal is one solution and the capacitor background geolocation, but until now the user needs to keep the app alive to get those coordinates for tracking, would be interesting if the backgroundrunner could allow to track the user for like n hours like the whatsapp implementation for live tracking, great work as always simon.

[@erickreyes4485]

mate i need too, get location when app is closed or dismissed but i cant, if u have a solution can u share it?

@@erickreyes4485sure, in the app.component.ts import { BackgroundGeolocationPlugin } from "@capacitor-community/background-geolocation"; const BackgroundGeolocation = registerPlugin("BackgroundGeolocation"); then in the constructor: BackgroundGeolocation.addWatcher({ backgroundMessage: "Cancelar seguimiento", backgroundTitle: "Siguiendote", requestPermissions: true, stale: false, distanceFilter: 10 }, async (location, error) => { if (error) { if (error.code === "NOT_AUTHORIZED") { if (confirm("Permitir ubicacion")) { BackgroundGeolocation.openSettings(); } } this.utilService.logIDE(JSON.stringify(error)); } this.utilService.logIDE('location: ' + JSON.stringify(location)); let ultPos: any; let ultPosObj: any = await Preferences.get({ key: 'ultPos' }); ultPos = []; if (ultPosObj.value + '' != 'null') { let arr = JSON.parse(ultPosObj.value); for (let k in arr) { ultPos.push(arr[k]); } } ultPos.push(location); await this.setPosicion(ultPos); var titulo = location!.latitude.toFixed(6) + ',' + location!.longitude.toFixed(6) + ' (' + ultPos.length + ')'; this.eventService.publish('actualizarTitulo', titulo); if (new Date().getSeconds() == 59) { await this.setPosicion('null'); this.utilService.logIDE('se envia al server...'); } }).then((watcher_id) => { this.utilService.logIDE('watcher_id:' + watcher_id); // BackgroundGeolocation.removeWatcher({ // id: watcher_id // }); }); }

[@matyascsoti4400]

@@erickreyes4485Transistorsoft Capacitor Background Geolocation. We are using it in production. Best documentation you will ever see. Does all that was mentioned above. + if the phone is restarted it auto start without opening the app and starting it, if it was running when the phone was turned off

[@brandon400]

@@erickreyes4485bro could you implement it? get location when app is in background

[@prabodhsawant7564]

@simon Thanks for this video. I am simply using it to call api in the background but it won't work without enabling geolocation. Why does it require geolocation?

[@militeli6357]

Thank you Simon, it works. However, I have too high CPU 100% usage from process 'closure'. Do you also have this problem?

[@alexflatiz8120]

Was waiting this video so much❤

[@stephenp8798]

nice work simon

[@RaghvendraAwasthi-j4x]

Is there any guide for Ionic-React project for the background-runners ?

[@monicasilva399]

Hi Simon, great tutorial as always. This plugin continue to execute event if my app goes in background (no active app on display) as "cordova-plugin-background-mode"? I'm thinking to the data syncronization with data server...

[@mostafaharb81]

Thanks for the video, great feature but would like to see also native http calls to be able to run it instead of fetch to not face cors issues... Also would be great if ionic can add widgets or maybe different name (but to be able to open a page while app is closed like when WhatsApp call received,it triggeres a page to answer call without need to open the app). Again, thanks for your time 🤙

[@ImranNazirk]

Hi, Can I perform any other task besides these tasks using this background runner? For example, I need to connect a Bluetooth device using the Cordova Bluetooth plugin. Is that possible?

[@vijaypartapsingh4555]

Hey Simon, I cloned your code from your GitHub and ran it on my device but it didn't work. I have also set the same things according to your video with a new project. But the same thing happens. When I triggered the event on the button click it worked but if I set the event in the capacitor config ts file and set the interval value as 1 then it's not working when the app goes to the background. I am not getting any error after setting up all functionality. I am using I-phone X. Can you please help me regarding this issue. I want to track the user's position (coordinates) when the app goes to the background. If another thing is available for this feature please let me know. I am waiting for your response. I am working with Ionic 6 version

[@franciskrahe6851]

What console log extension are you using at 14:41?

[@AndreRds]

👀

[@galaxies_dev]

That should be Turbo Console Log!

[@franciskrahe6851]

@@galaxies_dev 🙏🏻 Thank you much appreciated

[@markdegrootnl]

Nice video! What is the Inspect tool at 18:25?

[@dorrisdormouse]

Ideally i'd like to update a SQLite database using a background runner. I know that this is not directly supported, but im wondering if I could manage it by saving updates in a json string into capacitorkv storage, and then when my app it open read any updates from there and transfer into the db?

[@VolkerKtnbch]

Könnte man ggf. bei unserer Wein-App verwenden, wenn es nicht so extrem asynchron wäre

[@kasiselvamk]

Hi , how you are writing in web browser ?

[@ismaelmtz5582]

Gracias!

[@ElGenti]

Hi! does Background Runner requiere Angular? I'm trying to implement it in Vanilla JS (this is a requeriment), but I'm not able to make it work and always get the same error. ==> Error: public/*here goes the src that we set in the .config*

[@galaxies_dev]

This is a Capacitor plugin so it has no relation to Angular and should definitely work!

[@miketheburns]

how often does Anroid run the scheduled runners, though?

[@vietvo1061]

Hi Simon, thank you.But does it works when the app is closed/killed? The word "background" is so confused, does it only works when the app is minimized (not closed yet)?

[@Me-vc4sf]

No one wants to answer this it seems

[@Dhirendra-wr4dh]

Does the app open when you click on the notification?

[@jacobviertel2433]

First of all, Awesome Video! Secondly, I just wanted to ask if it possible to run the background-tasks also with react? I followed to tutorial and put the runners.js inside public/runners/ folder. As i do not have any angular.json file as in this video, i just skipped this part. The permissions work fine but if i try to run the tasks I get this error message: "{errorMessage: "runnerError(reason: \"source file not found\")",.... ". Does someone know what my mistake is and of course how to fix it? Thanks 💕

[@galaxies_dev]

Yes it should definitely work with React as well! Isn't React copying all your src files into the build anyway? Maybe the path in the Capactiro.config.ts is wrong?

[@helper4665]

Hi sir with ionic I'm not able to build Itself due to path for runner.js I have tried all these ways like `src/runner/runner.js` , `runner/runner js` could you please suggest any solution or provide a working tutorial with git repo. Thank you in advance.

[@akashaher1001]

Hello sir, I am getting capacitor camera plugin error in some android devices? how to resolved that. Thanks you sir !

[@olucas192]

The fetch isn't works with options and headers, only works with method GET and without options or i am wrong?? The runner.js seems restrict and not run all functions/classes from native JS, and is practically impossible debug the runner.js

[@mauriciocoral1195]

Hello Simon, I hope you are well, follow the video which is fantastic for me, on Android it works correctly, but I have a problem on IOS when I run the APP in xcode, it generates an error when I run background task runner ( Error Domain=BGTaskSchedulerErrorDomain Code1= 1(null) Any help would be fantastic, thank you, greetings from Colombia

[@jbwesleyster]

Thank you

[@galaxies_dev]

Welcome!

[@jeyaseelanarulraj7433]

Hello bro, I'M using ionic cordova angular project. Problem: I'm updated all plugin and angular version . i'm updated camara plugin so I can captured photo and upload video and image but I can't upload pdf, doc, txt document files. Please give any solution

[@krishnarajp-i8f]

Hello @galaxies_dev, How can we disable the Push notification badge using the ionic capacitor code? please let know if any one know

[@bilelrahmouni01]

Can you please make a video about foreground servise in react native its the only way to make "background tasks" and i was crawlkkg the internet and there is no resource on how to make it

[@brandon400]

when i click the buttons which calls fetch functions my app closes. where should I check? im lost

[@محمودجبالي-م7ز]

we need video without framework, can you?

[@CarlosEduardo-jt7vr]

Hi bro, Im trying to integrate on ionic/angular, but getting android-js-engine-release.aar not found in android project.

[@gunjanjha9123]

Trying to integrate on ionic react getting android-js-engine-release.aar not found error