Steps to reproduce Notification f

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Notification from dart:html not being shown. about flutter HOT 4 OPEN

BenjiFarquhar commented on July 27, 2024

Notification from dart:html not being shown.

from flutter.

Comments (4)

darshankawar commented on July 27, 2024 1

Can you please show a screenshot of the full page with the notification showing "Hello World!"? Are you running locally in debug mode with flutter run -d chrome, as I am?

Yes, I ran locally with same command. Interestingly, when I for the first time ran the code, I did see the notification on the top right corner of the screen but I didn't take screenshot or video record it and now when I tried again, I don't see it occuring, so I missed the chance to record it : (

I will keep the issue open for team's attention / tracking.

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.22.2, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.22.2 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (33 hours ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.23.0-13.0.pre.262, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.23.0-13.0.pre.262 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6a8f70f11e (2 hours ago), 2024-06-18 00:12:10 -0400
    • Engine revision 78fdd06af5
    • Dart version 3.5.0 (build 3.5.0-272.0.dev)
    • DevTools version 2.36.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

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

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

from flutter.

darshankawar commented on July 27, 2024

@BenjiFarquhar

Notification from dart:html is not working. Is this code meant to show a notification?

This does work. You need to allow notifications to show, as below:

Then upon running the given code, it shows the notifications and gets printed in the console as well:

A Dart VM Service on Chrome is available at: http://127.0.0.1:52353/_CeaKEIrgOQ=
Hello, World!

from flutter.

BenjiFarquhar commented on July 27, 2024

@darshankawar Thanks. I click "Allow" when that pops up. But then no notification is shown to me.

I'm expecting to also see a new notification every time I click the FAB, but don't:

Can you please show a screenshot of the full page with the notification showing "Hello World!"? Are you running locally in debug mode with flutter run -d chrome, as I am?

My version of chrome is Version 125.0.6422.176 (Official Build) (arm64). I just updated to Version 126.0.6478.62 (Official Build) (arm64) but it didn't fix it.

from flutter.

ditman commented on July 27, 2024

Thanks for creating this issue; dart:html is a very thin js-interop layer that enables Flutter Web apps use standard JS APIs, in this case, the "Notifications API". Here's its documentation:

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Here's some highlights from the documentation that are causing this issue (and its reproduction):

the user needs to grant permission to display notifications, which is generally done when the app or site initializes, using the Notification.requestPermission() method. This should be done in response to a user gesture, such as clicking a button.
...
This is not only best practice but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture. 💔

The reproduction code provided is attempting to requestPermission and display notifications without user interaction (on its initState method)

Proposed solution

I'd modify the _MyHomePageState class from the reproduction to something like this:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  /// onPressed, display a notification and increase the counter.
  void _incrementCounter() async {
    await displayNotification();
    setState(() {
      _counter++;
    });
  }

  /// Always request for permissions, and if 'granted', display a notification.
  Future<void> displayNotification() async {
    final permission = await html.Notification.requestPermission();
    if (permission == 'granted') {
      html.Notification('About to update counter to: ${_counter + 1}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  // Removed `initState`
}

Some unsolicited advice:

Remember to reset the allow/deny notifications in the settings or the "origin settings" button:
I'd recommend migrating this code from dart:html to package:web, which is a more modern (and Wasm-compatible) js-interop layer. See the migration instructions.

Please, @BenjiFarquhar, let me know if this helps, so we can close this issue. Thanks!

from flutter.

Notification from dart:html not being shown. about flutter HOT 4 OPEN

Comments (4)

Proposed solution

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent