Flutter web support

[Zazo032]

trafficstars

Description: Flutter for Web has been under stable support for some time now, are there any plans to support other Flutter platforms within this plugin?

[hatemragab]

any updates ?

[magnocasmor]

any updates?

[petodavid]

You can use the native JS OneSignal SDK and call the JS functions using the dart:js library. Follow these steps: docs Example:

• Add the following to index.html:

 <script async="" src="https://cdn.onesignal.com/sdks/OneSignalSDK.js"></script>
 <script defer src="app.js"></script>

• Make sure that you initialized the SDK and the app id in the index.html file like this:

 <script>
  var OneSignal = window.OneSignal || [];

  var initConfig = {
        appId: "YOUR APP ID",
        notifyButton: {
            enable: true
        },
    };

  OneSignal.push(function () {
        OneSignal.SERVICE_WORKER_PARAM = { scope: '/' };
        OneSignal.SERVICE_WORKER_PATH = 'OneSignalSDKWorker.js'
        OneSignal.SERVICE_WORKER_UPDATER_PATH = 'OneSignalSDKUpdaterWorker.js'
        OneSignal.init(initConfig);
    });

    </script>

• Next, you'll need to add the OneSignal SDK Service Worker file to your site:

Create file and copy code

Create a new file OneSignalSDKWorker.js at the top-level root of your web directory.

Copy the following import statement: importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

JS side

Create a app.js file in the web directory:

function setExternalUserId(uid) {
    OneSignal.push(function() {
        OneSignal.setExternalUserId(uid);
    });
}

function disablePush(value) {
    OneSignal.setSubscription(!value);
}

function notificationPromptWeb() {
    OneSignal.push(function() {
        OneSignal.showNativePrompt();
    });
}

Dart side:

onesignal_web_wrapper.dart

 if (dart.library.js) 'onesignal_web_wrapper_implementation.dart';

abstract class OnesignalWebWrapper {
  static OnesignalWebWrapper? _instance;

  static OnesignalWebWrapper? get instance {
    _instance ??= getWrapper();
    return _instance;
  }

  void setExternalUserId({required String uid});

  void disablePush({required bool value});

  void notificationPromptWeb();
}

onesignal_web_wrapper_implementation.dart

import 'dart:js' as js;

import 'package:mcommerce/core/onesignal_web/onesignal_web_wrapper.dart';

class OnesignalWebWrapperImpl extends OnesignalWebWrapper {
  @override
  void setExternalUserId({required String uid}) {
    js.context.callMethod('setExternalUserId', [uid]);
    return;
  }

  @override
  void disablePush({required bool value}) {
    js.context.callMethod('disablePush', [value]);
    return;
  }

  @override
  void notificationPromptWeb() {
    js.context.callMethod('notificationPromptWeb', []);
    return;
  }
}

OnesignalWebWrapper getWrapper() => OnesignalWebWrapperImpl();

onesignal_web_wrapper_stub.dart

import 'onesignal_web_wrapper.dart';

OnesignalWebWrapper getWrapper() => throw UnsupportedError('Cannot create the wrapper.');

[Brechard]

any updated on this? would be nice to have it without having to do everything that @petodavid explained

[quyenvsp]

@petodavid SERVICE_WORKER_PARAM scope should not be '/' because Flutter service worker already in '/'. You must use Custom code setup and put it in subdirectory.

change the OneSignal scope to anything you choose to make room for another Service Worker to be placed at the root scope. document

if you still place it root '/' then will conflict and isPushNotificationsEnabled will be set to false at second time open app because

/* You can't be subscribed without a service worker registration */

SubscriptionManager.ts

[eduardohr-muniz]

Deu certo a solução acima porem não sei como pegar o player id do usuario você poderia me ajudar estou utilizando o flutter web

[quyenvsp]

@eduardohr-muniz

js file

var OneSignalFlutter = {
  getUserId: async function () {
    return new Promise((resolve) => {
      OneSignal.push(async function () {
        let userId = await OneSignal.getUserId();
        resolve(userId);
      });
    });
  },
}

dart file

@JS()
class OneSignalFlutter {
  external static Future<String?> getUserId();
}
class OneSignalUtils {
  static Future<String?> get userId async {
    String? userId;
    try {
      userId = await promiseToFuture<String?>(OneSignalFlutter.getUserId())
          .timeout(Duration(seconds: 15));
    } catch (e) {/**/}
    return userId;
  }
}

use

final userId = await OneSignalUtils.userId;