@applica-software-guru/react-admin 1.5.367 → 1.5.368
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 +2 -2
- package/docs/push-notifications.md +39 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,6 +11,6 @@ Components library for React to create web applications based on React-Admin and
|
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## Documentation
|
|
15
15
|
|
|
16
|
-
- [
|
|
16
|
+
- [Push Notifications Configuration (Firebase Cloud Messaging)](./docs/push-notifications.md)
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Push Notifications (Firebase Cloud Messaging)
|
|
2
2
|
|
|
3
|
-
> ⚠️ **
|
|
4
|
-
> consulta la documentazione sul backend (Archetipo).
|
|
3
|
+
> ⚠️ **Warning:** To manage push notifications, your backend must expose FCM (Firebase Cloud Messaging) services for token registration and removal. Without these endpoints, push notification integration will not work correctly.
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
This guide explains how to enable and manage push notifications using Firebase Cloud Messaging (FCM) in your project.
|
|
7
6
|
|
|
8
|
-
## 1.
|
|
7
|
+
## 1. Firebase Configuration
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
Retrieve the configuration from the [Firebase Console](https://console.firebase.google.com):
|
|
11
10
|
|
|
12
11
|
```ts
|
|
13
12
|
const config = {
|
|
@@ -17,33 +16,33 @@ const config = {
|
|
|
17
16
|
storageBucket: '<PROJECT_ID>.appspot.com',
|
|
18
17
|
messagingSenderId: '<SENDER_ID>',
|
|
19
18
|
appId: '<APP_ID>',
|
|
20
|
-
vapidKey: '<VAPID_KEY>', //
|
|
21
|
-
apiUrl: 'https://api.
|
|
19
|
+
vapidKey: '<VAPID_KEY>', // From Cloud Messaging > Web Push certificates
|
|
20
|
+
apiUrl: 'https://api.yourdomain.com' // Backend endpoint for token registration
|
|
22
21
|
};
|
|
23
22
|
```
|
|
24
23
|
|
|
25
|
-
## 2.
|
|
24
|
+
## 2. Automatic Enablement in ApplicaAdmin
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
To enable push notifications throughout the application, simply pass the configuration as a prop to `ApplicaAdmin`:
|
|
28
27
|
|
|
29
28
|
```tsx
|
|
30
29
|
import { ApplicaAdmin } from '@/ApplicaAdmin';
|
|
31
30
|
|
|
32
31
|
<ApplicaAdmin
|
|
33
|
-
// ...
|
|
32
|
+
// ...other props
|
|
34
33
|
pushNotifications={config}
|
|
35
34
|
/>;
|
|
36
35
|
```
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
This will ensure that:
|
|
39
38
|
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
39
|
+
- Push notifications are managed globally.
|
|
40
|
+
- The toggle to enable/disable notifications is already integrated in the notifications interface (header).
|
|
41
|
+
- Push messages received in the foreground will automatically update the notifications panel.
|
|
43
42
|
|
|
44
|
-
## 3.
|
|
43
|
+
## 3. Manual Use of the Toggle Button
|
|
45
44
|
|
|
46
|
-
|
|
45
|
+
If you want to show a button to enable/disable notifications in a specific part of the app:
|
|
47
46
|
|
|
48
47
|
```tsx
|
|
49
48
|
import { PushNotificationToggleButton } from '@/components/ra-buttons/PushNotificationToggleButton';
|
|
@@ -51,18 +50,18 @@ import { PushNotificationToggleButton } from '@/components/ra-buttons/PushNotifi
|
|
|
51
50
|
<PushNotificationToggleButton config={config} />;
|
|
52
51
|
```
|
|
53
52
|
|
|
54
|
-
## 4.
|
|
53
|
+
## 4. Technical Details & Lifecycle
|
|
55
54
|
|
|
56
|
-
|
|
55
|
+
The system:
|
|
57
56
|
|
|
58
|
-
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
61
|
-
-
|
|
62
|
-
-
|
|
63
|
-
- In
|
|
57
|
+
- Automatically registers the service worker `/firebase-messaging-sw.js` (must be present in the public root).
|
|
58
|
+
- Requests user permission for notifications.
|
|
59
|
+
- Registers the FCM token on the backend via `{apiUrl}/fcm/register` (POST) and removes it with `{apiUrl}/fcm/{token}` (DELETE).
|
|
60
|
+
- Manages state: `enabled`, `disabled`, `pending`, `error`.
|
|
61
|
+
- Exposes functions to enable/disable/toggle/listen to notifications via the `usePushNotifications` hook.
|
|
62
|
+
- In case of error, shows a notification using the react-admin system.
|
|
64
63
|
|
|
65
|
-
###
|
|
64
|
+
### Advanced Example with Hook
|
|
66
65
|
|
|
67
66
|
```tsx
|
|
68
67
|
import { usePushNotifications } from '@/hooks/usePushNotifications';
|
|
@@ -71,22 +70,26 @@ const { status, enable, disable, toggle, listen } = usePushNotifications(config)
|
|
|
71
70
|
|
|
72
71
|
useEffect(() => {
|
|
73
72
|
const unsubscribe = listen(({ title, message, url }) => {
|
|
74
|
-
//
|
|
73
|
+
// Show a custom notification or update the UI
|
|
75
74
|
});
|
|
76
75
|
return unsubscribe;
|
|
77
76
|
}, [listen]);
|
|
78
77
|
```
|
|
79
78
|
|
|
80
|
-
## 5.
|
|
79
|
+
## 5. Requirements & Notes
|
|
81
80
|
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
85
|
-
-
|
|
81
|
+
- The file `/firebase-messaging-sw.js` must be present in the public root of the project.
|
|
82
|
+
- The backend must expose the endpoints for FCM token registration/removal.
|
|
83
|
+
- Push notification support depends on the browser and user permissions.
|
|
84
|
+
- The system is designed to integrate with React-Admin and ApplicaAdmin, but can also be used in other contexts.
|
|
86
85
|
|
|
87
|
-
|
|
86
|
+
---
|
|
88
87
|
|
|
89
|
-
|
|
88
|
+
For details on backend configuration and troubleshooting, see the official Firebase Cloud Messaging documentation.
|
|
89
|
+
|
|
90
|
+
## 6. Service Worker Template
|
|
91
|
+
|
|
92
|
+
Copy the following file as `/public/firebase-messaging-sw.js` in your project. Remember to replace the Firebase configuration with your own!
|
|
90
93
|
|
|
91
94
|
```js
|
|
92
95
|
/* public/firebase-messaging-sw.js */
|
|
@@ -106,7 +109,7 @@ firebase.initializeApp({
|
|
|
106
109
|
const messaging = firebase.messaging();
|
|
107
110
|
|
|
108
111
|
messaging.onBackgroundMessage((payload) => {
|
|
109
|
-
const title = payload?.data?.title || '
|
|
112
|
+
const title = payload?.data?.title || 'Notification';
|
|
110
113
|
const body = payload?.data?.message || '';
|
|
111
114
|
const url = payload?.data?.url || '/';
|
|
112
115
|
|
|
@@ -135,4 +138,4 @@ self.addEventListener('notificationclick', (event) => {
|
|
|
135
138
|
});
|
|
136
139
|
```
|
|
137
140
|
|
|
138
|
-
> ⚠️ **
|
|
141
|
+
> ⚠️ **Note:** Replace the configuration values with those from your Firebase project!
|
package/package.json
CHANGED