WebSharper Capacitor

This repository provides bindings for Capacitor plugins to be used with WebSharper, enabling seamless integration of Capacitor functionality into WebSharper projects.

Overview

WebSharper Capacitor aims to bring the power of Capacitor plugins to WebSharper developers by providing F# bindings for various Capacitor plugins. These bindings facilitate the creation of modern, cross-platform web and mobile applications with WebSharper.

Currently Bound Plugins

The following Capacitor plugins have bindings in this repository:

1. BiometricAuth - @aparajita/capacitor-biometric-auth
2. ActionSheet - @capacitor/action-sheet
3. AppLauncher - @capacitor/app-launcher
4. App - @capacitor/app
5. BackgroundRunner - @capacitor/background-runner
6. BarcodeScanner - @capacitor/barcode-scanner
7. Browser - @capacitor/browser
8. Camera - @capacitor/camera
9. Clipboard - @capacitor/clipboard
10. Cookies - @capacitor/core
11. Device - @capacitor/device
12. Dialog - @capacitor/dialog
13. Filesystem - @capacitor/filesystem
14. Geolocation - @capacitor/geolocation
15. GoogleMaps - @capacitor/google-maps
16. Haptics - @capacitor/haptics
17. Http - @capacitor/core
18. InAppBrowser - @capacitor/inappbrowser
19. Keyboard - @capacitor/keyboard
20. LocalNotifications - @capacitor/local-notifications
21. Motion - @capacitor/motion
22. Network - @capacitor/network
23. Preferences - @capacitor/preferences
24. PushNotifications - @capacitor/push-notifications
25. ScreenOrientation - @capacitor/screen-orientation
26. ScreenReader - @capacitor/screen-reader
27. Share - @capacitor/share
28. SplashScreen - @capacitor/splash-screen
29. StatusBar - @capacitor/status-bar
30. TextZoom - @capacitor/text-zoom
31. Toast - @capacitor/toast
32. Watch - @capacitor/watch

Getting Started

Prerequisites

Before starting, ensure you have the following:

• Node.js and npm installed on your machine.
• Capacitor set up for managing cross-platform apps.
• WebSharper used for building F#-based web applications.
• A project structure ready to integrate Capacitor and WebSharper.

Installation

1. Initialize a Capacitor project:

   npm init                # Initialize a new Node.js project
   npm install             # Install default dependencies
   npm i @capacitor/core   # Install Capacitor core library
   npm i -D @capacitor/cli # Install Capacitor CLI as a dev dependency
   npx cap init "YourApp" com.example.yourapp --web-dir wwwroot/dist # Initialize Capacitor in the project

2. Add the WebSharper Capacitor NuGet package:

   dotnet add package WebSharper.Capacitor --version 8.0.0.494-beta1

3. Add Android platform:

   npm i @capacitor/android  # Install Capacitor Android platform support
   npx cap add android       # Add the Android platform to your project

4. Add iOS platform:

   npm i @capacitor/ios      # Install Capacitor iOS platform support
   npx cap add ios           # Add the iOS platform to your project

5. Choose and install the Capacitor plugins you want to use. For example, to use the Camera plugin:

   npm i @capacitor/camera

6. Build your project:

   npm i vite                # Install Vite for building your web assets
   npx vite build            # Build your web project with Vite

7. Sync configuration:

   npx cap sync              # Sync Capacitor configuration and plugins

Notes

• Ensure your Capacitor project is correctly configured with capacitor.config.json.
• The WebSharper Capacitor package provides bindings for seamless integration but still requires Capacitor plugins to be installed via npm.
• Check out sample usage of plugins in the WebSharper.Capacitor.Sample directory.