Just a few notes/caveats:
- I've learned a lot since I wrote this, and lots of things could probably be better. I'd probably use a Mutation Observer to watch for new notifications, or tie it in with CableReady events. Lots of fun paths open to us now.
consumercomes from/through your Stimulus application.
- You definitely should swap out the jQuery etc with something good like
- line 9 means that you can access the internal state of the controller via the DOM element
- Like your solution, it's designed to build on the Flash concept. And as I mentioned, it removes things from the DOM to make Turbolinks caching work well.
document.hiddenis the "is this tab visible" magic.
- It will attempt to send a native notification, apparently! It's been a long time since I worked on this. I would use CableReady's
notificationoperation instead at this point.
- The idea is that you put this controller on your body and the partial is included anywhere -
d-noneis a Bootstrap class to m
Here are the Turbolinks events which fire when you do things.
first visit: load
click: click before-visit request-start visit request-end before-cache before-render render load
back: visit before-cache before-render render load
cached: click before-visit request-start visit before-cache before-render render request-end before-render render load
With apologies for the half-baked solution presented, this is the interesting parts of a polymorphic comment engine that makes use of Stimulus, StimulusReflex and CableReady.
application.consumer = consumer
This was written in the pre-morphs era, so I've done my best to fill in the blanks on what I'd do today in the Reflex.
Not shown: any view templates. Basic idea:
This controller can be put on body or any other element.
- Adds a websocket accessor to the element
- Controller exposes a
- Controller bails with a warning if no shared consumer is available
- Element will have
data-action-cable-disconnectedattributes which can be used for CSS selectors
- Element will emit
action-cable:disconnectedevents only when state is flipping
- Errors => Disconnected to keep things simple
I intend to document the
navigator.onLine accessor and the
window:online/offline events so devs can handle PWA modes.