flutterwebviewflutter-webflutter-web-browser

How to enable web notification in Flutter web view


I create app from web using web view the web used to send notification to user it work in chrome and other browser but it not work in web view app

Is their any way to show web notification like chrome in flutter web view

I have try firebase not work for web notification it show only notification from firebase


Solution

  • As you can see from the MDN Notifications API - Browser Compatibility table, iOS and Android WebView doesn't support the Web Notification JavaScript API.

    However, I have created an example using the flutter_inappwebview plugin (I'm the author) that uses a UserScript to inject custom JavaScript code at web page startup to implement the Web Notification API. The full code example is available at flutter_inappwebview_examples/web_notification.

    The injected JavaScript code tries to create a "polyfill" for the Notification window object and communicate with Flutter/Dart side using JavaScript Handlers to manage and implement the corresponding Notification UI, for example when you are requesting permission with Notification.requestPermission() or when you want to show a notification, for example:

    Notification.requestPermission().then(result => {
      if (result === 'granted') {
        const notification = new Notification('Notification Title', {
          body: 'Notification Body!',
          icon: 'https://picsum.photos/250?image=9',
          vibrate: [200, 100, 200]}
        );
        console.log(notification);
      }
    });
    

    You can use the flutter_inappwebview_examples/web_notification project example as a starting point for your mobile app!

    Simulator Screen Recording - iPhone 14 Pro Max - 2022-11-24 at 23 25 39