OneSignal Angular TypeScript

onesingal.service.ts

import {Injectable} from '@angular/core';
import {Cache} from '../utils/storage.provider'; // Decorator to access local storage

let OneSignal;

const url = '';

@Injectable()
export class OneSignalService {
    @Cache({pool: 'OneSignal'}) oneSignalInit; // to check if OneSignal is already initialized. 
    @Cache({pool: 'OneSignal'}) oneSignalId: any; // store OneSignalId in localStorage
    @Cache({pool: 'Token'}) userSession: any; // User Session management token

    constructor() {
        console.log('OneSignal Service Init', this.oneSignalInit);
    }
    
    // Call this method to start the onesignal process.
    public init() {
        this.oneSignalInit ? console.log('Already Initialized') : this.addScript('https://cdn.onesignal.com/sdks/OneSignalSDK.js', (callback) => {
            console.log('OneSignal Script Loaded');
            this.initOneSignal();
        })
    }

    addScript(fileSrc, callback) {
        const head = document.getElementsByTagName('head')[0];
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.onload = callback;
        script.src = fileSrc;
        head.appendChild(script);
    }

    initOneSignal() {
        OneSignal = window['OneSignal'] || [];
        OneSignal.sendTag('user_id', this.userSession.user, (tagsSent) => {
            // Callback called when tags have finished sending
            console.log('OneSignal Tag Sent', tagsSent);
        });
        console.log('Init OneSignal');
        OneSignal.push(['init', {
            appId: 'xxx-xxx-xxx-xxx',
            autoRegister: true,
            allowLocalhostAsSecureOrigin: true,
            notifyButton: {
                enable: false,
            },
        }]);
        console.log('OneSignal Initialized');
        this.checkIfSubscribed();
    }

    subscribe() {
        OneSignal.push(() => {
            console.log('Register For Push');
            OneSignal.push(['registerForPushNotifications'])
            OneSignal.on('subscriptionChange', (isSubscribed) => {
                console.log('The user\'s subscription state is now:', isSubscribed);
                this.listenForNotification();
                OneSignal.getUserId().then((userId) => {
                    console.log('User ID is', userId);
                    this.oneSignalId = userId;
                    this.updateLocalUserProfile();
                });
            });
        });
    }

    listenForNotification() {
        console.log('Initalize Listener');
        OneSignal.on('notificationDisplay', (event) => {
            console.log('OneSignal notification displayed:', event);
            this.listenForNotification();
        });
    }

    getUserID() {
        OneSignal.getUserId().then((userId) => {
            console.log('User ID is', userId);
            this.oneSignalId = userId;
        });
    }

    checkIfSubscribed() {
        OneSignal.push(() => {
            /* These examples are all valid */
            OneSignal.isPushNotificationsEnabled((isEnabled) => {
                if (isEnabled) {
                    console.log('Push notifications are enabled!');
                    this.getUserID();
                } else {
                    console.log('Push notifications are not enabled yet.');
                    this.subscribe();
                }
            }, (error) => {
                console.log('Push permission not granted');
            });
        });
    }

    updateLocalUserProfile() {
        // Store OneSignal ID in your server for sending push notificatios.
    }
}

I would love to see more of your code, like the decorator, cause it dind't working for me.

If pool indicates the key of localStorage, we expect the following code.
( oneSignalInit will need to be set externally to true if OneSignalService.init() succeeds )

// ../utils/storage.provider.ts
const readLocalStorageObject = (storeKey: string ): Object => {
  return JSON.parse(window.localStorage.getItem(storeKey) || '{}');
};

export function Cache({ pool }: { pool: string }) {
  return (target: any, key: string) => {
    Object.defineProperty(target, key, {
      get: () => readLocalStorageObject(pool)[key],
      set: (value: string) => window.localStorage.setItem(pool, JSON.stringify({
        ...readLocalStorageObject(pool),
        [key]: value
      })),
    });
  };
}

I also hope that @PsyGik will give me a complete answer.

Hi,
Thanks for jour examples! We have tried the code and it works very well, excepting the listenForNotification(), that not displays anything.
Have you any idea what would be wrong?

Hi,
Thanks for jour examples! We have tried the code and it works very well, excepting the listenForNotification(), that not displays anything.
Have you any idea what would be wrong?

same here, any idea how to solve that?

Looks like add script dynamically invokes some problems. I added the script to my head manually, and the problems solved!

Any sample project using this service? I can not make it work.

Hi,
Thanks for jour examples! We have tried the code and it works very well, excepting the listenForNotification(), that not displays anything.
Have you any idea what would be wrong?

yeah, does not Listen from the Notification