bug: TypeError: Failed to construct 'Notification': Illegal constructor

[73k05]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.4.0

  @capacitor/core: 2.4.0

  @capacitor/android: 2.4.0

  @capacitor/electron: 2.4.0

  @capacitor/ios: 2.4.0

Installed Dependencies:

  @capacitor/electron not installed

  @capacitor/cli 2.2.0

  @capacitor/android 2.4.0

  @capacitor/ios 2.4.0

  @capacitor/core 2.4.0

[success] Android looking great! 👌

Platform(s)

Android 10 nokia 8.1 Android 10 Pixel 2 emulator

Current Behavior

I open my webapp PWA through the Android device browser with my localhost network IP address. The app is loading correctly. I try to show notification after having asked the permissions.

• I get this error on my device another app is displaying over chrome

• I get this on my device and emulator after permission is accepted and LocalNotifications.schedule({...}) has been called

  57.chunk.js:168072 Notification error:  TypeError: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.
  at LocalNotificationsPluginWeb.buildNotification (57.chunk.js:3803)
  at LocalNotificationsPluginWeb.sendNotification (57.chunk.js:3798)
  at 57.chunk.js:3813
  at Array.forEach (<anonymous>)
  at LocalNotificationsPluginWeb.schedule (57.chunk.js:3812)
  at main.chunk.js:2200

Expected Behavior

It should ask me permission and if I accept display the notification correctly without any error.

Code Reproduction

import {useEffect} from 'react';
import {Plugins} from '@capacitor/core';

const {LocalNotifications} = Plugins;

// Initialize Firebase

export function LocalNotification() {
    useEffect(() => {
        },
        // array of variables that can trigger an update if they change. Pass an
        // an empty array if you just want to run it once after component mounted.
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [])

    const scheduleNotification = async (notificationTitle: string, notificationText: string) => {
        // your post layout code (or 'effect') here.
        const notifEnabled = await LocalNotifications.areEnabled()
        if (LocalNotifications.requestPermissions && notifEnabled) {
            LocalNotifications.requestPermissions().then(async r => {
                console.log("Notification Permission asked:", r)
                console.log("NotifEnabled:", notifEnabled)
                if (r.results[0] !== "granted") {
                    return
                }
                await LocalNotifications.schedule({
                    notifications: [
                        {
                            title: notificationTitle,
                            body: notificationText,
                            id: 1,
                            schedule: {at: new Date(Date.now() + 1000 * 3)},
                            actionTypeId: "",
                            extra: null,
                            smallIcon: "/public/assets/icon/favicon.png",
                            attachments: [{
                                id: "001",
                                url: "/public/assets/icon/icon.png"
                            }]
                        }
                    ]
                }).then(r => {
                    console.log("Notification showed: ", r)
                }).catch(reason => {
                    console.error("Notification error: ", reason)
                });
            }).catch(reason => {
                console.error("Notification error: ", reason)
            });
        }

    };

    return {
        scheduleNotification
    };
}

Other Technical Details

npm --version output: 6.14.5

node --version output: v12.18.0

Additional Context

It works perfectly on

• Android App
• PWA chrome and brave desktop
• iOS App It does NOT work on PWA Android chrome and brave

Regards 73k05

[jcesarmobile]

Notification API doesn't work on Android PWA see https://bugs.chromium.org/p/chromium/issues/detail?id=481856

On Capacitor 3 the plugins have been moved out and the new @capacitor/local-notifications plugin will throw unsupported errors.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.