@onesignal/onesignal-vue3 2.1.0 → 2.2.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/.eslintignore ADDED
@@ -0,0 +1,2 @@
1
+ dist/
2
+ example/
@@ -4,33 +4,27 @@ module.exports = {
4
4
  browser: true,
5
5
  es6: true,
6
6
  node: true,
7
+ worker: true,
7
8
  },
8
9
  settings: {
9
10
  "import/resolver": {
10
11
  node: {
11
12
  paths: ["src"],
12
- extensions: [
13
- ".js",
14
- ".ts",
15
- ],
13
+ extensions: [".js", ".ts"],
16
14
  },
17
15
  },
18
16
  },
19
17
  globals: {
20
- Atomics: 'readonly',
21
- SharedArrayBuffer: 'readonly',
18
+ Atomics: "readonly",
19
+ SharedArrayBuffer: "readonly",
22
20
  },
23
- parser: '@typescript-eslint/parser',
21
+ parser: "@typescript-eslint/parser",
24
22
  parserOptions: {
25
23
  ecmaVersion: 2018,
26
- sourceType: 'module',
24
+ sourceType: "module",
27
25
  },
28
- plugins: [
29
- '@typescript-eslint',
30
- ],
31
- extends: [
32
- 'plugin:@typescript-eslint/recommended',
33
- ],
26
+ plugins: ["@typescript-eslint"],
27
+ extends: ["plugin:@typescript-eslint/recommended"],
34
28
  rules: {
35
29
  "prefer-destructuring": 0,
36
30
  "no-param-reassign": 0,
@@ -24,7 +24,7 @@ jobs:
24
24
  node-version: 'lts/*'
25
25
  registry-url: 'https://registry.npmjs.org'
26
26
  - name: Install dependencies
27
- run: yarn install
27
+ run: npm ci
28
28
  - name: Release
29
29
  env:
30
30
  GITHUB_TOKEN: ${{ secrets.GH_WEB_SHIM_PUSH_TOKEN }}
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.2.1](https://github.com/OneSignal/onesignal-vue3/compare/2.2.0...2.2.1) (2025-03-28)
4
+
5
+ ### Bug Fixes
6
+
7
+ * add promise reject for init call ([da28464](https://github.com/OneSignal/onesignal-vue3/commit/da28464e8c233ae37824db57b349ab49f01fca55))
8
+
9
+ ## [2.2.0](https://github.com/OneSignal/onesignal-vue3/compare/2.1.0...2.2.0) (2025-03-24)
10
+
11
+ ### Features
12
+
13
+ * sync with web-shim-codegen v3.0.2 ([7bca3c5](https://github.com/OneSignal/onesignal-vue3/commit/7bca3c52704d04a55beb179f23ef5bd3d35e660f))
14
+
3
15
  ## [2.1.0](https://github.com/OneSignal/onesignal-vue3/compare/2.0.1...2.1.0) (2025-03-18)
4
16
 
5
17
  ### Features
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- <h1 align="center">welcome to onesignal-vue3 👋</h1>
1
+ <h1 align="center">Welcome to onesignal-vue3 👋</h1>
2
2
  <p>
3
3
  <a href="https://www.npmjs.com/package/onesignal-vue3" target="_blank">
4
4
  <img alt="Version" src="https://img.shields.io/npm/v/onesignal-vue3.svg">
@@ -16,35 +16,37 @@
16
16
 
17
17
  > This is a JavaScript module that can be used to easily include [OneSignal](https://onesignal.com/) code in a website or app that uses Vue for its front-end codebase.
18
18
 
19
- * 🏠 [Homepage](https://onesignal.com)
20
- * 🖤 [npm](https://www.npmjs.com/package/@onesignal/onesignal-vue3)
19
+ - 🏠 [Homepage](https://onesignal.com)
20
+ - 🖤 [npm](https://www.npmjs.com/package/@onesignal/onesignal-vue3)
21
21
 
22
22
  OneSignal is the world's leader for Mobile Push Notifications, Web Push, and In-App Messaging. It is trusted by 2 million+ businesses to send 9 billion Push Notifications per day.
23
23
 
24
24
  You can find more information on OneSignal [here](https://onesignal.com/).
25
25
 
26
26
  > Upgrading from Version 1?
27
- See our [migration guide](./MigrationGuide.md) to get started with v2.
27
+ > See our [migration guide](./MigrationGuide.md) to get started with v2.
28
28
 
29
29
  ## Contents
30
+
30
31
  - [Install](#install)
31
32
  - [Usage](#usage)
32
33
  - [API](#onesignal-api)
33
34
  - [Advanced Usage](#advanced-usage)
34
35
 
35
36
  ---
37
+
36
38
  ## Vue Compatibility
39
+
37
40
  Make sure you install a plugin version compatible with your Vue environment.
38
41
 
39
- | Vue | OneSignal Plugin |
40
- |-----|------------------|
41
- | 2 | [onesignal-vue](https://github.com/OneSignal/onesignal-vue) |
42
- | 3 | onesignal-vue3 |
42
+ | Vue | OneSignal Plugin |
43
+ | --- | ----------------------------------------------------------- |
44
+ | 2 | [onesignal-vue](https://github.com/OneSignal/onesignal-vue) |
45
+ | 3 | onesignal-vue3 |
43
46
 
44
47
  ## Install
45
48
 
46
- You can use `yarn` or `npm`.
47
-
49
+ Run `npm install`
48
50
 
49
51
  ### Yarn
50
52
 
@@ -58,7 +60,14 @@ yarn add @onesignal/onesignal-vue3
58
60
  npm install --save @onesignal/onesignal-vue3
59
61
  ```
60
62
 
63
+ ### Yarn
64
+
65
+ ```bash
66
+ yarn add @onesignal/onesignal-vue3
67
+ ```
68
+
61
69
  ---
70
+
62
71
  ## Usage
63
72
 
64
73
  ## Plugin setup
@@ -67,28 +76,29 @@ In Vue 3, you can pass in the OneSignal initialization options directly as an ar
67
76
 
68
77
  ```js
69
78
  // main
70
- import { createApp } from 'vue'
71
- import OneSignalVuePlugin from '@onesignal/onesignal-vue3'
72
-
73
- createApp(App).use(OneSignalVuePlugin, {
74
- appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
75
- }).mount('#app');
76
-
79
+ import { createApp } from 'vue';
80
+ import OneSignalVuePlugin from '@onesignal/onesignal-vue3';
81
+
82
+ createApp(App)
83
+ .use(OneSignalVuePlugin, {
84
+ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
85
+ })
86
+ .mount('#app');
77
87
  ```
88
+
78
89
  or
79
90
 
80
91
  ```js
81
92
  //main
82
- import { createApp } from 'vue'
83
- import OneSignalVuePlugin from '@onesignal/onesignal-vue3'
93
+ import { createApp } from 'vue';
94
+ import OneSignalVuePlugin from '@onesignal/onesignal-vue3';
84
95
 
85
96
  createApp(App).use(OneSignalVuePlugin).mount('#app');
86
97
 
87
98
  // component
88
99
  this.$OneSignal.init({
89
- appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
100
+ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
90
101
  });
91
-
92
102
  ```
93
103
 
94
104
  The OneSignal plugin automatically exposes a `$OneSignal` global property accessible inside the application.
@@ -98,63 +108,70 @@ The OneSignal plugin automatically exposes a `$OneSignal` global property access
98
108
  You can also leverage Vue's [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) via the `useOneSignal` function that can be called from within [`setup`](https://vuejs.org/api/composition-api-setup.html#basic-usage).
99
109
 
100
110
  ## Reference
111
+
101
112
  ### Initialization
113
+
102
114
  The `init` function returns a promise that resolves when OneSignal is loaded.
103
115
 
104
116
  **Examples**
117
+
105
118
  ```js
106
119
  await this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
107
120
  // do other stuff
108
121
  ```
109
122
 
110
123
  ```js
111
- this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {
112
- // do other stuff
113
- });
124
+ this.$OneSignal
125
+ .init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' })
126
+ .then(() => {
127
+ // do other stuff
128
+ });
114
129
  ```
115
130
 
116
131
  ### Init Options
132
+
117
133
  You can pass other [options](https://documentation.onesignal.com/v11.0/docs/web-sdk#initializing-the-sdk) to the `init` function. Use these options to configure personalized prompt options, auto-resubscribe, and more.
118
134
 
119
135
  <details>
120
136
  <summary>Expand to see more options</summary>
121
137
 
122
- | Property Name | Type | Description |
123
- | ---------------------------| --------------------- | -------------------------------------------------- |
124
- | `appId` | `string` | The ID of your OneSignal app. |
125
- | `autoRegister` | `boolean` (optional) | Whether or not to automatically register the user. |
126
- | `autoResubscribe` | `boolean` (optional) | Whether or not to automatically resubscribe the user. |
127
- | `path` | `string` (optional) | The path to the OneSignal service worker file. |
128
- | `serviceWorkerPath` | `string` (optional) | The path to the OneSignal service worker script. |
129
- | `serviceWorkerUpdaterPath` | `string` (optional) | The path to the OneSignal service worker updater script. |
130
- | `subdomainName` | `string` (optional) | The subdomain of your OneSignal app. |
131
- | `allowLocalhostAsSecureOrigin` | `boolean` (optional) | Whether or not to allow localhost as a secure origin. |
132
- | `requiresUserPrivacyConsent`| `boolean` (optional) | Whether or not the user's consent is required. |
133
- | `persistNotification` | `boolean` (optional) | Whether or not notifications should persist. |
134
- | `notificationClickHandlerMatch`| `string` (optional) | The URL match pattern for notification clicks. |
135
- | `notificationClickHandlerAction`| `string` (optional)| The action to perform when a notification is clicked. |
136
- | `welcomeNotification` | `object` (optional) | The welcome notification configuration. |
137
- | `notifyButton` | `object` (optional) | The notify button configuration. |
138
- | `promptOptions` | `object` (optional) | Additional options for the subscription prompt. |
139
- | `webhooks` | `object` (optional) | The webhook configuration. |
140
- | `[key: string]` | `any` | Additional properties can be added as needed. |
138
+ | Property Name | Type | Description |
139
+ | -------------------------------- | -------------------- | -------------------------------------------------------- |
140
+ | `appId` | `string` | The ID of your OneSignal app. |
141
+ | `autoRegister` | `boolean` (optional) | Whether or not to automatically register the user. |
142
+ | `autoResubscribe` | `boolean` (optional) | Whether or not to automatically resubscribe the user. |
143
+ | `path` | `string` (optional) | The path to the OneSignal service worker file. |
144
+ | `serviceWorkerPath` | `string` (optional) | The path to the OneSignal service worker script. |
145
+ | `serviceWorkerUpdaterPath` | `string` (optional) | The path to the OneSignal service worker updater script. |
146
+ | `subdomainName` | `string` (optional) | The subdomain of your OneSignal app. |
147
+ | `allowLocalhostAsSecureOrigin` | `boolean` (optional) | Whether or not to allow localhost as a secure origin. |
148
+ | `requiresUserPrivacyConsent` | `boolean` (optional) | Whether or not the user's consent is required. |
149
+ | `persistNotification` | `boolean` (optional) | Whether or not notifications should persist. |
150
+ | `notificationClickHandlerMatch` | `string` (optional) | The URL match pattern for notification clicks. |
151
+ | `notificationClickHandlerAction` | `string` (optional) | The action to perform when a notification is clicked. |
152
+ | `welcomeNotification` | `object` (optional) | The welcome notification configuration. |
153
+ | `notifyButton` | `object` (optional) | The notify button configuration. |
154
+ | `promptOptions` | `object` (optional) | Additional options for the subscription prompt. |
155
+ | `webhooks` | `object` (optional) | The webhook configuration. |
156
+ | `[key: string]` | `any` | Additional properties can be added as needed. |
141
157
 
142
158
  **Service Worker Params**
143
159
  You can customize the location and filenames of service worker assets. You are also able to specify the specific scope that your service worker should control. You can read more [here](https://documentation.onesignal.com/docs/onesignal-service-worker-faq#sdk-parameter-reference-for-service-workers).
144
160
 
145
161
  In this distribution, you can specify the parameters via the following:
146
162
 
147
- | Field | Details |
148
- |----------------------------|------------------------------------------------------------------------------------------------------------------------|
149
- | `serviceWorkerParam` | Use to specify the scope, or the path the service worker has control of. Example: `{ scope: "/js/push/onesignal/" }` |
150
- | `serviceWorkerPath` | The path to the service worker file. |
163
+ | Field | Details |
164
+ | -------------------- | -------------------------------------------------------------------------------------------------------------------- |
165
+ | `serviceWorkerParam` | Use to specify the scope, or the path the service worker has control of. Example: `{ scope: "/js/push/onesignal/" }` |
166
+ | `serviceWorkerPath` | The path to the service worker file. |
151
167
 
152
168
  </details>
153
169
 
154
170
  ---
155
171
 
156
172
  ### Service Worker File
157
- If you haven't done so already, you will need to add the [OneSignal Service Worker file](https://github.com/OneSignal/OneSignal-Website-SDK/files/7585231/OneSignal-Web-SDK-HTTPS-Integration-Files.zip) to your site ([learn more](https://documentation.onesignal.com/docs/web-push-quickstart#step-6-upload-files)).
173
+
174
+ If you haven't done so already, you will need to add the [OneSignal Service Worker file](https://github.com/OneSignal/OneSignal-Website-SDK/files/11480764/OneSignalSDK-v16-ServiceWorker.zip) to your site ([learn more](https://documentation.onesignal.com/docs/web-push-quickstart#step-6-upload-files)).
158
175
 
159
176
  The OneSignal SDK file must be publicly accessible. You can put them in your top-level root or a subdirectory. However, if you are placing the file not on top-level root make sure to specify the path via the service worker params in the init options (see section above).
160
177
 
@@ -162,59 +179,69 @@ The OneSignal SDK file must be publicly accessible. You can put them in your top
162
179
  Visit `https://yoursite.com/OneSignalSDKWorker.js` in the address bar to make sure the files are being served successfully.
163
180
 
164
181
  ### Code completion
182
+
165
183
  If IntelliSense is not working as expected in your `.vue` file, try adding an import from the OneSignal plugin.
166
184
 
167
185
  ![intellisense](https://user-images.githubusercontent.com/11739227/164801900-96592534-f991-49e0-ba36-e02bb04f31b8.png)
168
186
 
169
187
  ### Typescript
188
+
170
189
  This package includes Typescript support.
171
190
 
172
191
  ```ts
173
192
  interface IOneSignalOneSignal {
174
- Slidedown: IOneSignalSlidedown;
175
- Notifications: IOneSignalNotifications;
176
- Session: IOneSignalSession;
177
- User: IOneSignalUser;
178
- Debug: IOneSignalDebug;
179
- login(externalId: string, jwtToken?: string): Promise<void>;
180
- logout(): Promise<void>;
181
- init(options: IInitObject): Promise<void>;
182
- setConsentGiven(consent: boolean): Promise<void>;
183
- setConsentRequired(requiresConsent: boolean): Promise<void>;
193
+ Slidedown: IOneSignalSlidedown;
194
+ Notifications: IOneSignalNotifications;
195
+ Session: IOneSignalSession;
196
+ User: IOneSignalUser;
197
+ Debug: IOneSignalDebug;
198
+ login(externalId: string, jwtToken?: string): Promise<void>;
199
+ logout(): Promise<void>;
200
+ init(options: IInitObject): Promise<void>;
201
+ setConsentGiven(consent: boolean): Promise<void>;
202
+ setConsentRequired(requiresConsent: boolean): Promise<void>;
184
203
  }
185
204
  ```
186
205
 
187
206
  ### OneSignal API
207
+
188
208
  See the official [OneSignal WebSDK reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for information on all available SDK functions.
189
209
 
190
210
  ---
211
+
191
212
  ## Advanced Usage
213
+
192
214
  ### Events and Event Listeners
215
+
193
216
  Use listeners to react to OneSignal-related events:
194
217
 
195
218
  ### Notifications Namespace
196
- | Event Name | Callback Argument Type |
197
- |-|-|
198
- |'click' | NotificationClickEvent|
199
- |'foregroundWillDisplay'| NotificationForegroundWillDisplayEvent
200
- | 'dismiss'| NotificationDismissEvent|
201
- |'permissionChange'| boolean|
202
- |'permissionPromptDisplay'| void|
219
+
220
+ | Event Name | Callback Argument Type |
221
+ | ------------------------- | -------------------------------------- |
222
+ | 'click' | NotificationClickEvent |
223
+ | 'foregroundWillDisplay' | NotificationForegroundWillDisplayEvent |
224
+ | 'dismiss' | NotificationDismissEvent |
225
+ | 'permissionChange' | boolean |
226
+ | 'permissionPromptDisplay' | void |
203
227
 
204
228
  ### Slidedown Namespace
205
- | Event Name | Callback Argument Type |
206
- |-|-|
207
- |'slidedownShown' | boolean |
229
+
230
+ | Event Name | Callback Argument Type |
231
+ | ---------------- | ---------------------- |
232
+ | 'slidedownShown' | boolean |
208
233
 
209
234
  ### Push Subscription Namespace
235
+
210
236
  | Event Name | Callback Argument Type |
211
- |-|-|
212
- |'change' | boolean |
237
+ | ---------- | ---------------------- |
238
+ | 'change' | boolean |
213
239
 
214
240
  **Example**
241
+
215
242
  ```js
216
243
  this.$OneSignal.Notifications.addEventListener('change', (event) => {
217
- console.log("The notification was clicked!", event);
244
+ console.log('The notification was clicked!', event);
218
245
  });
219
246
  ```
220
247
 
@@ -232,12 +259,13 @@ Give a ⭐️ if this project helped you!
232
259
 
233
260
  ## OneSignal
234
261
 
235
- * [Website](https://onesignal.com)
236
- * Twitter: [@onesignal](https://twitter.com/onesignal)
237
- * Github: [@OneSignal](https://github.com/OneSignal)
238
- * LinkedIn: [@onesignal](https://linkedin.com/company/onesignal)
262
+ - [Website](https://onesignal.com)
263
+ - Twitter: [@onesignal](https://twitter.com/onesignal)
264
+ - Github: [@OneSignal](https://github.com/OneSignal)
265
+ - LinkedIn: [@onesignal](https://linkedin.com/company/onesignal)
239
266
 
240
267
  ## Discord
268
+
241
269
  Reach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)!
242
270
 
243
271
  ## 📝 License
@@ -245,5 +273,4 @@ Reach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)!
245
273
  Copyright © 2023 [OneSignal](https://github.com/OneSignal).<br />
246
274
  This project is [Modified MIT](https://github.com/OneSignal/onesignal-vue3/blob/main/LICENSE) licensed.
247
275
 
248
-
249
276
  Enjoy!