How to integrate formio offline plugin to angular project - formio

Question

I have integrated formio API's to angular project successfully and the form which I created in fromio is displayed in the angular8 UI. I also implemented language translations on the same page and it is working fine. Trying to integrating formio offline plugin any pointer on how to register offline plugin In angular8 version.?
Reference: https://help.form.io/developer/offline/#offlineapi but not able to find details for angular8 offline implementation

Answer 1

Its implemented and working fine, below are the steps:
Note: Offline plugin will work only with formio enterprises version
Step1:
package.json - Ensure formio-offline-plugin and dependencies
"formio-plugin-offline": "formio/formio-plugin-offline",
"formiojs": "^4.9.0-beta.4",
"angular-formio": "^4.5.3",
"#angular/-packages-": "8.2.14" or higher versions
Step2:
Create offline service(offline.service.ts) and import the same in app-module
Step3:
Add below code in service file
import { Injectable, EventEmitter } from '#angular/core';
import { Formio } from 'angular-formio';
import { AppConfig } from '../../../config/app.config';
const FormioOfflineProject = require('formio-plugin-offline/index').default;
#Injectable({
providedIn: 'root'
})
export class OfflineService {
public onlineChange: EventEmitter<any> = new EventEmitter();
public offlinePlugin;
public offlineCount = 0;
public offlineOps: any = {};
public offlineSubmissions = [];
constructor() {
this.onOfflineServiceInit();
}
/**
* This Function is used to load all the on inti functions
* #memberOf Formio Offline Line service (OfflineService)
*/
public onOfflineServiceInit() {
this.registerOfflinePlugin();
this.registerEventsForOffline();
this.checkOfflineStatus();
this.updateOfflineCount();
}
/**
* This Function is used to Register Formio Offline Plugin
* #memberOf Formio Offline Line service (OfflineService)
*/
public registerOfflinePlugin() {
this.offlinePlugin = new FormioOfflineProject(AppConfig.appUrl);
Formio.registerPlugin(this.offlinePlugin, `offline-plugin`);
}
/**
* This Function is used to Register Formio event lisentenr
* #memberOf Formio Offline Line service (OfflineService)
*/
public registerEventsForOffline() {
Formio.events.on('offline.saveQueue', () => this.updateOfflineCount());
Formio.events.on('offline.queue', () => this.updateOfflineCount());
}
/**
* This Function is used to check Formio Offline Plugin
* #memberOf Formio Offline Line service (OfflineService)
*/
public checkOfflineStatus() {
this.offlinePlugin.ready.then(() => {
console.log('Plugin is ready');
});
}
/**
* This Function is used to check Formio Offline Plugin
* #memberOf Formio Offline Line service (OfflineService)
*/
public updateOfflineCount() {
this.offlinePlugin.ready.then(() => {
// If we are offline, then check the submission queue length.
this.offlineCount = this.offlinePlugin.submissionQueueLength();
this.offlineOps = {};
if (this.offlineCount > 0) {
this.offlineSubmissions = this.offlinePlugin.submissionQueue.map((queued) => {
this.offlineOps[queued.request._id] = queued.request.method;
return queued.request;
});
} else {
this.offlineSubmissions = [];
}
});
console.log("COUNT-------------"+this.offlineCount);
console.log(this.offlineSubmissions);
}
}
Step-4:
To Mock the offline connectivity: Open chrome developer console(network tab) and change the connectivity to offline. (assuming internet connectivity is lost) Refer below image.
Now submit your form which is created in formio and which is rendered in angular application. Expected behavior: Form will be submitted successfully and data will be stored locally by the formio offline plugin.
Once the application is online then stored data will be pushed to form.io with registered formio api