JavaScript function 执行 consol.log(var) 但不执行 var2 = var

Question

I follow this tutorial: https://developers.google.com/web/fundamentals/codelabs/push-notifications#notification_click and implemented it to VueJS.

On the created hook, I run this function:

register() {
      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";
      }
    }

My console in Chrome, Safari and Firefox prints:

"Service Worker and Push is supported"
"Service Worker is registered >ServiceWorkerRegistration"
"Service Worker Error ReferenceError: swRegistration is not defined"

Does anybody know why swReg could be logged, but swRegistration not be assigned?

.then(function (swReg) {
                console.log("Service Worker is registered", swReg);
                swRegistration = swReg;

Answer 1

Maybe because swRegistration is not defined? Try to add let swRegistration at the top of your snippet, and everything will be ok. Enjoy.

Answer 2

You should declare the swRegistration first, you don't face same issue with swReg because its the result of register promise.

register() {
      let swRegistration = null;
      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";
      }
    }