Flutter web support

[Zazo032]

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;

[nan-li]

Additional request for this feature from #1023

What's on your mind?

Hello Team,

I noticed that the OneSignal Flutter SDK currently does not support Flutter Web. However, OneSignal does provide Web push notifications through its JavaScript SDK.

I would like to request official Flutter Web support in the onesignal_flutter package. Since Firebase Cloud Messaging (FCM) provides Web support, it would be great if OneSignal could also extend its Flutter SDK to include Web.

Why is this needed?
Many Flutter developers need cross-platform push notifications (Android, iOS, and Web).

Currently, we have to manually integrate OneSignal’s Web push via JavaScript.

Having official Web support would make integration easier and more efficient for developers.

Possible Solutions:
Extend the Flutter SDK to support Web by internally using OneSignal's Web SDK.

Provide official documentation on how to integrate Web push with Flutter projects.

Additional Context:
Flutter Version: 3.29.2

OneSignal SDK Version: 5.3.0

Would love to hear if there are any plans for Flutter Web support! 🚀

Thanks! 😊

[ThomasEcalle]

👋 Hi everyone,

I wanted to share a little project that might help others facing the same pain as me.

I’m a Flutter developer working on multiple apps for different clients. A few times now I’ve had to adapt existing Flutter apps to the Web. Each time, integrating OneSignal on Web meant:
• Adding lots of custom JavaScript directly in index.html
• Doing pretty “hacky” conditional logic in Flutter (tons of if (kIsWeb) everywhere) to switch between the Flutter SDK on mobile and the JS SDK on web.

It worked, but it was messy, hard to maintain, and error-prone.

So I decided to build a federated Flutter plugin to unify this experience:

👉 augmented_onesignal on pub.dev
• On mobile (Android/iOS), it just delegates to the official onesignal_flutter SDK.
• On Web, it wraps the OneSignal JS SDK via dart:js interop.

It’s still very early-stage. For now I’ve only implemented the core features I needed for my projects:
• Initialization
• Permission handling
• Foreground / click notification listeners
• User login
• User tags

I’m sure it can be improved and I’m totally open to feedback, PRs, ideas.

I made it mostly to save time on my own projects and make them easier to maintain, but I’d love if one day OneSignal officially supports Web from their Flutter plugin, because I can’t guarantee I’ll maintain this with the same quality as the official OneSignal team.

Hope it can help others in the meantime! Cheers! 🚀

[jkasten2]

Flutter for Web hasn't seen any major improvements in adoption industry wide compared to other web frontend frameworks since it was introduced by Google. Given this overall low usage and no recent trends we don't plan to add official support for Flutter for Web to this SDK.

While we don't plan to add official support for Fluter for Web we are open to suggestions from the community if any changes to existing SDKs will make it easier for 3rd party plugins to support this target. The current v5 mobile SDKs and v16 website SDK have pretty similar public APIs and behaviors, but if any particular remaining differences are large pain points we can concern changes in future major versions.

While we are closing this issue as "not planed" we will continue allow replies here so the community has a place to discuss and share OneSignal options on this topic.