Web Support

analysis_options.yaml

@@ -117,7 +117,7 @@ linter:
     - prefer_typing_uninitialized_variables
     - prefer_void_to_null
     - provide_deprecation_message
-    - public_member_api_docs
+    # - public_member_api_docs
     - recursive_getters
     - slash_for_doc_comments
     - sort_child_properties_last

flutter_local_notifications/example/.metadata

@@ -1,23 +1,23 @@
 # This file tracks properties of this Flutter project.
 # Used by Flutter tool to assess capabilities and perform upgrades etc.
 #
-# This file should be version controlled.
+# This file should be version controlled and should not be manually edited.
 
 version:
-  revision: 84a1e904f44f9b0e9c4510138010edcc653163f8
-  channel: stable
+  revision: "603104015dd692ea3403755b55d07813d5cf8965"
+  channel: "stable"
 
 project_type: app
 
 # Tracks metadata for the flutter migrate command
 migration:
   platforms:
     - platform: root
-      create_revision: 84a1e904f44f9b0e9c4510138010edcc653163f8
-      base_revision: 84a1e904f44f9b0e9c4510138010edcc653163f8
-    - platform: macos
-      create_revision: 84a1e904f44f9b0e9c4510138010edcc653163f8
-      base_revision: 84a1e904f44f9b0e9c4510138010edcc653163f8
+      create_revision: 603104015dd692ea3403755b55d07813d5cf8965
+      base_revision: 603104015dd692ea3403755b55d07813d5cf8965
+    - platform: web
+      create_revision: 603104015dd692ea3403755b55d07813d5cf8965
+      base_revision: 603104015dd692ea3403755b55d07813d5cf8965
 
   # User provided section
 

flutter_local_notifications/example/lib/main.dart

@@ -1,6 +1,6 @@
 import 'dart:async';
 import 'dart:convert';
-import 'dart:io';
+import 'dart:io' hide Platform;
 // ignore: unnecessary_import
 import 'dart:typed_data';
 
@@ -15,12 +15,15 @@ import 'package:image/image.dart' as image;
 import 'package:path_provider/path_provider.dart';
 import 'package:timezone/data/latest_all.dart' as tz;
 import 'package:timezone/timezone.dart' as tz;
+import 'package:universal_platform/universal_platform.dart';
 
 import 'padded_button.dart';
 import 'plugin.dart';
 import 'repeating.dart' as repeating;
 import 'windows.dart' as windows;
 
+typedef Platform = UniversalPlatform;
+
 /// Streams are created so that app can respond to notification-related events
 /// since the plugin is initialized in the `main` function
 final StreamController<NotificationResponse> selectNotificationStream =
@@ -273,6 +276,11 @@ class _HomePageState extends State<HomePage> {
       setState(() {
         _notificationsEnabled = grantedNotificationPermission ?? false;
       });
+    } else if (kIsWeb) {
+      await flutterLocalNotificationsPlugin
+          .resolvePlatformSpecificImplementation<
+              WebFlutterLocalNotificationsPlugin>()
+          ?.requestNotificationsPermission();
     }
   }
 
@@ -354,13 +362,14 @@ class _HomePageState extends State<HomePage> {
                       await _showNotificationWithNoBody();
                     },
                   ),
-                  PaddedElevatedButton(
-                    buttonText: 'Show notification with custom sound',
-                    onPressed: () async {
-                      await _showNotificationCustomSound();
-                    },
-                  ),
-                  if (kIsWeb || !Platform.isLinux) ...<Widget>[
+                  if (Platform.isAndroid)
+                    PaddedElevatedButton(
+                      buttonText: 'Show notification with custom sound',
+                      onPressed: () async {
+                        await _showNotificationCustomSound();
+                      },
+                    ),
+                  if (!kIsWeb && !Platform.isLinux) ...<Widget>[
                     PaddedElevatedButton(
                       buttonText:
                           'Schedule notification to appear in 5 seconds '
@@ -383,26 +392,28 @@ class _HomePageState extends State<HomePage> {
                         await _checkPendingNotificationRequests();
                       },
                     ),
+                  ],
+                  if (!Platform.isLinux)
                     PaddedElevatedButton(
                       buttonText: 'Get active notifications',
                       onPressed: () async {
                         await _getActiveNotifications();
                       },
                     ),
-                  ],
                   PaddedElevatedButton(
                     buttonText: 'Show notification from silent channel',
                     onPressed: () async {
                       await _showNotificationWithNoSound();
                     },
                   ),
-                  PaddedElevatedButton(
-                    buttonText:
-                        'Show silent notification from channel with sound',
-                    onPressed: () async {
-                      await _showNotificationSilently();
-                    },
-                  ),
+                  if (!kIsWeb)
+                    PaddedElevatedButton(
+                      buttonText:
+                          'Show silent notification from channel with sound',
+                      onPressed: () async {
+                        await _showNotificationSilently();
+                      },
+                    ),
                   PaddedElevatedButton(
                     buttonText: 'Cancel latest notification',
                     onPressed: () async {
@@ -415,7 +426,8 @@ class _HomePageState extends State<HomePage> {
                       await _cancelAllNotifications();
                     },
                   ),
-                  if (!Platform.isWindows) ...repeating.examples(context),
+                  if (!Platform.isWindows && !kIsWeb)
+                    ...repeating.examples(context),
                   const Divider(),
                   const Text(
                     'Notifications with actions',
@@ -442,7 +454,7 @@ class _HomePageState extends State<HomePage> {
                         await _showNotificationWithTextAction();
                       },
                     ),
-                  if (!Platform.isLinux)
+                  if (!Platform.isLinux && !kIsWeb)
                     PaddedElevatedButton(
                       buttonText: 'Show notification with text choice',
                       onPressed: () async {
@@ -1050,24 +1062,35 @@ class _HomePageState extends State<HomePage> {
       ],
     );
 
-    final WindowsNotificationDetails windowsNotificationsDetails =
-        WindowsNotificationDetails(
-      subtitle: 'Click the three dots for another button',
-      actions: <WindowsAction>[
-        const WindowsAction(
-          content: 'Text',
-          arguments: 'text',
-        ),
-        WindowsAction(
-          content: 'Image',
-          arguments: 'image',
-          image: File('icons/coworker.png').absolute,
-        ),
-        const WindowsAction(
-          content: 'Context',
-          arguments: 'context',
-          placement: WindowsActionPlacement.contextMenu,
-        ),
+    final WindowsNotificationDetails? windowsNotificationsDetails = kIsWeb
+        ? null
+        : WindowsNotificationDetails(
+            subtitle: 'Click the three dots for another button',
+            actions: <WindowsAction>[
+              const WindowsAction(
+                content: 'Text',
+                arguments: 'text',
+              ),
+              WindowsAction(
+                content: 'Image',
+                arguments: 'image',
+                image: File('icons/coworker.png').absolute,
+              ),
+              const WindowsAction(
+                content: 'Context',
+                arguments: 'context',
+                placement: WindowsActionPlacement.contextMenu,
+              ),
+            ],
+          );
+
+    final WebNotificationDetails webDetails = WebNotificationDetails(
+      actions: <WebNotificationAction>[
+        const WebNotificationAction(action: 'Text', title: 'text'),
+        WebNotificationAction(
+            action: 'Image',
+            title: 'image',
+            icon: Uri.parse('https://picsum.photos/200')),
       ],
     );
 
@@ -1077,6 +1100,7 @@ class _HomePageState extends State<HomePage> {
       macOS: macOSNotificationDetails,
       linux: linuxNotificationDetails,
       windows: windowsNotificationsDetails,
+      web: webDetails,
     );
     await flutterLocalNotificationsPlugin.show(
         id++, 'plain title', 'plain body', notificationDetails,
@@ -1123,11 +1147,21 @@ class _HomePageState extends State<HomePage> {
       ],
     );
 
+    const WebNotificationDetails webDetails = WebNotificationDetails(
+      actions: <WebNotificationAction>[
+        WebNotificationAction(
+            action: 'text',
+            title: 'Send a reply',
+            type: WebNotificationActionType.textInput),
+      ],
+    );
+
     const NotificationDetails notificationDetails = NotificationDetails(
       android: androidNotificationDetails,
       iOS: darwinNotificationDetails,
       macOS: darwinNotificationDetails,
       windows: windowsNotificationDetails,
+      web: webDetails,
     );
 
     await flutterLocalNotificationsPlugin.show(id++, 'Text Input Notification',
@@ -1416,11 +1450,14 @@ class _HomePageState extends State<HomePage> {
     );
     final WindowsNotificationDetails windowsDetails =
         WindowsNotificationDetails(audio: WindowsNotificationAudio.silent());
+    const WebNotificationDetails webDetails =
+        WebNotificationDetails(isSilent: true);
     final NotificationDetails notificationDetails = NotificationDetails(
         windows: windowsDetails,
         android: androidNotificationDetails,
         iOS: darwinNotificationDetails,
-        macOS: darwinNotificationDetails);
+        macOS: darwinNotificationDetails,
+        web: webDetails);
     await flutterLocalNotificationsPlugin.show(
         id++, '<b>silent</b> title', '<b>silent</b> body', notificationDetails);
   }

flutter_local_notifications/example/web/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>example</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>

flutter_local_notifications/example/web/manifest.json

@@ -0,0 +1,35 @@
+{
+    "name": "example",
+    "short_name": "example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

flutter_local_notifications/lib/flutter_local_notifications.dart

@@ -40,3 +40,4 @@ export 'src/platform_specifics/darwin/notification_enabled_options.dart';
 
 export 'src/typedefs.dart';
 export 'src/types.dart';
+export 'src/web_flutter_local_notifications.dart';