Failed to execute 'atob' on 'Window'

[Anaizing]

Im at the end of step 5 and getting this error. The public key im using is from this website as requested Push Companion and although I've tried several different keys, none seem to be working.

This is the full main.js file

'use strict';

const applicationServerPublicKey =
  "<BOF5DM_9mlnM8P42tcxsrz7ZrcguBATU9E6lDcJG1Guxv1XPe0DZfMUX5jLESCCUKnDudPYLnkxvVICRWIK05tw>";

const pushButton = document.querySelector('.js-push-btn');

let isSubscribed = false;
let swRegistration = null;

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;
}
if ("serviceWorker" in navigator && "PushManager" in window) {
  console.log("Service Worker and Push is supported");

  navigator.serviceWorker
    .register("sw.js")
    .then(function(swReg) {
      console.log("Service Worker is registered", swReg);

      swRegistration = swReg;
    })
    .catch(function(error) {
      console.error("Service Worker Error", error);
    });
} else {
  console.warn("Push messaging is not supported");
  pushButton.textContent = "Push Not Supported";
}
function initializeUI() {
  pushButton.addEventListener("click", function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription().then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log("User IS subscribed.");
    } else {
      console.log("User is NOT subscribed.");
    }

    updateBtn();
  });
}

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = "Disable Push Messaging";
  } else {
    pushButton.textContent = "Enable Push Messaging";
  }

  pushButton.disabled = false;
}

navigator.serviceWorker.register("sw.js").then(function(swReg) {
  console.log("Service Worker is registered", swReg);

  swRegistration = swReg;
  initializeUI();
});

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager
    .subscribe({
      userVisibleOnly: true,
      applicationServerKey: applicationServerKey
    })
    .then(function(subscription) {
      console.log("User is subscribed.");

      updateSubscriptionOnServer(subscription);

      isSubscribed = true;

      updateBtn();
    })
    .catch(function(err) {
      console.log("Failed to subscribe the user: ", err);
      updateBtn();
    });
}
function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector(".js-subscription-json");
  const subscriptionDetails = document.querySelector(
    ".js-subscription-details"
  );

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove("is-invisible");
  } else {
    subscriptionDetails.classList.add("is-invisible");
  }
}

[gauntface]

@Anaizing I think you might need to remove the < and > in your application key, so the change would be from this:

const applicationServerPublicKey = "<BOF5DM_9mlnM8P42tcxsrz7ZrcguBATU9E6lDcJG1Guxv1XPe0DZfMUX5jLESCCUKnDudPYLnkxvVICRWIK05tw>";

to this:

const applicationServerPublicKey = "BOF5DM_9mlnM8P42tcxsrz7ZrcguBATU9E6lDcJG1Guxv1XPe0DZfMUX5jLESCCUKnDudPYLnkxvVICRWIK05tw";

[Anaizing]

Haha, don't I feel silly. You are correct, thank you kindly!!

[gauntface]

ha ha no worries, glad its working :)