Merge pull request #160 from OneSignal/cd_update

Generator Update

Author: fadi-george

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
           node-version: 'lts/*'
           registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GH_WEB_SHIM_PUSH_TOKEN }}

.gitignore

@@ -16,6 +16,4 @@ dist
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+npm-debug.log*

.npmignore

@@ -17,7 +17,4 @@ build
 .babelrc;
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 example

README.md

@@ -16,40 +16,42 @@
 
 > 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).
 
-* 🏠 [Homepage](https://github.com/OneSignal/react-onesignal#readme)
-* 🖤 [npm](https://www.npmjs.com/package/react-onesignal)
+- 🏠 [Homepage](https://github.com/OneSignal/react-onesignal#readme)
+- 🖤 [npm](https://www.npmjs.com/package/react-onesignal)
 
 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.
 
 You can find more information on OneSignal [here](https://onesignal.com/).
 
 ### Migration Guides
+
 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.
 
 ## Contents
+
 - [Install](#install)
 - [Usage](#usage)
 - [API](#onesignal-api)
 - [Advanced Usage](#advanced-usage)
 
 ---
-## Install
 
-You can use `yarn` or `npm`.
+## Install
 
-### Yarn
+### npm
 
 ```bash
-yarn add react-onesignal
+npm install --save react-onesignal
 ```
 
-### npm
+### yarn
 
 ```bash
-npm install --save react-onesignal
+yarn add react-onesignal
 ```
 
 ---
+
 ## Usage
 
 Initialize OneSignal with your `appId` via the `options` parameter:
@@ -63,10 +65,12 @@ OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
 The `init` function returns a promise that resolves when OneSignal is loaded.
 
 **Examples**
+
 ```js
 await OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
 // do other stuff
 ```
+
 ---
 
 ```js
@@ -75,117 +79,132 @@ OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {
   setInitialized(true);
   OneSignal.Slidedown.promptPush();
   // do other stuff
-})
+});
 ```
 
 ### Init Options
+
 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.
 
 <details>
   <summary>Expand to see more options</summary>
 
-  | Property Name               | Type                  | Description                                        |
-| ---------------------------| --------------------- | -------------------------------------------------- |
-| `appId`                     | `string`              | The ID of your OneSignal app.                      |
-| `autoRegister`              | `boolean` (optional)  | Whether or not to automatically register the user. |
-| `autoResubscribe`           | `boolean` (optional)  | Whether or not to automatically resubscribe the user. |
-| `path`                      | `string` (optional)   | The path to the OneSignal service worker file.     |
-| `serviceWorkerPath`         | `string` (optional)   | The path to the OneSignal service worker script.   |
-| `serviceWorkerUpdaterPath`  | `string` (optional)   | The path to the OneSignal service worker updater script. |
-| `subdomainName`             | `string` (optional)   | The subdomain of your OneSignal app.               |
-| `allowLocalhostAsSecureOrigin` | `boolean` (optional) | Whether or not to allow localhost as a secure origin. |
-| `requiresUserPrivacyConsent`| `boolean` (optional)  | Whether or not the user's consent is required.     |
-| `persistNotification`       | `boolean` (optional)  | Whether or not notifications should persist.       |
-| `notificationClickHandlerMatch`| `string` (optional) | The URL match pattern for notification clicks.     |
-| `notificationClickHandlerAction`| `string` (optional)| The action to perform when a notification is clicked. |
-| `welcomeNotification`       | `object` (optional)   | The welcome notification configuration.            |
-| `notifyButton`              | `object` (optional)   | The notify button configuration.                   |
-| `promptOptions`             | `object` (optional)   | Additional options for the subscription prompt.    |
-| `webhooks`                  | `object` (optional)   | The webhook configuration.                         |
-| `[key: string]`             | `any`                 | Additional properties can be added as needed.      |
+| Property Name                    | Type                 | Description                                              |
+| -------------------------------- | -------------------- | -------------------------------------------------------- |
+| `appId`                          | `string`             | The ID of your OneSignal app.                            |
+| `autoRegister`                   | `boolean` (optional) | Whether or not to automatically register the user.       |
+| `autoResubscribe`                | `boolean` (optional) | Whether or not to automatically resubscribe the user.    |
+| `path`                           | `string` (optional)  | The path to the OneSignal service worker file.           |
+| `serviceWorkerPath`              | `string` (optional)  | The path to the OneSignal service worker script.         |
+| `serviceWorkerUpdaterPath`       | `string` (optional)  | The path to the OneSignal service worker updater script. |
+| `subdomainName`                  | `string` (optional)  | The subdomain of your OneSignal app.                     |
+| `allowLocalhostAsSecureOrigin`   | `boolean` (optional) | Whether or not to allow localhost as a secure origin.    |
+| `requiresUserPrivacyConsent`     | `boolean` (optional) | Whether or not the user's consent is required.           |
+| `persistNotification`            | `boolean` (optional) | Whether or not notifications should persist.             |
+| `notificationClickHandlerMatch`  | `string` (optional)  | The URL match pattern for notification clicks.           |
+| `notificationClickHandlerAction` | `string` (optional)  | The action to perform when a notification is clicked.    |
+| `welcomeNotification`            | `object` (optional)  | The welcome notification configuration.                  |
+| `notifyButton`                   | `object` (optional)  | The notify button configuration.                         |
+| `promptOptions`                  | `object` (optional)  | Additional options for the subscription prompt.          |
+| `webhooks`                       | `object` (optional)  | The webhook configuration.                               |
+| `[key: string]`                  | `any`                | Additional properties can be added as needed.            |
 
 **Service Worker Params**
 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).
 
 In this distribution, you can specify the parameters via the following:
 
-| Field                      | Details                                                                                                                |
-|----------------------------|------------------------------------------------------------------------------------------------------------------------|
-| `serviceWorkerParam`       | Use to specify the scope, or the path the service worker has control of.  Example:  `{ scope: "/js/push/onesignal/" }` |
-| `serviceWorkerPath`        | The path to the service worker file.                                                                                   |
+| Field                | Details                                                                                                              |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `serviceWorkerParam` | Use to specify the scope, or the path the service worker has control of. Example: `{ scope: "/js/push/onesignal/" }` |
+| `serviceWorkerPath`  | The path to the service worker file.                                                                                 |
 
 </details>
 
 ---
 
 ### Service Worker File
-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)).
+
+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)).
 
 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).
 
 **Tip:**
 Visit `https://yoursite.com/OneSignalSDKWorker.js` in the address bar to make sure the files are being served successfully.
 
 ---
+
 ### Typescript
+
 This package includes Typescript support.
 
 ```ts
 interface IOneSignalOneSignal {
-	Slidedown: IOneSignalSlidedown;
-	Notifications: IOneSignalNotifications;
-	Session: IOneSignalSession;
-	User: IOneSignalUser;
-	Debug: IOneSignalDebug;
-	login(externalId: string, jwtToken?: string): Promise<void>;
-	logout(): Promise<void>;
-	init(options: IInitObject): Promise<void>;
-	setConsentGiven(consent: boolean): Promise<void>;
-	setConsentRequired(requiresConsent: boolean): Promise<void>;
+  Slidedown: IOneSignalSlidedown;
+  Notifications: IOneSignalNotifications;
+  Session: IOneSignalSession;
+  User: IOneSignalUser;
+  Debug: IOneSignalDebug;
+  login(externalId: string, jwtToken?: string): Promise<void>;
+  logout(): Promise<void>;
+  init(options: IInitObject): Promise<void>;
+  setConsentGiven(consent: boolean): Promise<void>;
+  setConsentRequired(requiresConsent: boolean): Promise<void>;
 }
 ```
 
 ### OneSignal API
+
 See the official [OneSignal WebSDK reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for information on all available SDK functions.
 
 ---
+
 ## Advanced Usage
+
 ### Events and Event Listeners
+
 Use listeners to react to OneSignal-related events:
 
 ### Notifications Namespace
-| Event Name | Callback Argument Type |
-|-|-|
-|'click'      | NotificationClickEvent|
-|'foregroundWillDisplay'| NotificationForegroundWillDisplayEvent
-| 'dismiss'| NotificationDismissEvent|
-|'permissionChange'| boolean|
-|'permissionPromptDisplay'| void|
+
+| Event Name                | Callback Argument Type                 |
+| ------------------------- | -------------------------------------- |
+| 'click'                   | NotificationClickEvent                 |
+| 'foregroundWillDisplay'   | NotificationForegroundWillDisplayEvent |
+| 'dismiss'                 | NotificationDismissEvent               |
+| 'permissionChange'        | boolean                                |
+| 'permissionPromptDisplay' | void                                   |
 
 ### Slidedown Namespace
-| Event Name | Callback Argument Type |
-|-|-|
-|'slidedownShown'      | boolean |
+
+| Event Name       | Callback Argument Type |
+| ---------------- | ---------------------- |
+| 'slidedownShown' | boolean                |
 
 ### Push Subscription Namespace
+
 | Event Name | Callback Argument Type |
-|-|-|
-|'change'      | boolean |
+| ---------- | ---------------------- |
+| 'change'   | boolean                |
 
 **Example**
+
 ```js
 OneSignal.Notifications.addEventListener('click', (event) => {
-  console.log("The notification was clicked!", event);
+  console.log('The notification was clicked!', event);
 });
 ```
 
 See the [OneSignal WebSDK Reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for all available event listeners.
 
 ## Troubleshooting
+
 ### `window.OneSignal already defined as 'object'!`
+
 You will get this error if you initialize twice. Make sure you are only initializing one time. When wrapped with `React.StrictMode`, your app might be rendering twice.
 
 ## Example App
+
 This repo includes an `example` React application implementing OneSignal. It was created using `create-react-app`. The app uses this repository's root level directory as the `react-onesignal` package and will bundle any changes on every run.
 
 ---
@@ -200,12 +219,13 @@ Give a ⭐️ if this project helped you!
 
 ## OneSignal
 
-* [Website](https://onesignal.com)
-* Twitter: [@onesignal](https://twitter.com/onesignal)
-* Github: [@OneSignal](https://github.com/OneSignal)
-* LinkedIn: [@onesignal](https://linkedin.com/company/onesignal)
+- [Website](https://onesignal.com)
+- Twitter: [@onesignal](https://twitter.com/onesignal)
+- Github: [@OneSignal](https://github.com/OneSignal)
+- LinkedIn: [@onesignal](https://linkedin.com/company/onesignal)
 
 ## Discord
+
 Reach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)!
 
 ## 📝 License
@@ -214,9 +234,10 @@ Copyright © 2023 [OneSignal](https://github.com/OneSignal).<br />
 This project is [Modified MIT](https://github.com/OneSignal/react-onesignal/blob/master/LICENSE) licensed.
 
 ## Thanks
+
 Special thanks to [pedro-lb](https://github.com/pedro-lb) and others for work on the project this package is [based on](https://github.com/pedro-lb/react-onesignal).
 <a href="https://github.com/onesignal/react-onesignal/graphs/contributors">
-  <img src="https://user-images.githubusercontent.com/11739227/119415383-1d354700-bcb7-11eb-946d-01c40cd07010.png" />
+<img src="https://user-images.githubusercontent.com/11739227/119415383-1d354700-bcb7-11eb-946d-01c40cd07010.png" />
 </a>
 
 Enjoy!

example/.gitignore

@@ -19,8 +19,6 @@
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 dev-ssl.crt
 dev-ssl.key

example/README.md

@@ -1,6 +1,6 @@
-# Getting Started with Create React App
+# Setup
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Run `npm install` then replace the string `<YOUR_APP_ID>` with your actual app id from the OneSignal dashboard project.
 
 ## Available Scripts
 

example/package.json

@@ -19,8 +19,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "yarn run prepare && react-scripts start",
-    "prepare": "cd .. && yarn build",
+    "start": "npm run prepare && react-scripts start",
+    "prepare": "cd .. && npm run build",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

example/public/OneSignalSDKWorker.js

@@ -0,0 +1 @@
+importScripts("https://onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

example/public/index.html

@@ -36,8 +36,8 @@
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
+      To begin the development, run `npm start` 
+      To create a production bundle, use `npm run build`
     -->
   </body>
 </html>

example/src/App.tsx

@@ -1,19 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
-import OneSignal from 'react-onesignal';
+import { useEffect } from "react";
+import OneSignal from "react-onesignal";
+import "./App.css";
+import logo from "./logo.svg";
 
 function App() {
-  try {
+  useEffect(() => {
     OneSignal.init({
-      appId: "f5d104e9-7462-4bf7-adc8-4ca501cb55b2",
+      appId: "<YOUR_APP_ID>",
     }).then(() => {
-      OneSignal.Debug.setLogLevel('trace');
-      OneSignal.login("rodrigo");
-      OneSignal.User.addAlias("myAlias", "1");
+      OneSignal.Debug.setLogLevel("trace");
     });
-  } catch (e) {
-    console.log(e);
-  }
+  }, []);
 
   return (
     <div className="App">