feat: customise linked device name

[alechkos]

PR Details

The PR implements a functionality for setting a device and/or a browser names of a paired device.

Description

Once you paired the web client, you can see it in your linked devices section in the phone.
The PR adds a possibility to customize names of your linked devices.

By default, the library uses user agent for macOS with Google Chrome platform:

userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36'

That's the reason why you see Google Chrome (MacOS) in the linked device section.

In order to customize it you can provide values for two new properties while creating a new Client instance:

• deviceName
• browserName

Tip

Valid values for browserName are:
'Chrome' | 'Firefox' | 'IE' | 'Opera' | 'Safari' | 'Edge'

1. If you want to change the browser type only:

const client = new Client({
    // other properties...
    browserName: 'Opera',
});

The preview (click to expand)

2. If you want to change the device name only, the browser type will be retrieved from the user agent (in our case it is Google Chrome):

const client = new Client({
    // other properties...
    deviceName: 'TEST'
});

The preview (click to expand)

3. If you want to change both, the browser type and the device name:

const client = new Client({
    // other properties...
    deviceName: 'TEST',
    browserName: 'Firefox',
});

The preview (click to expand)

4. If you want only the device name to be shown, you can do it that way:

const client = new Client({
    // other properties...
    deviceName: 'TEST',
    browserName: 'Unknown', // or other invalid value
});

The preview (click to expand)

5. If the provided value for the browserName will be something else, but not one of the valid values, the linked device will be displayed with a OS type retrieved from the user agent:

const client = new Client({
    // other properties...
    browserName: 'MyBrowser',
});

The preview (click to expand)

How Has This Been Tested

Tested with a code provided in usage examples above.

You can try the feature by running one of the following commands:

• NPM

npm install github:alechkos/whatsapp-web.js#set-device-name

• YARN

yarn add github:alechkos/whatsapp-web.js#set-device-name

Types of changes

• Dependency change
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• I have updated the documentation accordingly (index.d.ts).
• I have updated the usage example accordingly (example.js)

[devlikepro]

The explanation and details should be either in example itself or in readme.md.
Imo, it's not a good practice to have a link to VCS (especially in github).

We've seen many github repos got removed and we'll lose important notes :)

[purpshell]

Seems to be compliant enough. Tested and provides correct browser data in the initial socket header (clientPayload)