1

I am trying to do a web push from LWC, I have downloaded the zip from https://github.com/web-push-libs/web-push, then I made a static resource in my sfdx project, the structure of the static resources is webpush folder with js libraries inside it

Reference: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library

enter image description here

The meta xml of the above looks like

<?xml version="1.0" encoding="UTF-8"?>
   <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata"> . 
   <cacheControl>Private</cacheControl> . 
   <contentType>application/zip</contentType>
</StaticResource>

And in my code, I am loading the web push js files as follows. (Not the entire code)

import webpush from '@salesforce/resourceUrl/webpush'
@track webPushInitialized = false;

renderedCallback() {
    if (this.webPushInitialized) {
        alert('Web push initialized.');
        return;
    }        
    this.webPushInitialized = true;        
    Promise.all([
        loadScript(this, webpush + '/web.push.lib.js'),
        loadScript(this, webpush + '/web.push.error.js'),
        loadScript(this, webpush + '/web.push.constants.js'),
        loadScript(this, webpush + '/vapid.helper.js'),
        loadScript(this, webpush + '/index.js'),
        loadScript(this, webpush + '/encryption.helper.js'),
        loadScript(this, webpush + '/cli.js')
    ])
        .then(() => {
            alert('Successfully loaded');
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Successfully loaded Web push library',
                    message: 'Library loaded successfully',
                    variant: 'success'
                })
            );                
        })
        .catch(error => {
            this.error = error;
            alert(this.error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading Web Push library',
                    message: JSON.stringify(this.error),
                    variant: 'error'
                })
            );
        });

}

I am always getting the error toast, never getting the success toast. Where am I going wrong ?

0

1 Answer 1

1

Web Push library for Node.js

Node.js is a complete different Environment and target than Web Components. You will not be able to use that library in the browser context.

Despite of that Browser Web Push Apis are not supported in Lockerservice - you can`t use web push at all via LWC (only via workarounds like aura component <= v.39 or apps loaded via ligthning:container or similar approach)

2
  • I am not concerned about web push library at the moment, what I am trying to figure out is that why am I not able to load the library in the renderedCallback method, it could be any JS files. Where am I going wrong? Commented Jul 31, 2019 at 3:31
  • As explained in the first part: it is a nodejs library - you are not able to use it in the browser.
    – Renji-xD
    Commented Jul 31, 2019 at 6:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .