GoogleChromeLabs / web-push-codelab

Other
556 stars 291 forks source link

Failed to execute 'atob' on 'Window' #92

Open apalangi opened 4 years ago

apalangi commented 4 years ago

Hi! I'm getting the following error on my console that's preventing me from enabling the push notifications: main.js:37 Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at urlB64ToUint8Array (http://127.0.0.1:8887/scripts/main.js:37:26) at subscribeUser (http://127.0.0.1:8887/scripts/main.js:116:32) at HTMLButtonElement. (http://127.0.0.1:8887/scripts/main.js:69:7) urlB64ToUint8Array @ main.js:37

It's the line const rawData = window.atob(base64); that's in the function provided in main.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; }

I am new to this and have no clue what is going on. Any help/clarification would be GREATLY appreciated. Thanks!

xgqfrms commented 4 years ago

format your code first for a better reading experience

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;
}

make sure you base64 is a valid Base64 string(ASCII string)

error

image

ok

image

nintcheu commented 3 years ago

I have the same issue in @firebase/messaging library. I don't know how to fix that.

index.esm.js?8071:131 Uncaught (in promise) DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at base64ToArray (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:139:19) at eval (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:777:51) at step (webpack-internal:///./node_modules/@firebase/messaging/node_modules/tslib/tslib.es6.js:127:23) at Object.eval [as next] (webpack-internal:///./node_modules/@firebase/messaging/node_modules/tslib/tslib.es6.js:108:53) at fulfilled (webpack-internal:///./node_modules/@firebase/messaging/node_modules/tslib/tslib.es6.js:98:58)

--- INSIDE THE LIBRARY --- webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:139:19

function base64ToArray(base64String) { var padding = '='.repeat((4 - (base64String.length % 4)) % 4); var base64 = (base64String + padding) .replace(/-/g, '+') .replace(/_/g, '/'); var rawData = atob(base64); var outputArray = new Uint8Array(rawData.length); for (var i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; }

milanmeu commented 3 years ago

@nintcheu This codelab does not use Firebase. You can find a Firebase Cloud Messaging example here. As the error says, the string is not correctly encoded. Unfortunately, I cannot help you further here. I recommend that you look at the Firebase Cloud Messaging example and ask for help in the firebase/quickstart-js repository. Good luck.