web 推送 serviceworker 未定义的方法错误？

Question

每次我尝试启动我的服务器时，我都会收到此错误...

undefined method `post' for main:Object (NoMethodError)

application.rb

post "/push" do
    Webpush.payload_send(
      endpoint: "https://fcm.googleapis.com/gcm/send/eah7hak....",
      message: "A message",
      p256dh: "BO/aG9nYXNkZmFkc2ZmZHNmYWRzZmFl...",
      auth: "aW1hcmthcmFpa3V6ZQ==",
      vapid: {
        subject: "mailto:sender@example.com",
        public_key: ENV['VAPID_PUBLIC_KEY'],
        private_key: ENV['VAPID_PRIVATE_KEY']
      }
    )
end

我是不是把代码块放在了错误的位置？我假设 app.rb 与 application.rb

相同

屏幕截图来自 git 教程：https://github.com/zaru/webpush。

我正在尝试使用 VAPID 和 gems 实现浏览器通知 webpush & serviceworker-rails。

application.js

// Register the serviceWorker script at /serviceworker.js from our server if supported
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/serviceworker.js')
  .then(function(reg) {
    console.log('Service worker change, registered the service worker');
  });
}
// Otherwise, no push notifications :(
else {
  console.error('Service worker is not supported in this browser');
}

// When serviceWorker is supported, installed, and activated,
// subscribe the pushManager property with the vapidPublicKey
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  serviceWorkerRegistration.pushManager
  .subscribe({
    userVisibleOnly: true,
    applicationServerKey: window.vapidPublicKey
  });
});

$('.webpush-button').on('click', (e) => {
  navigator.serviceWorker.ready
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.getSubscription()
    .then((subscription) => {
      $.post('/push', {
        subscription: subscription.toJSON(),
        message: 'You clicked a button!'
      });
    });
  });
});

// Let's check if the browser supports notifications
if (!("Notification" in window)) {
  console.error("This browser does not support desktop notification");
}

// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
  console.log("Permission to receive notifications has been granted");
}

// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
  Notification.requestPermission(function (permission) {
  // If the user accepts, let's create a notification
    if (permission === "granted") {
      console.log("Permission to receive notifications has been granted");
    }
  });
}

Answer 1

将其添加到控制器中的简单示例。

首先，使用动作名称创建控制器（我将使用 push，以效仿您的示例）：

$ rails g controller Test push

这将创建一个测试控制器并更新您的路线：

# app/controllers/test_controller.rb

class TestController < ApplicationController
  def push
  end
end

# config/routes.rb

get 'test/push'

下次使用您要添加的代码更新控制器：

class TestController < ApplicationController
  def push
    Webpush.payload_send(
      message: params[:message],
      endpoint: params[:subscription][:endpoint],
      p256dh: params[:subscription][:keys][:p256dh],
      auth: params[:subscription][:keys][:auth],
      vapid: {
        subject: "mailto:sender@example.com",
        public_key: ENV['VAPID_PUBLIC_KEY'],
        private_key: ENV['VAPID_PRIVATE_KEY']
      }
    )
  end
end

并更新您的路线以使用 post 而不是 get:

post 'test/push'

有了它，您将有一个 POST yoursite/test/push 端点可用（就像 app.rb 的示例）。

web 推送 serviceworker 未定义的方法错误？

web push serviceworker undefined method error?

ruby

jquery

ruby-on-rails

web-push