0

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

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)

  • 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? – Arup Sarkar Jul 31 '19 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 Jul 31 '19 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.