Jonathan Bennett

Introducing noticed-web_push

Update: Sherlocked

I’m happy to announce that this gem is likely dead. A lot of PWA stuff is going to be build into Rails 8 so the core of this will go away. There will likely be a noticed delivery method that will just use the build in stuff. I’m looking to update this gem to give us something very close to the Rails 8 default, but install-able today. I’ll keep you posted.

WebPush and PWAs are going to be supported well in Rails 8, but I wanted that today…hence noticed-web_push.

This is a small gem that gives you four things:

  1. Drop in support for service workers.
  2. Easily add the needed manifest files for supporting PWAs.
  3. Sample JS for doing push notifications
  4. WebPush delivery method for noticed

Service Workers

For security reasons, service workers need to be served from the domain root, not a subfolder like /assets/. This engine adds a tiny shim to serve your normal service_worker.js entry point from the root. With that quickly resolved, you can simply do all the normal javascript stuff you always do.

PWA Support

A few helper methods are available to help setup the application’s manifest file. This is easily overridden using the normal view overrides.

Sample Notification Javascript

Some drop in sample code is provided to easily request push notifications, register the service worker and push permissions to the server.

These are very basic, and intended to just get you started quickly.

Noticed Delivery Method

The new noticed delivery method makes creating a push notification as complicated as a three element hash. If you are already using noticed, it should work exactly like any other delivery method:

class NewPostNotification < Noticed::Base
	# ... other deliver methods
	deliver_by :web_push, data_method: :web_push_data

	def web_push_data
			title: "New post: #{post.title}",
			body: post.content.truncate(40),
			url: post_url(post),

Key Overrides

Make sure you check the following files out, and make any customizations you need:

  • /app/views/noticed/web_push/pwa/app.manifest.erb
  • /app/javascript/service_worker.js