Install WebF native plugins to access platform capabilities like sharing, payment, camera, geolocation, and more. Use when building features that require native device APIs beyond standard web APIs.
When building WebF apps, you often need access to native platform capabilities like sharing content, accessing the camera, handling payments, or using geolocation. WebF provides native plugins that bridge JavaScript code with native platform APIs.
Native plugins are packages that:
Use native plugins when you need capabilities that aren't available in standard web APIs:
fetch() for HTTP requestslocalStorage for local storageBefore implementing a feature, always check if a pre-built native plugin exists:
Every native plugin requires TWO installations:
Visit https://openwebf.com/en/native-plugins and search for the capability you need:
webf_share)@openwebf/webf-share)If you have access to the Flutter project hosting your WebF app:
pubspec.yamldependencies:
webf_share: ^1.0.0 # Replace with actual plugin name
flutter pub getimport 'package:webf/webf.dart';
import 'package:webf_share/webf_share.dart'; // Import the plugin
void main() {
// Initialize WebFControllerManager
WebFControllerManager.instance.initialize(WebFControllerManagerConfig(
maxAliveInstances: 2,
maxAttachedInstances: 1,
));
// Register the native plugin module
WebF.defineModule((context) => ShareModule(context));
runApp(MyApp());
}
In your JavaScript/TypeScript project:
# For the Share plugin example
npm install @openwebf/webf-share
# Or with yarn
yarn add @openwebf/webf-share
Import and use the plugin in your application:
import { WebFShare } from '@openwebf/webf-share';
// Use the plugin API
const success = await WebFShare.shareText({
title: 'My App',
text: 'Check out this amazing content!',
url: 'https://example.com'
});
Description: Share content, text, and images through native platform sharing
Capabilities:
Flutter Package: webf_share: ^1.0.0
npm Package: @openwebf/webf-share
Example Usage:
import { WebFShare, ShareHelpers } from '@openwebf/webf-share';
// Share text content
await WebFShare.shareText({
title: 'Article Title',
text: 'Check out this article!',
url: 'https://example.com/article'
});
// Share an image from canvas
const canvas = document.getElementById('myCanvas');
const imageData = ShareHelpers.canvasToArrayBuffer(canvas);
await WebFShare.shareImage(imageData);
// Save screenshot
await WebFShare.saveScreenshot(imageData);
Storage Locations:
/storage/emulated/0/Download/)See the Native Plugins Reference for more available plugins.
Always check if a plugin is available before using it:
// Check if plugin is loaded
if (typeof WebFShare !== 'undefined') {
await WebFShare.shareText({ text: 'Hello' });
} else {
// Fallback or show message
console.log('Share plugin not available');
}
Wrap plugin calls in try-catch blocks:
try {
const success = await WebFShare.shareText({
title: 'My App',
text: 'Check this out!'
});
if (success) {
console.log('Content shared successfully');
}
} catch (error) {
console.error('Failed to share:', error);
// Show error message to user
}
All plugins include TypeScript definitions:
import type { ShareTextOptions } from '@openwebf/webf-share';
const shareOptions: ShareTextOptions = {
title: 'Article',
text: 'Read this article',
url: 'https://example.com'
};
await WebFShare.shareText(shareOptions);
If you need capabilities not provided by existing plugins, you can create your own:
Cause: Flutter package not installed or module not registered
Solution:
pubspec.yamlWebF.defineModule() in main.dartflutter pub getCause: npm package not installed correctly
Solution:
# Reinstall the package
npm install @openwebf/webf-share --save
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
Cause: Platform-specific permissions or configuration missing
Solution:
AndroidManifest.xml or Info.plistCause: Plugin module not registered in Flutter
Solution:
Make sure you're calling WebF.defineModule() in your Flutter main() function before runApp():
void main() {
WebF.defineModule((context) => ShareModule(context));
runApp(MyApp());
}
Before implementing a feature, visit https://openwebf.com/en/native-plugins to see if a plugin already exists. Don't reinvent the wheel.
Native plugins may behave differently on iOS vs Android vs macOS:
Not all users may have the plugin installed (especially during development):
if (typeof WebFShare !== 'undefined') {
// Use native sharing
await WebFShare.shareText({ text: 'Hello' });
} else {
// Fallback: copy to clipboard or show a link
navigator.clipboard.writeText('Hello');
}
Some plugins require user permissions (camera, location, etc.):
Native plugins are updated to support new platform features and fix bugs:
When deploying to production:
pubspec.yamlpackage.jsonAfter installing native plugins:
webf-api-compatibility for web API alternativesWebF.defineModule() in main.dart