Adding external library in salesforce LWC

Question

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

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 ?

Answer 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)