@nitra/cap 1.0.1 → 1.0.2

package/README.md

@@ -3,3 +3,4 @@
 | Папка                       | Описание                                               |
 |-----------------------------|--------------------------------------------------------|
 | [app-update](./app-apdate/) | Проверка и установка новой версии приложения в маркете |
+| [save-token](./save-token/) | Отримання та збереження push токену                    |

package/index.js

@@ -1 +1,2 @@
 export * from './app-update'
+export * from './save-token'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitra/cap",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Nitra capacitor components",
   "type": "module",
   "scripts": {
@@ -17,7 +17,9 @@
   },
   "homepage": "https://github.com/nitra/cap",
   "dependencies": {
+    "@capacitor-firebase/messaging": "^6.1.0",
     "@capacitor/core": "^6.1.2",
-    "@capawesome/capacitor-app-update": "^6.0.0"
+    "@capawesome/capacitor-app-update": "^6.0.0",
+    "firebase": "^10.13.1"
   }
 }

package/save-token/README.md

@@ -0,0 +1,84 @@
+# Receiving and Saving User Push Tokens
+
+## Description
+
+This library is designed to handle obtaining and saving Firebase push tokens on the client side. It supports both mobile platforms (via Capacitor) and web platforms. The main function, `saveToken`, retrieves a push token from Firebase, stores it locally, and sends it to your server.
+
+This library interacts with Firebase for token management and Capacitor to check the platform and permissions. It ensures that push tokens are properly handled, regardless of whether the platform is iOS, Android, or Web.
+
+## API
+
+### `saveToken()`
+
+```typescript
+saveToken() => Promise<void>
+```
+
+## usage with Vite
+### Set vapid key : ``` import.meta.env.VITE_VAPID_KEY ```
+### Set host url of the notify project: ``` import.meta.env.VITE_NOTIFY_URL ```
+The ```notify project``` is a server-side component designed to handle API requests for saving user push tokens. It uses the Fastify framework and JWT-based security for authentication.
+### Or set for local dev: ```import.meta.env.VITE_LOCALHOST```
+
+### Set the name of your app: ```import.meta.env.VITE_APP```
+
+## usage the library
+### To use this package, you should add this code to your project where you want to provide push notifications
+
+```typescript
+initializeApp({
+    apiKey: import.meta.env.VITE_API_KEY,
+    authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+    projectId: import.meta.env.VITE_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_APP_ID
+})
+```
+### This code will initialize firebase
+
+## example in node
+### Using function after login
+```jsx
+    <template>
+    <n-code @token-checked="saveToken" />
+    </template>
+
+    <script setup>
+    import NCode from '@nitra/abie-components/auth/NCode.vue'
+    import { saveToken } from '@nitra/cap'
+
+    await saveToken()
+    </script>
+
+    <route lang="yaml">
+    meta:
+    layout: blank
+    </route>
+
+```
+
+## Environment Variable Validation with Vite
+### To ensure that required environment variables are set, add the following to your vite.config.js
+```typescript
+import { requireEnvVar } from '@nitra/vite-check-env'
+
+export default {
+  plugins: [
+    requireEnvVar([
+      'VITE_API_KEY',
+      'VITE_AUTH_DOMAIN',
+      'VITE_PROJECT_ID'
+      'VITE_STORAGE_BUCKET',
+      'VITE_MESSAGING_SENDER_ID',
+      'VITE_APP_ID',
+      'VITE_VAPID_KEY',
+      'VITE_NOTIFY_URL',
+      'VITE_APP'])
+  ]
+}
+```
+### Install the plugin in the project directory
+```typescript
+yarn add -D @nitra/vite-check-env
+```

package/save-token/firebase-messaging-sw.js

@@ -0,0 +1,3 @@
+import { getMessaging } from 'firebase/messaging/sw'
+// eslint-disable-next-line no-unused-vars
+const messaging = getMessaging()

package/save-token/index.js

@@ -0,0 +1,92 @@
+import { Capacitor } from '@capacitor/core'
+import { FirebaseMessaging } from '@capacitor-firebase/messaging'
+import { getToken } from '@nitra/vite-boot/token'
+
+/**
+ * Save the Firebase push token for a given app and platform.
+ * @returns {Promise<void>}
+ */
+export async function saveToken() {
+  try {
+    if (localStorage.getItem('pushToken')) {
+      console.log('Push Token is already exists.')
+
+      return
+    }
+
+    if (!Capacitor.isPluginAvailable('FirebaseMessaging')) {
+      console.error('FirebaseMessaging plugin is not available')
+
+      return
+    }
+
+    let permissions = await FirebaseMessaging.checkPermissions()
+
+    if (permissions.receive !== 'granted') {
+      console.warn('Permissions are not granted, try to request permissions...')
+
+      let permissionsRequest = await FirebaseMessaging.requestPermissions()
+
+      if (permissionsRequest.receive !== 'granted') {
+        console.error('Permissions are not granted, exiting...')
+
+        return
+      }
+    }
+
+    const pushToken = Capacitor.isNativePlatform()
+      ? await FirebaseMessaging.getToken() // For iOS/Android
+      : await getWebPushToken()
+
+    if (!pushToken?.token && typeof pushToken?.token !== 'string') {
+      console.error('Token is undefined exiting...')
+
+      return
+    }
+
+    await sendTokenToServer(pushToken.token)
+  } catch (error) {
+    console.error('Error while saving push token:', error)
+  }
+}
+
+/**
+ * Get the Firebase push token for web platform.
+ * @returns {Promise<object>} Web Push token
+ */
+async function getWebPushToken() {
+  const serviceWorkerRegistration = await navigator.serviceWorker.register('src/firebase-messaging-sw.js', {
+    type: 'module'
+  })
+
+  return FirebaseMessaging.getToken({
+    vapidKey: import.meta.env.VITE_VAPID_KEY,
+    serviceWorkerRegistration
+  })
+}
+
+/**
+ * Send the Firebase push token to the server.
+ * @param {string} pushToken - The push token returned by Firebase Messaging.
+ * @returns {Promise<void>}
+ */
+async function sendTokenToServer(pushToken) {
+  const host = import.meta.env.VITE_NOTIFY_URL ?? import.meta.env.VITE_LOCALHOST
+
+  const response = await fetch(`${host}/save-user`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      authorization: `Bearer ${getToken()}`
+    },
+    body: JSON.stringify({
+      platform: Capacitor.getPlatform(),
+      app: import.meta.env.VITE_APP,
+      token: pushToken
+    })
+  })
+
+  if (response.ok) {
+    localStorage.setItem('pushToken', pushToken)
+  }
+}