Skip to content

Commit ca0fb65

Browse files
author
OneSignal
committed
Update onesignal-vue3
1 parent 261a9f3 commit ca0fb65

11 files changed

+20392
-106
lines changed

‎.eslintrc.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,27 @@ module.exports = {
44
browser: true,
55
es6: true,
66
node: true,
7+
worker: true,
78
},
89
settings: {
910
"import/resolver": {
1011
node: {
1112
paths: ["src"],
12-
extensions: [
13-
".js",
14-
".ts",
15-
],
13+
extensions: [".js", ".ts"],
1614
},
1715
},
1816
},
1917
globals: {
20-
Atomics: 'readonly',
21-
SharedArrayBuffer: 'readonly',
18+
Atomics: "readonly",
19+
SharedArrayBuffer: "readonly",
2220
},
23-
parser: '@typescript-eslint/parser',
21+
parser: "@typescript-eslint/parser",
2422
parserOptions: {
2523
ecmaVersion: 2018,
26-
sourceType: 'module',
24+
sourceType: "module",
2725
},
28-
plugins: [
29-
'@typescript-eslint',
30-
],
31-
extends: [
32-
'plugin:@typescript-eslint/recommended',
33-
],
26+
plugins: ["@typescript-eslint"],
27+
extends: ["plugin:@typescript-eslint/recommended"],
3428
rules: {
3529
"prefer-destructuring": 0,
3630
"no-param-reassign": 0,

‎.github/workflows/release.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jobs:
2424
node-version: 'lts/*'
2525
registry-url: 'https://registry.npmjs.org'
2626
- name: Install dependencies
27-
run: yarn install
27+
run: npm ci
2828
- name: Release
2929
env:
3030
GITHUB_TOKEN: ${{ secrets.GH_WEB_SHIM_PUSH_TOKEN }}

‎.gitignore

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,4 @@ dist
1616
.env.test.local
1717
.env.production.local
1818

19-
npm-debug.log*
20-
yarn-debug.log*
21-
yarn-error.log*
19+
npm-debug.log*

‎.npmignore

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,4 @@ build
1717
.babelrc;
1818

1919
npm-debug.log*
20-
yarn-debug.log*
21-
yarn-error.log*
22-
2320
example

‎README.md

Lines changed: 102 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,37 @@
1616

1717
> 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.
1818
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)
2121

2222
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.
2323

2424
You can find more information on OneSignal [here](https://onesignal.com/).
2525

2626
> 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.
2828
2929
## Contents
30+
3031
- [Install](#install)
3132
- [Usage](#usage)
3233
- [API](#onesignal-api)
3334
- [Advanced Usage](#advanced-usage)
3435

3536
---
37+
3638
## Vue Compatibility
39+
3740
Make sure you install a plugin version compatible with your Vue environment.
3841

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 |
4346

4447
## Install
4548

46-
You can use `yarn` or `npm`.
47-
49+
Run `npm install`
4850

4951
### Yarn
5052

@@ -58,7 +60,14 @@ yarn add @onesignal/onesignal-vue3
5860
npm install --save @onesignal/onesignal-vue3
5961
```
6062

63+
### Yarn
64+
65+
```bash
66+
yarn add @onesignal/onesignal-vue3
67+
```
68+
6169
---
70+
6271
## Usage
6372

6473
## Plugin setup
@@ -67,28 +76,29 @@ In Vue 3, you can pass in the OneSignal initialization options directly as an ar
6776

6877
```js
6978
// 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');
7787
```
88+
7889
or
7990

8091
```js
8192
//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';
8495

8596
createApp(App).use(OneSignalVuePlugin).mount('#app');
8697

8798
// component
8899
this.$OneSignal.init({
89-
appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
100+
appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
90101
});
91-
92102
```
93103

94104
The OneSignal plugin automatically exposes a `$OneSignal` global property accessible inside the application.
@@ -98,123 +108,140 @@ The OneSignal plugin automatically exposes a `$OneSignal` global property access
98108
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).
99109

100110
## Reference
111+
101112
### Initialization
113+
102114
The `init` function returns a promise that resolves when OneSignal is loaded.
103115

104116
**Examples**
117+
105118
```js
106119
await this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
107120
// do other stuff
108121
```
109122

110123
```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+
});
114129
```
115130

116131
### Init Options
132+
117133
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.
118134

119135
<details>
120136
<summary>Expand to see more options</summary>
121137

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. |
141157

142158
**Service Worker Params**
143159
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).
144160

145161
In this distribution, you can specify the parameters via the following:
146162

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. |
151167

152168
</details>
153169

154170
---
155171

156172
### 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)).
158175

159176
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).
160177

161178
**Tip:**
162179
Visit `https://yoursite.com/OneSignalSDKWorker.js` in the address bar to make sure the files are being served successfully.
163180

164181
### Code completion
182+
165183
If IntelliSense is not working as expected in your `.vue` file, try adding an import from the OneSignal plugin.
166184

167185
![intellisense](https://user-images.githubusercontent.com/11739227/164801900-96592534-f991-49e0-ba36-e02bb04f31b8.png)
168186

169187
### Typescript
188+
170189
This package includes Typescript support.
171190

172191
```ts
173192
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>;
184203
}
185204
```
186205

187206
### OneSignal API
207+
188208
See the official [OneSignal WebSDK reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for information on all available SDK functions.
189209

190210
---
211+
191212
## Advanced Usage
213+
192214
### Events and Event Listeners
215+
193216
Use listeners to react to OneSignal-related events:
194217

195218
### 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 |
203227

204228
### Slidedown Namespace
205-
| Event Name | Callback Argument Type |
206-
|-|-|
207-
|'slidedownShown' | boolean |
229+
230+
| Event Name | Callback Argument Type |
231+
| ---------------- | ---------------------- |
232+
| 'slidedownShown' | boolean |
208233

209234
### Push Subscription Namespace
235+
210236
| Event Name | Callback Argument Type |
211-
|-|-|
212-
|'change' | boolean |
237+
| ---------- | ---------------------- |
238+
| 'change' | boolean |
213239

214240
**Example**
241+
215242
```js
216243
this.$OneSignal.Notifications.addEventListener('change', (event) => {
217-
console.log("The notification was clicked!", event);
244+
console.log('The notification was clicked!', event);
218245
});
219246
```
220247

@@ -232,18 +259,18 @@ Give a ⭐️ if this project helped you!
232259

233260
## OneSignal
234261

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)
239266

240267
## Discord
268+
241269
Reach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)!
242270

243271
## 📝 License
244272

245273
Copyright © 2023 [OneSignal](https://github.com/OneSignal).<br />
246274
This project is [Modified MIT](https://github.com/OneSignal/onesignal-vue3/blob/main/LICENSE) licensed.
247275

248-
249276
Enjoy!

0 commit comments

Comments
 (0)