Skip to content

Commit 174288e

Browse files
author
OneSignal
committed
Update react-onesignal
1 parent 64d9c95 commit 174288e

26 files changed

+4068
-14985
lines changed

.github/ISSUE_TEMPLATE/ask-question.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: 🙋‍♂️ Ask a question
22
description: Tell us what's on your mind
3-
title: "[question]: "
3+
title: "[Question]: "
44
labels: ["triage"]
55
assignees:
66
- OneSignal/eng-developer-sdk

.github/ISSUE_TEMPLATE/bug-report.yml

+24
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,29 @@ body:
1717
placeholder: The latest version of the SDK causes a runtime error.
1818
validations:
1919
required: true
20+
- type: dropdown
21+
id: browsers
22+
attributes:
23+
label: What browsers are you seeing the problem on?
24+
multiple: true
25+
options:
26+
- Firefox
27+
- Chrome (Chromium)
28+
- Safari
29+
- Microsoft Edge
30+
- Opera
31+
- Brave
32+
- Other
33+
validations:
34+
required: true
35+
- type: input
36+
id: operating-system
37+
attributes:
38+
label: What operating system are you running?
39+
description: Make sure to include the version.
40+
placeholder: macOS Monterey 12.3.1
41+
validations:
42+
required: true
2043
- type: textarea
2144
id: reproduction-steps
2245
attributes:
@@ -44,3 +67,4 @@ body:
4467
label: Relevant log output
4568
description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
4669
render: Shell
70+

.github/ISSUE_TEMPLATE/general-feedback.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: 📣 General feedback
22
description: Tell us what's on your mind
3-
title: "[Bug]: "
3+
title: "[Feedback]: "
44
labels: ["triage"]
55
assignees:
66
- OneSignal/eng-developer-sdk
File renamed without changes.

MigrationGuide.md

+313-64
Large diffs are not rendered by default.

README.md

+68-59
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@
1414
</a>
1515
</p>
1616

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 React for its front-end codebase.
17+
> This is a JavaScript module that can be used to easily include [OneSignal](https://onesignal.com/) code in a website or app in practically any JS front-end codebase (not limited to React).
1818
1919
* 🏠 [Homepage](https://github.com/OneSignal/react-onesignal#readme)
2020
* 🖤 [npm](https://www.npmjs.com/package/react-onesignal)
2121

22-
OneSignal is the world's leader for Mobile Push Notifications, Web Push, and In-App Messaging. It is trusted by 800k businesses to send 5 billion Push Notifications per day.
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.
2323

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

26-
### Migration Guide
27-
Version 2.0 was recently released. Read the [Migration Guide](https://github.com/OneSignal/react-onesignal/blob/master/MigrationGuide.md) here if you're coming from a version 1 release of the SDK.
26+
### Migration Guides
27+
Versions 3.0 were recently released and include breaking changes. See the [Migration Guide](https://github.com/OneSignal/react-onesignal/blob/main/MigrationGuide.md) to update your implementation.
2828

2929
## Contents
3030
- [Install](#install)
@@ -73,14 +73,36 @@ await OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
7373
const [initialized, setInitialized] = useState(false);
7474
OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {
7575
setInitialized(true);
76-
OneSignal.showSlidedownPrompt().then(() => {
77-
// do other stuff
78-
});
76+
OneSignal.Slidedown.promptPush();
77+
// do other stuff
7978
})
8079
```
8180

8281
### Init Options
83-
You can pass other [options](https://documentation.onesignal.com/docs/web-push-sdk#init) to the `init` function. Use these options to configure personalized prompt options, auto-resubscribe, and more.
82+
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.
83+
84+
<details>
85+
<summary>Expand to see more options</summary>
86+
87+
| Property Name | Type | Description |
88+
| ---------------------------| --------------------- | -------------------------------------------------- |
89+
| `appId` | `string` | The ID of your OneSignal app. |
90+
| `autoRegister` | `boolean` (optional) | Whether or not to automatically register the user. |
91+
| `autoResubscribe` | `boolean` (optional) | Whether or not to automatically resubscribe the user. |
92+
| `path` | `string` (optional) | The path to the OneSignal service worker file. |
93+
| `serviceWorkerPath` | `string` (optional) | The path to the OneSignal service worker script. |
94+
| `serviceWorkerUpdaterPath` | `string` (optional) | The path to the OneSignal service worker updater script. |
95+
| `subdomainName` | `string` (optional) | The subdomain of your OneSignal app. |
96+
| `allowLocalhostAsSecureOrigin` | `boolean` (optional) | Whether or not to allow localhost as a secure origin. |
97+
| `requiresUserPrivacyConsent`| `boolean` (optional) | Whether or not the user's consent is required. |
98+
| `persistNotification` | `boolean` (optional) | Whether or not notifications should persist. |
99+
| `notificationClickHandlerMatch`| `string` (optional) | The URL match pattern for notification clicks. |
100+
| `notificationClickHandlerAction`| `string` (optional)| The action to perform when a notification is clicked. |
101+
| `welcomeNotification` | `object` (optional) | The welcome notification configuration. |
102+
| `notifyButton` | `object` (optional) | The notify button configuration. |
103+
| `promptOptions` | `object` (optional) | Additional options for the subscription prompt. |
104+
| `webhooks` | `object` (optional) | The webhook configuration. |
105+
| `[key: string]` | `any` | Additional properties can be added as needed. |
84106

85107
**Service Worker Params**
86108
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).
@@ -92,6 +114,10 @@ In this distribution, you can specify the parameters via the following:
92114
| `serviceWorkerParam` | Use to specify the scope, or the path the service worker has control of. Example: `{ scope: "/js/push/onesignal/" }` |
93115
| `serviceWorkerPath` | The path to the service worker file. |
94116

117+
</details>
118+
119+
---
120+
95121
### Service Worker File
96122
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)).
97123

@@ -101,76 +127,59 @@ The OneSignal SDK file must be publicly accessible. You can put them in your top
101127
Visit `https://yoursite.com/OneSignalSDKWorker.js` in the address bar to make sure the files are being served successfully.
102128

103129
---
104-
## OneSignal API
105130
### Typescript
106131
This package includes Typescript support.
107132

108133
```ts
109-
interface OneSignal {
110-
init(options: IInitObject): Promise<void>;
111-
on(event: string, listener: () => void): void;
112-
off(event: string, listener: () => void): void;
113-
once(event: string, listener: () => void): void;
114-
isPushNotificationsEnabled(callback?: Action<boolean>): Promise<boolean>;
115-
showHttpPrompt(options?: AutoPromptOptions): Promise<void>;
116-
registerForPushNotifications(options?: RegisterOptions): Promise<void>;
117-
setDefaultNotificationUrl(url: string): Promise<void>;
118-
setDefaultTitle(title: string): Promise<void>;
119-
getTags(callback?: Action<any>): Promise<void>;
120-
sendTag(key: string, value: any, callback?: Action<Object>): Promise<Object | null>;
121-
sendTags(tags: TagsObject<any>, callback?: Action<Object>): Promise<Object | null>;
122-
deleteTag(tag: string): Promise<Array<string>>;
123-
deleteTags(tags: Array<string>, callback?: Action<Array<string>>): Promise<Array<string>>;
124-
addListenerForNotificationOpened(callback?: Action<Notification>): Promise<void>;
125-
setSubscription(newSubscription: boolean): Promise<void>;
126-
showHttpPermissionRequest(options?: AutoPromptOptions): Promise<any>;
127-
showNativePrompt(): Promise<void>;
128-
showSlidedownPrompt(options?: AutoPromptOptions): Promise<void>;
129-
showCategorySlidedown(options?: AutoPromptOptions): Promise<void>;
130-
showSmsSlidedown(options?: AutoPromptOptions): Promise<void>;
131-
showEmailSlidedown(options?: AutoPromptOptions): Promise<void>;
132-
showSmsAndEmailSlidedown(options?: AutoPromptOptions): Promise<void>;
133-
getNotificationPermission(onComplete?: Action<NotificationPermission>): Promise<NotificationPermission>;
134-
getUserId(callback?: Action<string | undefined | null>): Promise<string | undefined | null>;
135-
getSubscription(callback?: Action<boolean>): Promise<boolean>;
136-
setEmail(email: string, options?: SetEmailOptions): Promise<string | null>;
137-
setSMSNumber(smsNumber: string, options?: SetSMSOptions): Promise<string | null>;
138-
logoutEmail(): Promise<void>;
139-
logoutSMS(): Promise<void>;
140-
setExternalUserId(externalUserId: string | undefined | null, authHash?: string): Promise<void>;
141-
removeExternalUserId(): Promise<void>;
142-
getExternalUserId(): Promise<string | undefined | null>;
143-
provideUserConsent(consent: boolean): Promise<void>;
144-
getEmailId(callback?: Action<string | undefined>): Promise<string | null | undefined>;
145-
getSMSId(callback?: Action<string | undefined>): Promise<string | null | undefined>;
146-
sendOutcome(outcomeName: string, outcomeWeight?: number | undefined): Promise<void>;
134+
interface IOneSignalOneSignal {
135+
Slidedown: IOneSignalSlidedown;
136+
Notifications: IOneSignalNotifications;
137+
Session: IOneSignalSession;
138+
User: IOneSignalUser;
139+
Debug: IOneSignalDebug;
140+
login(externalId: string, jwtToken?: string): Promise<void>;
141+
logout(): Promise<void>;
142+
init(options: IInitObject): Promise<void>;
143+
setConsentGiven(consent: boolean): Promise<void>;
144+
setConsentRequired(requiresConsent: boolean): Promise<void>;
147145
}
148146
```
149147

150148
### OneSignal API
151-
See the official [OneSignal WebSDK reference](https://documentation.onesignal.com/docs/web-push-sdk) for information on all available SDK functions.
149+
See the official [OneSignal WebSDK reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for information on all available SDK functions.
152150

153151
---
154152
## Advanced Usage
155153
### Events and Event Listeners
156154
Use listeners to react to OneSignal-related events:
157155

158-
* `subscriptionChange`
159-
* `permissionPromptDisplay`
160-
* `notificationPermissionChange`
161-
* `popoverShown`
162-
* `customPromptClick`
163-
* `notificationDisplay`
164-
* `notificationDismiss`
156+
### Notifications Namespace
157+
| Event Name | Callback Argument Type |
158+
|-|-|
159+
|'click' | NotificationClickEvent|
160+
|'foregroundWillDisplay'| NotificationForegroundWillDisplayEvent
161+
| 'dismiss'| NotificationDismissEvent|
162+
|'permissionChange'| boolean|
163+
|'permissionPromptDisplay'| void|
164+
165+
### Slidedown Namespace
166+
| Event Name | Callback Argument Type |
167+
|-|-|
168+
|'slidedownShown' | boolean |
169+
170+
### Push Subscription Namespace
171+
| Event Name | Callback Argument Type |
172+
|-|-|
173+
|'change' | boolean |
165174

166175
**Example**
167176
```js
168-
OneSignal.on('subscriptionChange', function(isSubscribed) {
169-
console.log("The user's subscription state is now:", isSubscribed);
177+
OneSignal.Notifications.addEventListener('click', (event) => {
178+
console.log("The notification was clicked!", event);
170179
});
171180
```
172181

173-
See the [OneSignal WebSDK Reference](https://documentation.onesignal.com/docs/web-push-sdk) for all available event listeners.
182+
See the [OneSignal WebSDK Reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for all available event listeners.
174183

175184
## Troubleshooting
176185
### `window.OneSignal already defined as 'object'!`
@@ -201,7 +210,7 @@ Reach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)!
201210

202211
## 📝 License
203212

204-
Copyright © 2022 [OneSignal](https://github.com/OneSignal).<br />
213+
Copyright © 2023 [OneSignal](https://github.com/OneSignal).<br />
205214
This project is [Modified MIT](https://github.com/OneSignal/react-onesignal/blob/master/LICENSE) licensed.
206215

207216
## Thanks

example/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,6 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
dev-ssl.crt
26+
dev-ssl.key

example/README.md

+7-31
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ In the project directory, you can run:
99
### `npm start`
1010

1111
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
12+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
1313

14-
The page will reload when you make changes.\
15-
You may also see any lint errors in the console.
14+
The page will reload if you make edits.\
15+
You will also see any lint errors in the console.
1616

1717
### `npm test`
1818

@@ -31,40 +31,16 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
3131

3232
### `npm run eject`
3333

34-
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
34+
**Note: this is a one-way operation. Once you `eject`, you cant go back!**
3535

36-
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
36+
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3737

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
38+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
3939

40-
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
40+
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
4141

4242
## Learn More
4343

4444
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
4545

4646
To learn React, check out the [React documentation](https://reactjs.org/).
47-
48-
### Code Splitting
49-
50-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51-
52-
### Analyzing the Bundle Size
53-
54-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55-
56-
### Making a Progressive Web App
57-
58-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59-
60-
### Advanced Configuration
61-
62-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63-
64-
### Deployment
65-
66-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67-
68-
### `npm run build` fails to minify
69-
70-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

0 commit comments

Comments
 (0)