Html5 push notifications with image

Configuration
42

Yes yes is anabled and in the browser I see the image.

43

This work for me

{
  "data": {
    "image": "https://domain.com/api/camera_proxy/camera.south_gate",
    "renotify": 1,
    "tag": "alert",
    "timestamp": "%m",
    "url": "https://domain.com/states/group.camera",
    "vibrate": "700, 700, 700"
  },
  "message": "{{ as_timestamp(now()) | timestamp_custom('%H:%M', true) }}",
  "title": "Pool Motion"
}
44

Yes, this works also for me… But how can I add a action button??

45

Like this

action:
  - data:
      data:
        actions:
        - action: Open_Entry_Gate
          title: Open Gate
        - action: Dismiss
          title: Dismiss

Sorry about the poor formatting but this came from autoconfig file created by automation UI in HA and I do not want to muck around with spacing and provide something that hasnt been verified functional

To make button you need (x2) automation.

AUTOMATION 1
generates the notification and includes the buttons

AUTOMATION 2
receives the button response from HTML5 message and does the action you set

---------Below are code examples of each-------------

AUTOMATION 1 EXAMPLE
When Ring Doorbell Motion is sensed, a message is sent that has buttons [Open Gate] and [Dismiss] with some text and an image
action>>data>>data>>actions>>action defines the button

- id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  alias: NOTIFY_GateMotion
  trigger:
  - entity_id: binary_sensor.ring_entry_gate_ding
    from: 'off'
    platform: state
    to: 'on'
  - entity_id: binary_sensor.ring_entry_gate_motion
    from: 'off'
    platform: state
    to: 'on'
  action:
  - data:
      data:
        actions:
        - action: Open_Entry_Gate
          title: Open Gate
        - action: Dismiss
          title: Dismiss
        image: https://mysite.com/api/camera_proxy/camera.front_door
        renotify: 1
        tag: alert
        timestamp: '%m'
        url: https://mysite.com/states/group.garage
        vibrate: 700, 700, 700
      message: '{{ as_timestamp(now()) | timestamp_custom(''%H:%M'', true) }}'
      title: Entry Gate Motion
    service: notify.notify

AUTOMATION 2 EXAMPLE
When “Open Gate” pressed in Automation 1 notification, HA receive some listener reply and perform an action. It knows the action to perform based on the “action” specified in both automations. In this case the action will Turn ON entry gate (open gate)
trigger>>event_data>>action identifies the listener and should match action for automation 1 button

- id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  alias: NOTIFY_Html5NotificationClicked
  trigger:
  - event_data:
      action: Open_Entry_Gate
    event_type: html5_notification.clicked
    platform: event
  action:
  - entity_id: switch.entry_gate
    service: switch.turn_on
3 Likes
46

How do I feed the user credentials to access API, so that I can get camera images?

48

My image was cropped like @deviant experienced way back in 2018.
I fixed this now by giving the notification the url under data to be send to the entity_picture when you click the notification.
When someone rings my doorbell I have an automation with the following action:
Sending html5 notification with: message, picture of cam1 (cropped), 2 buttons to open the door and when you click the notification it opens the full image.

   action:
   - service: notify.html5notify
     data:
       message: "Ding Dong, deurbel ingedrukt"
       data:
            actions:
              - action: open_door_5s
                title: Deur open 5s
              - action: open_door_10s
                title: Deur open 10s
            image: https://yourthing.duckdns.org/api/camera_proxy/camera.cam1?token=[use your own access token here]
            url: https://yourthing.duckdns.org/api/camera_proxy/camera.cam1?token=[use your own access token here]