@capawesome/capacitor-haptics 0.0.1 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -18
- package/android/build.gradle +1 -1
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -23,9 +23,15 @@ Capacitor plugin to provide haptic feedback such as impacts, notifications, vibr
|
|
|
23
23
|
|
|
24
24
|
Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
|
|
25
25
|
|
|
26
|
-
##
|
|
26
|
+
## Use Cases
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
The Haptics plugin is typically used to make an app feel more responsive and tactile, for example:
|
|
29
|
+
|
|
30
|
+
- **Button and gesture feedback**: Trigger impact feedback when user interface elements collide or a drag operation snaps into place.
|
|
31
|
+
- **Success and error feedback**: Use notification haptics to communicate that a task has succeeded, failed, or produced a warning.
|
|
32
|
+
- **Pickers and selection controls**: Give subtle selection feedback while the user scrolls through a picker.
|
|
33
|
+
- **Games and rich interactions**: Play custom haptic patterns with per-event intensity and sharpness for immersive experiences.
|
|
34
|
+
- **Alerts**: Vibrate the device with a custom duration to get the user's attention.
|
|
29
35
|
|
|
30
36
|
## Compatibility
|
|
31
37
|
|
|
@@ -69,30 +75,65 @@ No configuration required for this plugin.
|
|
|
69
75
|
|
|
70
76
|
## Usage
|
|
71
77
|
|
|
72
|
-
|
|
73
|
-
import {
|
|
74
|
-
AndroidHapticType,
|
|
75
|
-
Haptics,
|
|
76
|
-
ImpactStyle,
|
|
77
|
-
NotificationType,
|
|
78
|
-
} from '@capawesome/capacitor-haptics';
|
|
78
|
+
The following examples show how to check if haptic feedback is available, trigger impact and notification feedback, give selection feedback, play a custom haptic pattern, perform an Android haptic effect, and vibrate the device.
|
|
79
79
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
### Check if haptic feedback is available
|
|
81
|
+
|
|
82
|
+
Check whether the device supports haptic feedback before using the other methods:
|
|
83
|
+
|
|
84
|
+
```typescript
|
|
85
|
+
import { Haptics } from '@capawesome/capacitor-haptics';
|
|
83
86
|
|
|
84
87
|
const isAvailable = async () => {
|
|
85
88
|
const { available } = await Haptics.isAvailable();
|
|
86
89
|
return available;
|
|
87
90
|
};
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Trigger impact feedback
|
|
94
|
+
|
|
95
|
+
Simulate a physical impact, for example when user interface elements collide or a drag operation snaps into place. Five different styles are available, including the modern `Rigid` and `Soft` styles:
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
import { Haptics, ImpactStyle } from '@capawesome/capacitor-haptics';
|
|
99
|
+
|
|
100
|
+
const impact = async () => {
|
|
101
|
+
await Haptics.impact({ style: ImpactStyle.Medium });
|
|
102
|
+
};
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Trigger notification feedback
|
|
106
|
+
|
|
107
|
+
Communicate that a task or action has succeeded, failed, or produced a warning:
|
|
108
|
+
|
|
109
|
+
```typescript
|
|
110
|
+
import { Haptics, NotificationType } from '@capawesome/capacitor-haptics';
|
|
88
111
|
|
|
89
112
|
const notification = async () => {
|
|
90
113
|
await Haptics.notification({ type: NotificationType.Success });
|
|
91
114
|
};
|
|
115
|
+
```
|
|
92
116
|
|
|
93
|
-
|
|
94
|
-
|
|
117
|
+
### Give selection feedback
|
|
118
|
+
|
|
119
|
+
Give subtle feedback during picker-style interactions. Call `selectionStart()` when the interaction begins, `selectionChanged()` whenever the selection changes, and `selectionEnd()` when the interaction finishes:
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
import { Haptics } from '@capawesome/capacitor-haptics';
|
|
123
|
+
|
|
124
|
+
const selection = async () => {
|
|
125
|
+
await Haptics.selectionStart();
|
|
126
|
+
await Haptics.selectionChanged();
|
|
127
|
+
await Haptics.selectionEnd();
|
|
95
128
|
};
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Play a custom haptic pattern
|
|
132
|
+
|
|
133
|
+
Play a custom pattern composed of individual haptic events with per-event intensity and sharpness. On iOS, the pattern is played using Core Haptics; on Android, it is approximated using vibration effects:
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { Haptics } from '@capawesome/capacitor-haptics';
|
|
96
137
|
|
|
97
138
|
const playPattern = async () => {
|
|
98
139
|
await Haptics.playPattern({
|
|
@@ -103,12 +144,26 @@ const playPattern = async () => {
|
|
|
103
144
|
],
|
|
104
145
|
});
|
|
105
146
|
};
|
|
147
|
+
```
|
|
106
148
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
149
|
+
### Perform an Android haptic effect
|
|
150
|
+
|
|
151
|
+
Perform a semantic Android haptic feedback effect that respects the user's haptic feedback settings. Only available on Android:
|
|
152
|
+
|
|
153
|
+
```typescript
|
|
154
|
+
import { AndroidHapticType, Haptics } from '@capawesome/capacitor-haptics';
|
|
155
|
+
|
|
156
|
+
const performAndroidHaptic = async () => {
|
|
157
|
+
await Haptics.performAndroidHaptic({ type: AndroidHapticType.Confirm });
|
|
111
158
|
};
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Vibrate the device
|
|
162
|
+
|
|
163
|
+
Vibrate the device. The `duration` option is only available on Android and Web:
|
|
164
|
+
|
|
165
|
+
```typescript
|
|
166
|
+
import { Haptics } from '@capawesome/capacitor-haptics';
|
|
112
167
|
|
|
113
168
|
const vibrate = async () => {
|
|
114
169
|
await Haptics.vibrate({ duration: 500 });
|
|
@@ -448,6 +503,46 @@ The haptic capabilities of the platforms differ. This plugin maps every method t
|
|
|
448
503
|
|
|
449
504
|
Custom haptic patterns are strongest on iOS, where Core Haptics supports per-event intensity and sharpness. On Android, patterns are approximated using vibration effect primitives (Android 11+ with supported hardware) or amplitude-controlled waveforms. On the web, patterns are approximated using the Vibration API, which only supports on/off timings.
|
|
450
505
|
|
|
506
|
+
## FAQ
|
|
507
|
+
|
|
508
|
+
### How is this plugin different from other similar plugins?
|
|
509
|
+
|
|
510
|
+
It covers the full range of haptic feedback through one fully typed API: impacts with five styles including the modern Rigid and Soft, notification and selection feedback, custom patterns with per-event intensity and sharpness via Core Haptics on iOS, semantic Android effects that respect the user's system settings, and an availability check — consistently across Android, iOS, and best-effort Web. It is actively maintained against the latest Capacitor and OS versions. If you only need a simple vibration, a minimal setup is fine; if you want rich, platform-aware haptics, this plugin is designed for exactly that.
|
|
511
|
+
|
|
512
|
+
### How is this plugin different from the official Capacitor Haptics plugin?
|
|
513
|
+
|
|
514
|
+
This plugin is a drop-in replacement for the official `@capacitor/haptics` plugin with additional features: an `isAvailable()` method, semantic Android haptic effects via `performAndroidHaptic(...)`, custom haptic patterns via `playPattern(...)`, and the modern `Rigid` and `Soft` impact styles. Note that the default impact style is `ImpactStyle.Medium` instead of `ImpactStyle.Heavy`, see [Migrating from `@capacitor/haptics`](#migrating-from-capacitorhaptics).
|
|
515
|
+
|
|
516
|
+
### Do I need to configure any permissions?
|
|
517
|
+
|
|
518
|
+
No, the plugin already declares the `android.permission.VIBRATE` permission in its own manifest, so no additional configuration is required on Android. On iOS and Web, no configuration is required either.
|
|
519
|
+
|
|
520
|
+
### Why don't I feel any haptic feedback on my device?
|
|
521
|
+
|
|
522
|
+
First, use the `isAvailable()` method to check whether haptic feedback is available: on Android it checks whether the device has a vibrator, on iOS whether the device supports haptic event playback, and on the web whether the Vibration API is supported. Also keep in mind that on Android, the intensity of haptic events is only respected on devices with amplitude control, and that `performAndroidHaptic(...)` respects the user's haptic feedback settings.
|
|
523
|
+
|
|
524
|
+
### Are custom haptic patterns supported on all platforms?
|
|
525
|
+
|
|
526
|
+
Custom patterns are strongest on iOS, where Core Haptics supports per-event intensity and sharpness; this requires a device with haptic event playback support (for example an iPhone with a Taptic Engine), otherwise the call rejects as unavailable. On Android, patterns are approximated using vibration effect primitives or amplitude-controlled waveforms. On the web, patterns are approximated using the Vibration API, which only supports on/off timings.
|
|
527
|
+
|
|
528
|
+
### What is the difference between `vibrate` and `playPattern`?
|
|
529
|
+
|
|
530
|
+
The `vibrate(...)` method triggers a single vibration with a custom duration, whereby the duration is only respected on Android and Web (on iOS, a system vibration with a fixed duration is played). The `playPattern(...)` method plays a sequence of individual haptic events, each with its own time, intensity, sharpness, and duration.
|
|
531
|
+
|
|
532
|
+
### Can I use this plugin with Ionic, React, Vue or Angular?
|
|
533
|
+
|
|
534
|
+
Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
|
|
535
|
+
|
|
536
|
+
## Related Plugins
|
|
537
|
+
|
|
538
|
+
- [Shake](https://capawesome.io/docs/sdks/capacitor/shake/): Detect shake gestures, for example to respond with haptic feedback.
|
|
539
|
+
- [Silent Mode](https://capawesome.io/docs/sdks/capacitor/silent-mode/): Detect whether the device is in silent mode.
|
|
540
|
+
- [Volume](https://capawesome.io/docs/sdks/capacitor/volume/): Control the volume and observe hardware volume button presses.
|
|
541
|
+
|
|
542
|
+
## Newsletter
|
|
543
|
+
|
|
544
|
+
Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
|
|
545
|
+
|
|
451
546
|
## Changelog
|
|
452
547
|
|
|
453
548
|
See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/haptics/CHANGELOG.md).
|
package/android/build.gradle
CHANGED
|
@@ -30,7 +30,7 @@ android {
|
|
|
30
30
|
buildTypes {
|
|
31
31
|
release {
|
|
32
32
|
minifyEnabled false
|
|
33
|
-
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
|
|
33
|
+
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
lintOptions {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capawesome/capacitor-haptics",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Capacitor plugin to provide haptic feedback such as impacts, notifications, vibrations and custom haptic patterns.",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Capacitor plugin to provide haptic feedback such as impacts, notifications, vibrations and custom haptic patterns on Android, iOS, and Web.",
|
|
5
5
|
"main": "dist/plugin.cjs.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/esm/index.d.ts",
|
|
@@ -42,7 +42,13 @@
|
|
|
42
42
|
"haptic feedback",
|
|
43
43
|
"vibration",
|
|
44
44
|
"taptic engine",
|
|
45
|
-
"vibrate"
|
|
45
|
+
"vibrate",
|
|
46
|
+
"capacitor-plugin",
|
|
47
|
+
"core haptics",
|
|
48
|
+
"haptic pattern",
|
|
49
|
+
"impact feedback",
|
|
50
|
+
"notification feedback",
|
|
51
|
+
"vibration api"
|
|
46
52
|
],
|
|
47
53
|
"scripts": {
|
|
48
54
|
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
|