I have a Capacitor 5/Angular app that seems to have an issue with using intervals and creating duplicate submissions in iOS.
The idea is that when a user is in patchy cell service they can report a wildfire, which gets saved to storage if the user is offline. The app then pings the server every 3 minutes using an rxjs interval and the Capawesome background task API to see if the user is online and if so, the form will be submitted to the endpoint.
I am storing a submissionID in local storage with a check which rejects duplicate submissions without issue in the browser and on Android. But somehow on iOS this check is failing and duplicates with the same submissionID are getting submitted to the endpoint.
I do not think this is an issue with the Capawesome API as I get duplicates on iOS if I remove the background task and let the interval run in the foreground. Note that I am using the Capawesome API as it seems that just the Geolocation and Notifications API are supported in the new Capacitor background-runner API which do not seem like feasible options for my goal. I also do not think it is an issue with the type of storage being used as I have tried ionic storage, local storage and Capacitor Preferences to store and fetch the data. I have also used both setInterval function and rxjs interval which both yielded the same results. Please let me know if there is a bug in Capacitor or something wrong in my code.
rof-title-page.component.ts
ngOnInit(): void {
if (this.reportOfFirePage.currentPage.instance.id === 'first-page') {
App.removeAllListeners();
// run background task
(async () => {
await this.backgroundListener();
})();
}
}
async backgroundListener() {
App.addListener('appStateChange', async ({ isActive }) => {
if (isActive) {
return;
}
// The app state has been changed to inactive.
// Start the background task by calling `beforeExit`.
const taskId = await BackgroundTask.beforeExit(async () => {
const self = this;
if(!this.intervalRef) {
this.intervalRef = interval(30000).subscribe(() => {
self.checkStoredRoF();
});
}
BackgroundTask.finish({ taskId });
});
});
}
async checkStoredRoF() {
const self = this;
// first check do 24 hour check in storage and remove offline RoF if timeframe has elapsed
await this.commonUtilityService.removeInvalidOfflineRoF();
// check if the app is online and if so, check for saved offline RoF to be submitted
await this.commonUtilityService.checkOnlineStatus().then(async (result) => {
if (result) {
await this.reportOfFireService.syncDataWithServer().then(response => {
if(response) self?.intervalRef?.unsubscribe();
});
};
});
}
report-of-fire-service.ts
async syncDataWithServer() {
let dataSynced = false;
let submissionID = null;
let duplicateStored = false;
let submissionIdList = null;
let offlineReport = null;
try {
// Fetch and submit locally stored data
offlineReport = this.storageService.getData('offlineReportData')
submissionIdList = this.storageService.getData('submissionIDList')
if (offlineReport) {
// Check for duplicate, reject if submissionID has already been stored
const offlineJson = JSON.parse(offlineReport)
if(offlineJson?.resource) {
const resourceJson = JSON.parse(offlineJson.resource)
submissionID = resourceJson?.submissionID
if (submissionID && submissionIdList?.includes(submissionID)) {
duplicateStored = true;
}
}
// Reject duplicate if submissionID has already been stored
if(duplicateStored) return true;
// Send the report to the server
const response =
await this.submitOfflineReportToServer(offlineReport).then(async response => {
if (response.success) {
dataSynced = true;
// Remove the locally stored data if sync is successful
this.storageService.removeData('offlineReportData');
// store submissionID for duplicate check
if(submissionID) {
submissionIdList = submissionIdList ? submissionIdList + ", " + submissionID : submissionID;
this.storageService.saveData('submissionIDList', submissionIdList)
}
App.removeAllListeners();
}
});
}
} catch (error) {
console.error('Sync failed:', error);
}
return dataSynced;
}
async submitOfflineReportToServer(offlineReport?): Promise<any> {
// retrieve the offline RoF from the device's storage and convert to FormData for submission
// images will already to converted to base64 string from initial submission
const rofUrl = this.appConfigService.getConfig().rest['fire-report-api'];
const rofJson = JSON.parse(offlineReport);
const resource = rofJson.resource;
const image1 = rofJson.image1;
const image2 = rofJson.image2;
const image3 = rofJson.image3;
const formData = new FormData();
if (resource) {
formData.append('resource', resource);
}
if (image1) {
formData.append('image1', image1);
}
if (image2) {
formData.append('image2', image2);
}
if (image3) {
formData.append('image3', image3);
}
try {
// Make an HTTP POST request to your server's API endpoint
const response = await fetch(rofUrl, {
method: 'POST',
body: formData,
});
if (response.ok || response.status == 200) {
// Remove the locally stored data if sync is successful
this.storageService.removeData('offlineReportData');
App.removeAllListeners();
// The server successfully processed the report
return { success: true, message: 'Report submitted successfully' };
} else {
// The server encountered an error
return { success: false, message: JSON.stringify(response) };
}
} catch (error) {
// An error occurred during the HTTP request
return {
success: false,
message: 'An error occurred while submitting the report',
};
}
}
}
async submitToStorage(formData: FormData) {
const object = {};
formData.forEach((value, key) => (object[key] = value));
const json = JSON.stringify(object);
const data = this.storageService.getData('offlineReportData')
if (data == json) {
return;
} else this.storageService.saveData('offlineReportData', json);
}
local-storage-service
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class LocalStorageService {
public saveData(key: string, value: string) {
localStorage.setItem(key, value);
}
public getData(key: string) {
return localStorage.getItem(key);
}
public removeData(key: string) {
localStorage.removeItem(key);
}
public clearData() {
localStorage.clear();
}
}