openwebf/webf

Overview

This skill installs and configures WebF native plugins to expose platform capabilities (sharing, camera, payments, geolocation, etc.) to JavaScript running in WebF. It explains the two-part installation (Flutter package + npm package), how to register plugin modules, and common usage patterns for feature detection, error handling, and permissions. The goal is to let web developers call native APIs reliably across iOS, Android, and desktop hosts.

How this skill works

Each native plugin consists of a Flutter package that implements native functionality and an npm package that exposes a JavaScript API. You add the Flutter package to the host app's pubspec.yaml, register the module with WebF.defineModule() in main.dart, and install the corresponding npm package in your web project. JavaScript code then calls the plugin API; the WebF module bridges those calls to platform code.

When to use it

• When you need device features not available or reliable in standard web APIs (camera, native sharing, payments).
• To get native-accurate geolocation, push notifications, or biometric authentication.
• When file system access or saving screenshots to device storage is required.
• To integrate native calendars, contacts, or platform sensors (accelerometer, gyroscope).
• When building cross-platform WebF apps that must use platform-specific capabilities.

Best practices

• Always check the plugin registry first to avoid reinventing functionality.
• Install both sides: add the Flutter package and the npm package, and register the module before runApp().
• Wrap plugin calls in try/catch and provide a web fallback if the module is missing.
• Test on all target platforms and document platform-specific behaviors and required permissions.
• Keep plugins up to date and read changelogs before upgrading.

Example use cases

• Share text, URLs, or images from a WebF app using the Share plugin.
• Capture or pick photos with native camera access and save screenshots to device storage.
• Request native geolocation for higher accuracy than the browser API.
• Implement biometric login backed by native Face ID / fingerprint APIs.
• Process payments using a native payments plugin for better UX and compliance.