[Bug]: [connectivity_plus] onConnectivityChanged does not fire on web from a bundled application [workaround provided]

[iandavis0527]

Platform

Web + Chrome

Plugin

connectivity_plus

Version

6.1.3

Flutter SDK

3.27.3

Steps to reproduce

1. Subscribe to the onConnectivityChanged stream.
2. Build a release flavor of your application for web
3. The onConnectivityChanged stream does not get called.

The onConnectivityChanged works in web when I am debugging my application, but when I build a release web bundle that is hosted with nginx, it doesn't fire any events. I diagnosed this issue and the problem seems to rely somewhere between the top level Connectivity class and the method channel that should link to the web specific plugin. I worked around the problem by checking for the web platform myself and just directly instantiating the DartHtmlConnectivityPlugin class, and listening to it's stream, which works in both debug and release versions on web. The code sample below will illustrate the workaround I used to solve the problem in my application. Since the problem is only present in a release build of the application, I cannot provide the appropriate logs for --verbose (the error does not happen when run using flutter run via debug build)

Code Sample

if (is_web) {
    /// For some reason, bypassing the Connectivity class and instead instantiating the DartHtmlConnectivityPlugin class fixes the issue with the release flavor.
    /// I suspect something is going wrong with the method channel and the web specific plugin linking up properly.
    stream = DartHtmlConnectivityPlugin().onConnectivityChanged;
} else {
  stream = Connectivity().onConnectivityChanged;
}

stream.listen((result) async {
  final hasNetwork = result.contains(ConnectivityResult.wifi);

  if (!hasNetwork) {
    connectionStatusStream.add(false);
    connected = false;
    return;
  }

  await verifyServerStatus();
});

/// The web implementation of the ConnectivityPlatform of the Connectivity plugin.
class DartHtmlConnectivityPlugin {
  /// Checks the connection status of the device.
  Future<List<ConnectivityResult>> checkConnectivity() async {
    print("custom_web_connectivity.checkConncetivity()");
    return (window.navigator.onLine)
        ? [ConnectivityResult.wifi]
        : [ConnectivityResult.none];
  }

  StreamController<List<ConnectivityResult>>? _connectivityResult;

  /// Returns a Stream of ConnectivityResults changes.
  Stream<List<ConnectivityResult>> get onConnectivityChanged {
    if (_connectivityResult == null) {
      print(
          "custom_web_connectivity.onConnectivityChanged creating new stream");
      _connectivityResult =
          StreamController<List<ConnectivityResult>>.broadcast();
      const EventStreamProvider<Event>('online').forTarget(window).listen((_) {
        print("custom_web_connectivity window.online event triggered");
        _connectivityResult!.add([ConnectivityResult.wifi]);
      });
      const EventStreamProvider<Event>('offline').forTarget(window).listen((_) {
        print("custom_web_connectivity window.offline event triggered");
        _connectivityResult!.add([ConnectivityResult.none]);
      });
    }
    return _connectivityResult!.stream;
  }
}

Logs

The logs as requested above cannot be provided as the issue only happens within a release web build of my application.

Flutter Doctor

[√] Flutter (Channel stable, 3.27.3, on Microsoft Windows [Version 10.0.19045.5487], locale en-US)
    • Flutter version 3.27.3 on channel stable at C:\Users\Ian\Desktop\libraries\flutter3.16.5
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c519ee916e (6 weeks ago), 2025-01-21 10:32:23 -0800
    • Engine revision e672b006cb
    • Dart version 3.6.1
    • DevTools version 2.40.2

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\Ian\AppData\Local\Android\Sdk
    • Platform android-35, build-tools 34.0.0
    • ANDROID_SDK_ROOT = C:\Users\Ian\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.34)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.34601.136
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.97.2)
    • VS Code at C:\Users\Ian\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.106.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.5487]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 133.0.6943.142
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 133.0.3065.92

[√] Network resources
    • All expected network resources are available.

• No issues found!

Checklist before submitting a bug

• [x] I searched issues in this repository and couldn't find such bug/problem
• [x] I Google'd a solution and I couldn't find it
• [x] I searched on StackOverflow for a solution and I couldn't find it
• [x] I read the README.md file of the plugin
• [x] I'm using the latest version of the plugin
• [x] All dependencies are up to date with flutter pub upgrade
• [x] I did a flutter clean
• [x] I tried running the example project

[miquelbeltran]

I remember there are some optimization parameters when compiling for release, i.e. dart2js-optimization parameter. Maybe that causes some of the JS implementation to be trimmed off. Is there a chance you can experiment with that parameter and let us know what you find?

[iandavis0527]

Just tried my builds with optimization levels 0->4 without much success (used the -O parameter which seems to have replaced --dart2js-optimization). Level 0 outright fails and according to some other documentation appears to be intended only for internal dart debugging, not actual app builds. Level 1 and above had no affect and still did not seem to catch the online/offline events. I also verified this using chrome dev tools by listening to the underlying window "online"/"offline" events and those are firing properly. Happy to try other things if you have suggestions.

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 15 days