- `(arg:
- `listener` ((wasShown: boolean) => void) | 139 | | `sync` | `removeEventListener` | Removes an event listener for the `slidedownShown` event. | - `event` ("slidedownShown")
- `listener` ((wasShown: boolean) => void) | 140 | 141 | 142 | 143 | ### Push Subscription Namespace 144 | 145 | Example: 146 | ```js 147 | OneSignal.User.PushSubscription.optIn(); 148 | ``` 149 | 150 | | Sync/Async | Property/Function | Description | Argument List | 151 | | ---------- | ----------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | 152 | | | `id` | Gets the current user's ID. | | 153 | | | `token` | Gets the current user's push notification token. | | 154 | | | `optedIn` | Gets a boolean value indicating whether the current user is subscribed to push notifications. | | 155 | | `async` | `optIn()` | Subscribes the current user to push notifications. | | 156 | | `async` | `optOut()` | Unsubscribes the current user from push notifications. | | 157 | | `sync` | `addEventListener()` | Adds an event listener for the `change` event. | - `event` ("change")
- `listener` ((change: SubscriptionChangeEvent) => void) | 158 | | `sync` | `removeEventListener()` | Removes an event listener for the `change` event. | - `event` ("change")
- `listener` ((change: SubscriptionChangeEvent) => void) | 159 | 160 | ### Debug Namespace 161 | 162 | Example: 163 | ```js 164 | OneSignal.Debug.setLogLevel(“trace”); 165 | ``` 166 | 167 | | Function Name | Description | Argument List | 168 | | --------------- | ---------------------------------------------- | ------------------------------------ | 169 | | `setLogLevel` | Turns on logging with the given log level. | `setLogLevel: string`
- `"trace"`
- `"debug"`
- `"info"`
- `"warn"`
- `"error"` | 170 | 171 | # Limitations 172 | * HTTP environments are no longer supported. 173 | * AMP environments are not supported. 174 | * Identity verification not available yet, coming soon. 175 | 176 | # Glossary 177 | 178 | **OneSignal user** 179 | 180 | *(noun) lowercase* 181 | 182 | A user of the OneSignal service. 183 | 184 | **user** 185 | 186 | *(noun) lowercase* 187 | 188 | An end-user of an application using the OneSignal service. They may or may not have a subscription. 189 | 190 | **user ID** 191 | 192 | *(noun) lowercase* 193 | 194 | A OneSignal-provisioned unique identifier for Users (User.onesignal_id). 195 | 196 | 197 | **user external ID** 198 | 199 | *(noun) lowercase* 200 | 201 | A customer-provisioned unique identifier for Users (User.external_id). 202 | 203 | 204 | **user alias** 205 | 206 | *(noun) lowercase* 207 | 208 | A customer provisioned key-value pair used to uniquely identify a User. 209 | 210 | 211 | **subscription** 212 | 213 | *(noun) lowercase* 214 | 215 | An established communication channel between an App and its User, such as a push-subscribed device, email address, or SMS-subscribed phone number. 216 | 217 | 218 | **subscription ID** 219 | 220 | *(noun) lowercase* 221 | 222 | A OneSignal-provisioned unique identifier for a single subscription. 223 | 224 | 225 | **notification** 226 | 227 | *(noun) lowercase* 228 | 229 | A unidirectional outbound communication message from an App to one or more Users via their Subscriptions. 230 | 231 | 232 | **notification ID** 233 | 234 | *(noun) lowercase* 235 | 236 | A OneSignal-provisioned unique identifier for Notifications (Notification.id). 237 | 238 | 239 | **notification external ID** 240 | 241 | *(noun) lowercase* 242 | 243 | A customer-provisioned unique identifier for Notifications (Notification.external_id). 244 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
Welcome to onesignal-vue3 👋
2 |
3 |
4 | 
5 |
6 |
7 | 
8 |
9 |
10 | 
11 |
12 |
13 | 
14 |
15 |
136 |
169 |
170 | ---
171 |
172 | ### Service Worker File
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)).
175 |
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).
177 |
178 | **Tip:**
179 | Visit `https://yoursite.com/OneSignalSDKWorker.js` in the address bar to make sure the files are being served successfully.
180 |
181 | ### Code completion
182 |
183 | If IntelliSense is not working as expected in your `.vue` file, try adding an import from the OneSignal plugin.
184 |
185 | 
186 |
187 | ### Typescript
188 |
189 | This package includes Typescript support.
190 |
191 | ```ts
192 | interface IOneSignalOneSignal {
193 | Slidedown: IOneSignalSlidedown;
194 | Notifications: IOneSignalNotifications;
195 | Session: IOneSignalSession;
196 | User: IOneSignalUser;
197 | Debug: IOneSignalDebug;
198 | login(externalId: string, jwtToken?: string): PromiseExpand to see more options
137 | 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. | 157 | 158 | **Service Worker Params** 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). 160 | 161 | In this distribution, you can specify the parameters via the following: 162 | 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. | 167 | 168 |Feel free to check [issues page](https://github.com/OneSignal/onesignal-vue3/issues). 255 | 256 | ## Show your support 257 | 258 | Give a ⭐️ if this project helped you! 259 | 260 | ## OneSignal 261 | 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) 266 | 267 | ## Discord 268 | 269 | Reach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)! 270 | 271 | ## 📝 License 272 | 273 | Copyright © 2023 [OneSignal](https://github.com/OneSignal).
274 | This project is [Modified MIT](https://github.com/OneSignal/onesignal-vue3/blob/main/LICENSE) licensed. 275 | 276 | Enjoy! 277 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue'; 2 | declare module 'vue' { 3 | interface ComponentCustomProperties { 4 | $OneSignal: IOneSignalOneSignal; 5 | } 6 | } 7 | declare global { 8 | interface Window { 9 | OneSignalDeferred?: OneSignalDeferredLoadedCallback[]; 10 | OneSignal?: IOneSignalOneSignal; 11 | safari?: { 12 | pushNotification: any; 13 | }; 14 | } 15 | } 16 | export interface AutoPromptOptions { 17 | force?: boolean; 18 | forceSlidedownOverNative?: boolean; 19 | slidedownPromptOptions?: IOneSignalAutoPromptOptions; 20 | } 21 | export interface IOneSignalAutoPromptOptions { 22 | force?: boolean; 23 | forceSlidedownOverNative?: boolean; 24 | isInUpdateMode?: boolean; 25 | categoryOptions?: IOneSignalCategories; 26 | } 27 | export interface IOneSignalCategories { 28 | positiveUpdateButton: string; 29 | negativeUpdateButton: string; 30 | savingButtonText: string; 31 | errorButtonText: string; 32 | updateMessage: string; 33 | tags: IOneSignalTagCategory[]; 34 | } 35 | export interface IOneSignalTagCategory { 36 | tag: string; 37 | label: string; 38 | checked?: boolean; 39 | } 40 | export type PushSubscriptionNamespaceProperties = { 41 | id: string | null | undefined; 42 | token: string | null | undefined; 43 | optedIn: boolean; 44 | }; 45 | export type SubscriptionChangeEvent = { 46 | previous: PushSubscriptionNamespaceProperties; 47 | current: PushSubscriptionNamespaceProperties; 48 | }; 49 | export type NotificationEventName = 'click' | 'foregroundWillDisplay' | 'dismiss' | 'permissionChange' | 'permissionPromptDisplay'; 50 | export type SlidedownEventName = 'slidedownAllowClick' | 'slidedownCancelClick' | 'slidedownClosed' | 'slidedownQueued' | 'slidedownShown'; 51 | export type OneSignalDeferredLoadedCallback = (onesignal: IOneSignalOneSignal) => void; 52 | export interface IOSNotification { 53 | /** 54 | * The OneSignal notification id; 55 | * - Primary id on OneSignal's REST API and dashboard 56 | */ 57 | readonly notificationId: string; 58 | /** 59 | * Visible title text on the notification 60 | */ 61 | readonly title?: string; 62 | /** 63 | * Visible body text on the notification 64 | */ 65 | readonly body: string; 66 | /** 67 | * Visible icon the notification; URL format 68 | */ 69 | readonly icon?: string; 70 | /** 71 | * Visible small badgeIcon that displays on some devices; URL format 72 | * Example: On Android's status bar 73 | */ 74 | readonly badgeIcon?: string; 75 | /** 76 | * Visible image on the notification; URL format 77 | */ 78 | readonly image?: string; 79 | /** 80 | * Visible buttons on the notification 81 | */ 82 | readonly actionButtons?: IOSNotificationActionButton[]; 83 | /** 84 | * If this value is the same as existing notification, it will replace it 85 | * Can be set when creating the notification with "Web Push Topic" on the dashboard 86 | * or web_push_topic from the REST API. 87 | */ 88 | readonly topic?: string; 89 | /** 90 | * Custom object that was sent with the notification; 91 | * definable when creating the notification from the OneSignal REST API or dashboard 92 | */ 93 | readonly additionalData?: object; 94 | /** 95 | * URL to open when clicking or tapping on the notification 96 | */ 97 | readonly launchURL?: string; 98 | /** 99 | * Confirm the push was received by reporting back to OneSignal 100 | */ 101 | readonly confirmDelivery: boolean; 102 | } 103 | export interface IOSNotificationActionButton { 104 | /** 105 | * Any unique identifier to represent which button was clicked. This is typically passed back to the service worker 106 | * and host page through events to identify which button was clicked. 107 | * e.g. 'like-button' 108 | */ 109 | readonly actionId: string; 110 | /** 111 | * The notification action button's text. 112 | */ 113 | readonly text: string; 114 | /** 115 | * A valid publicly reachable HTTPS URL to an image. 116 | */ 117 | readonly icon?: string; 118 | /** 119 | * The URL to open the web browser to when this action button is clicked. 120 | */ 121 | readonly launchURL?: string; 122 | } 123 | export interface NotificationClickResult { 124 | readonly actionId?: string; 125 | readonly url?: string; 126 | } 127 | export type NotificationEventTypeMap = { 128 | 'click': NotificationClickEvent; 129 | 'foregroundWillDisplay': NotificationForegroundWillDisplayEvent; 130 | 'dismiss': NotificationDismissEvent; 131 | 'permissionChange': boolean; 132 | 'permissionPromptDisplay': void; 133 | }; 134 | export interface NotificationForegroundWillDisplayEvent { 135 | readonly notification: IOSNotification; 136 | preventDefault(): void; 137 | } 138 | export interface NotificationDismissEvent { 139 | notification: IOSNotification; 140 | } 141 | export interface NotificationClickEvent { 142 | readonly notification: IOSNotification; 143 | readonly result: NotificationClickResult; 144 | } 145 | export type UserChangeEvent = { 146 | current: UserNamespaceProperties; 147 | }; 148 | export type UserNamespaceProperties = { 149 | onesignalId: string | undefined; 150 | externalId: string | undefined; 151 | }; 152 | export interface IInitObject { 153 | appId: string; 154 | subdomainName?: string; 155 | requiresUserPrivacyConsent?: boolean; 156 | promptOptions?: { 157 | slidedown: { 158 | prompts: { 159 | /** 160 | * Whether to automatically display the prompt. 161 | * `true` will display the prompt based on the delay options. 162 | * `false` will prevent the prompt from displaying until the Slidedowns methods are used. 163 | */ 164 | autoPrompt: boolean; 165 | /** 166 | * Only available for type: category. Up to 10 categories. 167 | * @example 168 | * categories: [{ tag: 'local_news', label: 'Local News' }] // The user will be tagged with local_news but will see "Local News" in the prompt. 169 | */ 170 | categories: { 171 | /** Should identify the action. */ 172 | tag: string; 173 | /** What the user will see. */ 174 | label: string; 175 | }[]; 176 | /** 177 | * The delay options for the prompt. 178 | * @example delay: { pageViews: 3, timeDelay: 20 } // The user will not be shown the prompt until 20 seconds after the 3rd page view. 179 | */ 180 | delay: { 181 | /** The number of pages a user needs to visit before the prompt is displayed. */ 182 | pageViews?: number; 183 | /** The number of seconds a user needs to wait before the prompt is displayed.Both options must be satisfied for the prompt to display */ 184 | timeDelay?: number; 185 | }; 186 | /** 187 | * The text to display in the prompt. 188 | */ 189 | text?: { 190 | /** The callout asking the user to opt-in. Up to 90 characters. */ 191 | actionMessage?: string; 192 | /** Triggers the opt-in. Up to 15 characters. */ 193 | acceptButton?: string; 194 | /** Cancels opt-in. Up to 15 characters. */ 195 | cancelMessage?: string; 196 | /** The message of the confirmation prompt displayed after the email and/or phone number is provided. Up to 90 characters. */ 197 | confirmMessage?: string; 198 | /** Identifies the email text field. Up to 15 characters. */ 199 | emailLabel?: string; 200 | /** Cancels the category update. Up to 15 characters. */ 201 | negativeUpdateButton?: string; 202 | /** Saves the updated category tags. Up to 15 characters. */ 203 | positiveUpdateButton?: string; 204 | /** Identifies the phone number text field. Up to 15 characters. */ 205 | smsLabel?: string; 206 | /** A different message shown to subscribers presented the prompt again to update categories. Up to 90 characters. */ 207 | updateMessage?: string; 208 | }; 209 | /** 210 | * The type of prompt to display. 211 | * `push` which is the Slide Prompt without categories. 212 | * `category` which is the Slide Prompt with categories. 213 | * `sms` only asks for phone number. 214 | * `email` only asks for email address. 215 | * `smsAndEmail` asks for both phone number and email address. 216 | */ 217 | type: 'push' | 'category' | 'sms' | 'email' | 'smsAndEmail'; 218 | }[]; 219 | }; 220 | }; 221 | welcomeNotification?: { 222 | /** 223 | * Disables sending a welcome notification to new site visitors. If you want to disable welcome notifications, this is the only option you need. 224 | * @deprecated Use 'disable' instead. This will be removed in a future version. 225 | */ 226 | disabled?: boolean; 227 | /** 228 | * Disables sending a welcome notification to new site visitors. If you want to disable welcome notifications, this is the only option you need. 229 | */ 230 | disable?: boolean; 231 | /** 232 | * The welcome notification's message. You can localize this to your own language. 233 | * If left blank or set to blank, the default of 'Thanks for subscribing!' will be used. 234 | */ 235 | message: string; 236 | /** 237 | * The welcome notification's title. You can localize this to your own language. If not set, or left blank, the site's title will be used. 238 | * Set to one space ' ' to clear the title, although this is not recommended. 239 | */ 240 | title?: string; 241 | /** 242 | * By default, clicking the welcome notification does not open any link. 243 | * This is recommended because the user has just visited your site and subscribed. 244 | */ 245 | url?: string; 246 | }; 247 | /** 248 | * Will enable customization of the notify/subscription bell button. 249 | */ 250 | notifyButton?: { 251 | /** 252 | * A function you define that returns true to show the Subscription Bell, or false to hide it. 253 | * Typically used the hide the Subscription Bell after the user is subscribed. 254 | * This function is not re-evaluated on every state change; this function is only evaluated once when the Subscription Bell begins to show. 255 | */ 256 | displayPredicate?: () => boolean | Promise
3 |
3 |
31 |
32 |
33 |
42 |
43 |
44 |
60 |
--------------------------------------------------------------------------------
/example/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import OneSignalVuePlugin from '@onesignal/onesignal-vue3'
4 |
5 | createApp(App).use(OneSignalVuePlugin, {
6 | appId: "68e76706-41e1-4990-925b-8304c9a5deed",
7 | allowLocalhostAsSecureOrigin: true
8 | }).mount('#app')
9 |
--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 |
3 | const ONESIGNAL_SDK_ID = 'onesignal-sdk';
4 | const ONE_SIGNAL_SCRIPT_SRC =
5 | 'https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js';
6 |
7 | // true if the script is successfully loaded from CDN.
8 | let isOneSignalInitialized = false;
9 | // true if the script fails to load from CDN. A separate flag is necessary
10 | // to disambiguate between a CDN load failure and a delayed call to
11 | // OneSignal#init.
12 | let isOneSignalScriptFailed = false;
13 |
14 | if (typeof window !== 'undefined') {
15 | window.OneSignalDeferred = window.OneSignalDeferred || [];
16 | addSDKScript();
17 | }
18 |
19 | /* H E L P E R S */
20 |
21 | function handleOnError() {
22 | isOneSignalScriptFailed = true;
23 | }
24 |
25 | function addSDKScript() {
26 | const script = document.createElement('script');
27 | script.id = ONESIGNAL_SDK_ID;
28 | script.defer = true;
29 | script.src = ONE_SIGNAL_SCRIPT_SRC;
30 |
31 | // Always resolve whether or not the script is successfully initialized.
32 | // This is important for users who may block cdn.onesignal.com w/ adblock.
33 | script.onerror = () => {
34 | handleOnError();
35 | };
36 |
37 | document.head.appendChild(script);
38 | }
39 | /* T Y P E D E C L A R A T I O N S */
40 |
41 | declare module 'vue' {
42 | export interface ComponentCustomProperties {
43 | $OneSignal: IOneSignalOneSignal;
44 | }
45 | }
46 |
47 | declare global {
48 | interface Window {
49 | OneSignalDeferred?: OneSignalDeferredLoadedCallback[];
50 | OneSignal?: IOneSignalOneSignal;
51 | safari?: {
52 | pushNotification: any;
53 | };
54 | }
55 | }
56 |
57 | /* O N E S I G N A L A P I */
58 |
59 | /**
60 | * @PublicApi
61 | */
62 | const init = (options: IInitObject): Promise{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 | 14 |Essential Links
15 |-
16 |
- Core Docs 17 |
- Forum 18 |
- Community Chat 19 |
- News 21 |
Ecosystem
23 |-
24 |
- vue-router 25 |
- vuex 26 |
- vue-devtools 27 |
- vue-loader 28 |
- awesome-vue 29 |