VuePWA / Web Push：我的服务人员不要求用户授予权限

Question

我完成了 Google Introduction to Push notification 代码实验室，现在我想调整我的 VueJS PWA 以使用推送通知！

我必须使用 WorkBox，因为我使用 VueJS PWA，我唯一的问题是服务工作者从不要求用户授予通知权限。

这是 sw.js 的代码：

/**
 * This helper handles the notification subscriptions and unsubscriptions
 */

import Subscription from "@/api/Subscription";

// Internal helper function to convert a BASE64 encoded string to UINT8
function urlBase64ToUint8Array(base64String) {
  console.log("base64");
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");

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

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

  return outputArray;
}

function askBrowserPermission() {
  console.log("ask");
  return new Promise(function (resolve, reject) {
    if ("Notification" in window) {
      const permissionResult = Notification.requestPermission(function (result) {
        resolve(result);
      });

      if (permissionResult) {
        permissionResult.then(resolve, reject);
      }
    } else {
      throw new Error("This browser does not support push notifications");
    }
  });
}

// Create a subscription and store it on the server
function createSubscription(registration) {
  console.log("createSub");
  const applicationServerKey = urlBase64ToUint8Array(
      process.env.VUE_APP_PUBLIC_VAPID_KEY_BASE64
  );
  const options = {
    applicationServerKey,
    userVisibleOnly: true,
  };
  registration.pushManager.subscribe(options).then((newSubscription) => {
    // SEND TO THE SERVER THE REQUEST
    Subscription.post(newSubscription).catch(error => {
      unsubscribeUser()
      console.error(error)
    });
  });
}

export function subscribeUser() {
  console.log("subUser");
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.ready
        .then(function (registration) {
          askBrowserPermission()
              .then((result) => {
                if (result === "granted") {
                  // Check if user has already subscription or not
                  registration.pushManager.getSubscription().then((sub) => {
                    if (sub === null) {
                      createSubscription(registration);
                    }
                  });
                } else {
                  // Notify user that his preference setting does not correspond to this decision
                  // Option to change preference
                }
              })
              .catch((error) => {
                console.error(error);
              });
        })
        .catch(function (err) {
          console.error("Service Worker registration failed: ", err);
        });
  }
}

export function unsubscribeUser() {
  console.log("unsubuser");
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.ready
        .then(function (registration) {
          registration.pushManager.getSubscription().then((sub) => {
            if (sub !== null) {
              sub.unsubscribe().then((result) => {
                if (!result) {
                  console.error("Encountered a problem unsubscribing the user");
                }
              });
            } else {
              // Nothing to do no subscription was found
            }
          });
        })
        .catch(function (err) {
          console.error("Service Worker registration failed: ", err);
        });
  }
}

我知道它正在工作并已注册，因为我在控制台中看到它并且在控制台中收到推送：

但是不知道为什么不要求权限...

有人可以帮助我吗？

Answer 1

感谢@lissy93 的帮助，但我设法通过将以下代码添加到我的 chatbot.vue 来修复它：

import { subscribeUser } from "../helpers/subscriptionHandler";

...
  mounted() {
    subscribeUser();
  },

VuePWA / Web Push：我的服务人员不要求用户授予权限

VuePWA / Web Push: My service-worker doesn't ask the user to give permission

javascript

push-notification

vue.js

web-push