https://jsbench.me/9ul6axxl3r/2

base64UrlToUint8Array.js

// https://github.com/search?q=applicationServerKey+publicKey&type=code

// https://github.com/gauntface/simple-push-demo/blob/bee57021049dbfbba987a74de5bd01d5a9e96a0f/frontend/scripts/encryption/helpers.js
function base64UrlToUint8Array(base64UrlData) {
	const padding = '='.repeat((4 - base64UrlData.length % 4) % 4);
	const base64 = (base64UrlData + padding)
		.replace(/-/g, '+')
		.replace(/_/g, '/');

	const rawData = window.atob(base64);
	const buffer = new Uint8Array(rawData.length);

	for (let i = 0; i < rawData.length; ++i) {
		buffer[i] = rawData.charCodeAt(i);
	}
	return buffer;
}

// https://github.com/LazyBoyJgn99/who-is-under/blob/582b93835f878c57609d4556b06b9e3286fe0f6f/src/sw/swRegister.js
function urlBase64ToUint8Array(base64String) {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

// https://github.com/darkNightMan/node-rbac-sql/blob/b62ff1db529f87e1e2bc142fe0c4740a3fe1b03d/views/public/push.js
function urlB64ToUint8Array(base64String) {
      const padding = '='.repeat((4 - base64String.length % 4) % 4);
      const base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');
      const rawData = window.atob(base64);
      const outputArray = new Uint8Array(rawData.length);

      for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
      }
      return outputArray;
    }

// code gold

const b64ToUint8Array = b64 => new Uint8Array([...atob((b64 + '='.repeat((4 - (b64.length % 4)) % 4)).replace(/-/g, '+').replace(/_/g, '/'))].map(c=>c.charCodeAt()))



///# generateKey
// https://github.com/LazyBoyJgn99/who-is-under/blob/582b93835f878c57609d4556b06b9e3286fe0f6f/src/sw/swRegister.js
  function generateKey() {
    return crypto.subtle.generateKey({
      name: "ECDSA",
      namedCurve: "P-256",
    }, true, ["sign", "verify"]).then(cryptoKey =>
      crypto.subtle.exportKey("raw", cryptoKey.publicKey)
    ).then(publicKey => new Uint8Array(publicKey));
  }

best.js

const b64ToUint8Array = b64 => new Uint8Array([...atob((b64 + '='.repeat((4 - (b64.length % 4)) % 4)).replace(/-/g, '+').replace(/_/g, '/'))].map(c=>c.charCodeAt()))
const publicKey = 'BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaNndIo';
(await (await navigator.serviceWorker.ready).pushManager.subscribe({userVisibleOnly: true, applicationServerKey: b64ToUint8Array(publicKey) })).toJSON()

// ok
Notification.requestPermission()
navigator.serviceWorker.register('./service-worker.js')
var applicationServerKey = 'BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaNndIo'
var subscription = (await (await navigator.serviceWorker.ready).pushManager.subscribe({ userVisibleOnly: true, applicationServerKey })).toJSON()
fetch('https://web-push-server.vercel.app/api/send', {method: 'POST', body: JSON.stringify({ subscription, payload: { title: 'やあ😸' } })})
copy(`curl https://web-push-server.vercel.app/api/send -d '${JSON.stringify({ subscription, payload: { title: 'やあ😸' } })}'`)

useCustomKey.js

Notification.requestPermission()
navigator.serviceWorker.register('./service-worker.js')
var vapidDetails = await fetch('https://web-push-server.vercel.app/api/generateKeys').then(r=>r.json())
var subscription = (await (await navigator.serviceWorker.ready).pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: vapidDetails.publicKey })).toJSON()
fetch('https://web-push-server.vercel.app/api/send', {method: 'POST', body: JSON.stringify({ vapidDetails, subscription, payload: { title: 'やあ😸' } })})
copy(`curl https://web-push-server.vercel.app/api/send -d '${JSON.stringify({ vapidDetails, subscription, payload: { title: 'やあ😸' } })}'`)

なお、今回のVAPIDに対応する以前のバージョンのChrome (≦51)に対応する必要がなければ、マニフェストに記載していたgcm_sender_id等が不要になります。

https://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762

なんの変哲も無い箱

https://github30.github.io/web-push-study/