{"id":5653,"date":"2023-10-04T15:53:49","date_gmt":"2023-10-04T19:53:49","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5653"},"modified":"2023-10-05T12:50:05","modified_gmt":"2023-10-05T16:50:05","slug":"create-background-tasks-in-ionic-with-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/create-background-tasks-in-ionic-with-capacitor","title":{"rendered":"How to Create Background Tasks in Ionic with Capacitor"},"content":{"rendered":"\n

This is a guest post from Simon Grimm, Ionic Developer Expert and educator at <\/em>the Ionic Academy<\/em><\/a>, an online school with 70+ video courses focused entirely on building awesome mobile apps with Ionic and Capacitor!<\/em><\/p>\n\n\n\n

What happens when users put your mobile app in the background? Can you still occasionally tap into the device\u2019s resources to perform tasks? The answer is yes, and Capacitor makes it easy to do so now with the new Capacitor Background Runner<\/a>.<\/p>\n\n\n\n

In this tutorial, we will learn how to use the new Background Runner plugin to perform tasks such as fetching data, sending notifications, or even getting the user’s geolocation. We will also learn how to debug and trigger background tasks directly from Xcode.<\/p>\n\n\n\n

You can also find the full source code on GitHub<\/a>. But before we get into the plugin, let\u2019s first take a look at what background tasks are and why we need them.<\/p>\n\n\n\n\n\n\n\n

Background Tasks in Mobile Apps<\/strong><\/h2>\n\n\n\n

When building mobile apps, we often have to deal with tasks that should run in the background, like checking for new emails, updating chat messages, or syncing data. In the past, this was only possible with native code, but now we can do it with Capacitor as well.<\/p>\n\n\n\n

The idea is to define a task that you will run in the background and either dispatch it manually from your code or let the OS trigger it automatically on a given interval.<\/p>\n\n\n\n

However, the second option proves very challenging in reality. Because even if you tell iOS to perform your background task every 5 minutes, your code will most likely get executed every 2 hours.<\/p>\n\n\n\n

This is because iOS will try to optimize the battery life of the device and only run background tasks when it thinks it’s a good time to do so. This is why you should never rely on background tasks to run at a specific time.<\/p>\n\n\n\n

However, you can still use this to update your app’s data before a user opens it again or to send a local notification to the user.<\/p>\n\n\n\n

It can also offload some work from the main thread to the background thread – and we will see all of that in action.<\/p>\n\n\n\n

If you want to learn more about this, check out the Capacitor Livestream about Background Tasks<\/a>!<\/p>\n\n\n\n

Setting up the Project with Background Runner<\/strong><\/h2>\n\n\n\n

To get started, bring up a terminal, create a new Ionic app, and install the Capacitor Background Runner<\/a>:<\/p>\n\n\n\n

ionic start backgroundApp blank --type angular\ncd .\/backgroundApp\nnpm install @capacitor\/background-runner\nionic cap add ios\nionic cap add android<\/code><\/pre>\n\n\n\n
Next, we need to add a file that holds our background tasks, so simply create one at src\/app\/runners\/runner.js<\/code> and leave it empty for the moment. To make sure this file is copied when building the app, we need to bring up the angular.json and include it in the assets array like this:<\/p>\n\n\n\n
{\n  "projects": {\n    "app": {\n      "architect": {\n        "build": {\n          "options": {\n            "assets": [\n              {\n                "glob": "**\/*",\n                "input": "src\/assets",\n                "output": "assets"\n              },\n              {\n                "glob": "**\/*.svg",\n                "input": "node_modules\/ionicons\/dist\/ionicons\/svg",\n                "output": ".\/svg"\n              },\n              {\n                "glob": "runner.js",\n                "input": "src\/app\/runners",\n                "output": ".\/runners"\n              }\n            ]\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
Now we also need to specify some information for Capacitor so the plugin can pick up the file and eventually an event that we can trigger from our code. To do so, open the capacitor.config.ts<\/code> and change it like this:<\/p>\n\n\n\n
import { CapacitorConfig } from '@capacitor\/cli';\n\nconst config: CapacitorConfig = {\n  appId: 'com.capacitor.background',\n  appName: 'backgroundApp',\n  webDir: 'www',\n  server: {\n    androidScheme: 'https',\n  },\n  plugins: {\n    BackgroundRunner: {\n      label: 'com.capacitor.background.check',\n      src: 'runners\/runner.js',\n      event: 'checkIn',\n      repeat: true,\n      interval: 30,\n      autoStart: true,\n    },\n  },\n};\n\nexport default config;<\/code><\/pre>\n\n\n\n
The most important part is that the plugin has a similar label to your appId! This is important because otherwise, the plugin won’t be able to find your file or execute the task. The time we specify here is more a friendly request to the OS as mentioned before, we are not guaranteed to get executed at this time.<\/p>\n\n\n\n
Native App Configuration<\/strong><\/h2>\n\n\n\n
To make sure our app can run in the background, we need to add some configuration to our native apps as well.<\/p>\n\n\n\n
iOS<\/strong><\/h3>\n\n\n\n
For iOS we first need to update the ios\/App\/App\/AppDelegate.swift<\/code> file and change one function and add another:<\/p>\n\n\n\n
import UIKit\nimport BackgroundTasks\nimport Capacitor\nimport CapacitorBackgroundRunner\n\n@UIApplicationMain\n\nclass AppDelegate: UIResponder, UIApplicationDelegate {\n\n\u00a0\u00a0\u00a0\u00a0var window: UIWindow?\n\n\u00a0\u00a0\u00a0\u00a0func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BackgroundRunnerPlugin.registerBackgroundTask()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BackgroundRunnerPlugin.handleApplicationDidFinishLaunching(launchOptions: launchOptions)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return true\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print("Received remote notification")\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BackgroundRunnerPlugin.dispatchEvent(event: "remoteNotification", eventArgs: userInfo) { result in\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switch result {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case .success:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0completionHandler(.newData)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case .failure:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0completionHandler(.failed)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n\n\n\n
Additionally, we need to enable the background capability and different modes that our app will use from the background:<\/p>\n\n\n\n
\"\"