PushNotifications does not have web implementation

[novaknole]

Capacitor Version 1.5.2

npx cap doctor output:

@capacitor/cli 1.5.2

  @capacitor/core 1.5.2

  @capacitor/ios 1.5.2

  @capacitor/android 1.5.2

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

I have the following code in my app.js.

import {
    Plugins
} from '@capacitor/core'

const { PushNotifications } = Plugins;
PushNotifications.register();
PushNotifications.addListener('registration', function(e){
    console.log("eee ", e);
})
PushNotifications.addListener('registrationError', function(e){
    console.log("err ", e);
});

After using npx add ios and running app from xcode, it works fine. At least it says that remote notifications are not supported in simulator. Now, I run the website in browser and it says:
Uncaught (in promise) PushNotifications does not have web implementation..

Question 1) Why the above error? does this mean that I have to use PushAPI of the browser to have this working? i also have service worker where I listen push events. How do I make these work for both PWA web version and in also native version?

Question 2) I don't have ionic. So I use capacitor only just to convert my PWA web app to native app and also to use push notifications on ios , because pushapi is not supported on ios. Now, because of this, in my app.js , I have to import capacitor plugins. This means that my bundle size in web increases . If I can't use capacitor plugins in web, why to have import at all in app.js at all? Any idea how I can tackle this?

[Unkn0wn0x]

Your issue is not related to the PushNotification Plugin itself, did you added the following code to your app.components.ts?

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { registerWebPlugin } from "@capacitor/core";

const { PushNotifications } = Plugins;

@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html'
})
export class AppComponent {

    constructor() {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {
            registerWebPlugin(PushNotifications);
        });
    }

}

Hope it helps.

Cheers
Unkn0wn0x

[DTanmoy]

Getting error--------
Type 'PushNotificationsPlugin' is missing the following properties from type 'WebPlugin': config, loaded, listeners, windowListeners, and 7 more.

[sabi1981]

How about the Google Analytics?

import { Plugins } from '@capacitor/core';
import { registerWebPlugin } from '@capacitor/core';
const { GoogleAnalytics } = Plugins;`
...
initializeApp() {
    this.platform.ready().then(() => {
    registerWebPlugin(GoogleAnalytics);

ERROR in app.component.ts:163:25 - error TS2345: Argument of type '{ [prop: string]: any; }' is not assignable to parameter of type 'WebPlugin'.
Type '{ [prop: string]: any; }' is missing the following properties from type 'WebPlugin': config, loaded, listeners, windowListeners, and 9 more.

[The-Web-Architect]

Where do I insert this code?

[edgar-slalom]

I'm getting this same error trying to create a unit test:

'PushNotificationsPlugin does not have web implementation.'

Any ideas how to resolve this?

[zzzoor]

Hi ,
may be can try try this solution if using jasmine: https://capacitorjs.com/docs/guides/mocking-plugins#jasmine

[mrn-aglic]

Has anyone found a solution to this problem?

[ramay2088]

Is there any solution