Javascript should be executed in the background

[Caperious]

Your Environment

• Plugin version: 5.2.4
• Platform: Android
• Device OS version: 14.0
• Device manufacturer / model: Android emulator
• XCode version:
• Capacitor info (npx cap doctor)

• Latest Dependencies:

  @capacitor/cli: 6.0.0 @capacitor/core: 6.0.0 @capacitor/android: 6.0.0 @capacitor/ios: 6.0.0

Installed Dependencies:

@capacitor/cli: 6.0.0 @capacitor/core: 6.0.0 @capacitor/android: 6.0.0 @capacitor/ios: 6.0.0

• Plugin config provided to BackgroundFetch.configure: { minimumFetchInterval: 15, requiredNetworkType: BackgroundFetch.NETWORK_TYPE_ANY, },

  Expected Behavior

  App should run javascript function in the background or when frozen.

  Actual Behavior

  The app receives the event, but if the app is in the background, the javascript is not executed. When i bring the app to foreground again, the function executes immediately

  Steps to Reproduce

  The code that im trying to execute. Its based of the example provided.

export const EventCalendarSyncHook = () => {
  useEffect(() => {
    // fetchAndSyncEvents();
    const isWeb = !(isPlatform("ios") || isPlatform("android"));
    if (isWeb) {
      console.log("Not running on mobile device, skipping background fetch initialization");
      return;
    }
    initBackgroundFetch().catch((err) => {
      console.error("Error while initializing background fetch", err);
    });
  }, []);
};

const initBackgroundFetch = async () => {
  const status = await BackgroundFetch.configure(
    {
      minimumFetchInterval: 15,
      requiredNetworkType: BackgroundFetch.NETWORK_TYPE_ANY,
    },
    async (taskId) => {
      console.log("[BackgroundFetch] EVENT:", taskId);
      // Perform your work in an awaited Promise
      try {
        const result = await fetchAndSyncEvents();
        console.log("[BackgroundFetch] work complete:", result);
      } catch (e) {
        console.error("[BackgroundFetch] Error occurred while fetching and syncing events", e);
      }
      // [REQUIRED] Signal to the OS that your work is complete.
      BackgroundFetch.finish(taskId);
    },
    async (taskId) => {
      // The OS has signalled that your remaining background-time has expired.
      // You must immediately complete your work and signal #finish.
      console.log("[BackgroundFetch] TIMEOUT:", taskId);
      // [REQUIRED] Signal to the OS that your work is complete.
      BackgroundFetch.finish(taskId);
    }
  );

  // Checking BackgroundFetch status:
  if (status !== BackgroundFetch.STATUS_AVAILABLE) {
    // Uh-oh:  we have a problem:
    if (status === BackgroundFetch.STATUS_DENIED) {
      alert("The user explicitly disabled background behavior for this app or for the whole system.");
    } else if (status === BackgroundFetch.STATUS_RESTRICTED) {
      alert("Background updates are unavailable and the user cannot enable them again.");
    }
  }
}; 

Context

Im trying to fetch data from the api, and sync the data into the calendar.

Debug logs

[christocracy]

It's likely due to the Capacitor WebView shutting down.

Try setting useLegacyBridge in your capacitor.config.ts:

const config: CapacitorConfig = {
  .
  .
  .
  android: {
    useLegacyBridge: true
  }
};

[Caperious]

That did the trick. Thanks for the quick response.

[Caperious]

Hi @christocracy ,

I actually have a similar issue on the Ios as well. There the code starts executing (i can see the console logs), but when i get to the fetching from storage, the code stops executing. If i let it "hang", timeout is executed. If i bring the app to the foreground in the meantime, the code executes as it should.

Is there a similar trick for Ios as the one above, or do i have a problem with @ionic/storage?

[christocracy]

Post your code.

[Caperious]

I have figured it out. The problem was @ionic/storage. I used @capacitor/preferences instead to retreive required information from storage. Thank you for your inquiry though.