Open BenjiFarquhar opened 1 week ago
darshankawar
commented
1 week ago @BenjiFarquhar
Notificationfrom 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!
BenjiFarquhar
commented
1 week ago @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.
darshankawar
commented
1 week ago 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.
ditman
commented
5 days ago 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:
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)
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:
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!
Steps to reproduce
Notificationfrom dart:html is not working. Is this code meant to show a notification?html.Notification('Hello, World!');See the code sample for a full app that is not showing the notification.
Expected results
It shows a notification in the chrome browser.
Actual results
No notification is shown in the chrome browser.
Code sample
Code sample
```dart import 'package:flutter/material.dart'; import 'dart:html' as html; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override StateFlutter Doctor output
Doctor output
```console [✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-GB) • Flutter version 3.22.2 on channel stable at /Users/benjaminfarquhar/development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (11 days ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/benjaminfarquhar/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/benjaminfarquhar/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.4) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15F31d • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.3) • Android Studio at /Applications/Android Studio.app/Contents • 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.6+0-17.0.6b829.9-10027231) [✓] IntelliJ IDEA Community Edition (version 2023.2.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.90.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.90.0 [✓] Connected device (4 available) • Benji’s iPhone 13 mini (mobile) • 00008110-001119123C7B801E • ios • iOS 17.5.1 21F90 • macOS (desktop) • macos • darwin-arm64 • macOS 14.5 23F79 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.5 23F79 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.176 [✓] Network resources • All expected network resources are available. • No issues found!```