Webpack + Typescript messaging.getToken()

[geminixandroid]

[REQUIRED] Describe your environment

• Operating System version: windows 10 x64
• Browser version: Chrome 71.0.3578.98
• Firebase SDK version: 7.9.3 (worked on 6.6.2)
• Firebase Product: messaging
• typescript 3.7.5

[REQUIRED] Describe the problem

firebase.messaging().getToken() throws error

TypeError: Failed to execute 'subscribe' on 'PushManager': The provided value is not of type '(ArrayBuffer or ArrayBufferView)'
    at index.esm.js:790
    at u (tslib.es6.js:99)
    at Object.next (tslib.es6.js:80)
    at s (tslib.es6.js:70)

at index.esm.js:790

swRegistration.pushManager.subscribe({
                            userVisibleOnly: true,
                            applicationServerKey: vapidKey
                        })]

Steps to reproduce:

look console
https://test.geminixandroid.com

Relevant Code:

package.json

  "dependencies": {
    "axios": "^0.19.2",
    "axios-retry": "^3.1.2",
    "core-js": "^3.6.4",
    "dexie": "^2.0.4",
    "dexie-observable": "^1.0.0-beta.5",
    "dom-to-image": "^2.6.0",
    "firebase": "^7.9.3",
    "leaflet": "^1.6.0",
    "qrcode.vue": "^1.7.0",
    "register-service-worker": "^1.6.2",
    "three": "^0.113.2",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-json-pretty": "^1.6.3",
    "vue-offline": "^2.0.8",
    "vue-pdf": "^4.0.7",
    "vue-property-decorator": "^8.4.0",
    "vue-router": "^3.1.5",
    "vue-signature-pad": "^1.1.17",
    "vue2-leaflet": "^2.4.2",
    "vuetify": "^2.2.11",
    "vuex": "^3.1.2",
    "vuex-persistedstate": "^2.7.0"
  },
  "devDependencies": {
    "@mdi/font": "^4.9.95",
    "@types/dom-to-image": "^2.6.0",
    "@types/leaflet": "^1.5.8",
    "@typescript-eslint/eslint-plugin": "^2.18.0",
    "@typescript-eslint/parser": "^2.18.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-pwa": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-typescript": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "serviceworker-webpack-plugin": "^1.0.1",
    "tslint": "^6.0.0",
    "typescript": "^3.7.5",
    "vue-cli-plugin-vuetify": "^2.0.4",
    "vue-debounce-decorator": "^1.0.1",
    "vue-template-compiler": "^2.6.11",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

[Feiyang1]

I think this is the issue - https://bugs.chromium.org/p/chromium/issues/detail?id=802280
We recently switched vapidKey to base64 format in #2484, but older version of Chrome doesn't support base64 format in pushManager.subscribe.

I tested your link in Chrome 80, and there is no error. Can you please update your Chrome and retry?

[geminixandroid]

I think this is the issue - https://bugs.chromium.org/p/chromium/issues/detail?id=802280
We recently switched vapidKey to base64 format in #2484, but older version of Chrome doesn't support base64 format in pushManager.subscribe.

I tested your link in Chrome 80, and there is no error. Can you please update your Chrome and retry?

After update to chrome 80 it working now. Thank you.

[mitschabaude]

Why is this closed? The messaging library is currently broken in all but the very newest versions of Chrome and therefore can't be used in any serious projects. Sounds like an open issue to me ;)

I'm sure you will fix it, thanks for your hard work by the way 👍

[zwu52]

This is a legitimate issue. The SDK should be backward compatible. Thanks @geminixandroid @mitschabaude for bringing this up. I am working on a fix.

[zwu52]

Fix should be picked up in the next release. From the release history, the culprit exists for 7.7.0<=version<=7.13.1. If you hit the issue, please consider using a newer version.

[vandres]

@zwu52 I am experiencing the bug also with 7.13.1, is it really fixed in that release?

[zwu52]

Hi @vandres, my previous comment was not accurate. Thanks for catching. I have updated above. The fix will be picked up in the next release (scheduled 2020-04-02). Please refer to the release note for updates.

[vandres]

@zwu52 thanks for the heads up