Great episode, but while playing with the repo, I get an error in the browser console within Safari 16.3 on MacOS 13.2.1 and the notification does not work:
Notification prompting can only be done from a user gesture.
In other browsers (tested with Edge) there is just a warning, and the notification is displayed.
The error comes from startServiceWorker on the next visit after the notification was allowed. I changed the method (by removing the call of requestNotificationPermission()) to this and now it works fine:
hmm - when I introduce the vapid_public_key like in the shared example - I get this error in my Chrome ( Version 111.0.5563.64 (Officiel version) (arm64)) DevTools
Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not encoded as base64url without padding.
Comparing the key from the credentials with the one assigned to vapidPublicKey I find them to be matching 100%
Perhaps you might have a peek at https://blog.atulr.com/web-notifications/ - there's a function labeled
That's strange. I just reimplemented the push notifications from this episode on a few of my hobby apps and didn't run into that issue (even when generating new keys).
1 bundle add web-push 2 rails c vapid_key = .... 3 EDITOR=code --wait rails credentials:edit (c/p-ing the keys from the rails console) 4 add <head> meta 5 update the service_worker.js to getAttribute("content")
(and I don't believe my Chrome being perhaps 1-2 patch releases behind master is the deal-breaker)
on a slightly different note - yet very much focused with this PushNotification thing - I'm now seeing this in my log (and I'd hate to deploy this knowing that 1-200 users will soon start generating double GET's almost every second?!?
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:37 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 4ms (Views: 0.4ms | ActiveRecord: 0.9ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:37 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 4ms (Views: 0.3ms | ActiveRecord: 1.4ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:38 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 4ms (Views: 0.4ms | ActiveRecord: 1.3ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:38 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 3ms (Views: 0.3ms | ActiveRecord: 0.8ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:50 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 5ms (Views: 0.5ms | ActiveRecord: 2.1ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:50 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 3ms (Views: 0.2ms | ActiveRecord: 1.1ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:51 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 4ms (Views: 0.4ms | ActiveRecord: 0.9ms | Allocations: 2283)
Started GET "/manifest.json" for 127.0.0.1 at 2023-03-30 20:36:51 +0200
Processing by ServiceWorkers::ManifestsController#index as JSON
Rendering service_workers/manifests/index.json.erb
Rendered service_workers/manifests/index.json.erb (Duration: 0.0ms | Allocations: 7)
Completed 200 OK in 3ms (Views: 0.3ms | ActiveRecord: 1.1ms | Allocations: 2283)
I wonder if you have another view/partial that is rendering the full template (therefore making another request back to the Rails app for the manifest).
Hi, I ran into the same issue with "Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not encoded as base64url without padding." as walther. Is there some conclusion, how to fix it? Thx
In other browsers (tested with Edge) there is just a warning, and the notification is displayed.
async function startServiceWorker() { const vapidPublicKey = document.head .querySelector('meta[name="vapid_public_key"]') .getAttribute('content'); await registerServiceWorker(); const subscription = await getPushSubscription(vapidPublicKey); if (!subscription) return; await sendSubscriptionToServer(subscription); }Comparing the key from the credentials with the one assigned to vapidPublicKey I find them to be matching 100%
Perhaps you might have a peek at https://blog.atulr.com/web-notifications/ - there's a function labeled
1 bundle add web-push
2 rails c vapid_key = ....
3 EDITOR=code --wait rails credentials:edit (c/p-ing the keys from the rails console)
4 add <head> meta
5 update the service_worker.js to getAttribute("content")
(and I don't believe my Chrome being perhaps 1-2 patch releases behind master is the deal-breaker)
And my app head looks like
<head> <title>App</title> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#8e2731"> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= tag :meta, name: :vapid_public_key, content: Rails.application.credentials.vapid.public_key %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> </head>