Improve Web Push notification UX (icon, length, SW debug visibility)#112
Merged
HamptonMakes merged 2 commits intoMay 13, 2026
Conversation
Wraps the per-device list in a turbo-frame and reloads it from the Stimulus controller after subscribe/unsubscribe succeeds, so the new browser appears (or disappears) without a full page refresh. Changes - Extracts the device list into _devices.html.erb wrapped in a <turbo-frame id=web-push-devices>. - Adds GET /web_push/devices that renders just that partial back into the same frame. - web_push_settings_controller.js: new devicesUrl Stimulus value; after enable/disable success, sets the frame's src to refetch. Generated with Amp
Three small fixes shaken out by end-to-end testing: 1. Service worker now shows the CoPlan logo as the notification icon instead of falling back to the browser's app chrome (Chrome's puzzle piece in the test). The icon URL is templated into the SW body at request time so it always points at the current digested asset. 2. SW push handler no longer silently bails when event.data is empty — it shows a fallback notification. This makes the DevTools Application → Service Workers → Push button useful for verifying the handler is wired up without needing to send a real push. Also adds a console log on every push and a .catch on showNotification so future failures surface immediately instead of disappearing. 3. PayloadForNotification body truncation 140 → 90 chars. Chrome / macOS show roughly 80–100 chars before they truncate further; setting it lower means we control where the cut happens (and add an ellipsis on a word boundary) instead of ending mid-word with no visual hint. Generated with Amp
Base automatically changed from
05-13-auto-refresh_device_list_on_settings_after_enable_disable
to
main
May 13, 2026 18:20
HamptonMakes
deleted the
05-13-improve_web_push_notification_ux_icon_length_sw_debug_visibility_
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacks on #111. Three small fixes shaken out by end-to-end testing the Web Push delivery path locally.
1. CoPlan icon on notifications
The SW used to omit
iconso Chrome rendered its own app chrome (the puzzle-piece icon) on incoming notifications. Now the SW always setsiconandbadgeto the engine's CoPlan logo asset. The URL is templated into the SW body at request time (__COPLAN_NOTIFICATION_ICON__token in the .js file →view_context.asset_path("coplan/coplan-logo-sm.png")in the controller), so it always picks up the current digested asset path.2. SW push handler no longer silently bails
The DevTools Application → Service Workers → Push button sends a push with no payload. The previous handler did
if (!event.data) return, which meant that test button just did nothing — useless for debugging. Now the handler:showNotificationfailures and logs them instead of letting them disappear3. Body truncation 140 → 90 chars
Chrome / macOS show roughly 80–100 chars of body before they truncate further with their own ellipsis. Setting
BODY_TRUNCATEto 90 means we control where the cut happens (with a word-boundary ellipsis) instead of letting the OS chop mid-word with no visual hint.Verification
service_workers_spec.rbandpayload_for_notification_spec.rbstill green.curl -s http://localhost:3000/coplan_service_worker.js | grep iconshows the digested asset URL.Generated with Amp