HTML5 Push Notifications Data_Template Images

Configuration
1

I am trying to set up an html5 push notification to send me a snapshot image when motion is detected. The following code works:

- id: '1541260759136'
  alias: Camera Motion
  trigger:
  - above: '1.0'
    entity_id: sensor.front_yard_camera_motion
    platform: numeric_state
  condition: []
  action:
  - data:
      entity_id: camera.front_yard_camera
      filename: /config/www/tmp/snapshot.jpg
    service: camera.snapshot
  - delay: 00:00:05
  - data:
      data:
        image: https://mysite.duckdns.org/local/tmp/snapshot.jpg
      message: Front yard camera motion is {{states.sensor.front_yard_camera_motion.state}}.
    service: notify.html5_christophersmotog5

BUT, my phone is caching the image, and I receive the same image every time.
I’ve found out that if the phone receives “https://mysite.duckdns.org/local/tmp/snapshot.jpg?(random number)” it will pull the correct file, not the cached version.

So, I think the code should read:

- id: '1541260759136'
  alias: Camera Motion
  trigger:
  - above: '1.0'
    entity_id: sensor.front_yard_camera_motion
    platform: numeric_state
  condition: []
  action:
  - data:
      entity_id: camera.front_yard_camera
      filename: /config/www/tmp/snapshot.jpg
    service: camera.snapshot
  - delay: 00:00:05
  - data:
      data_template:
        image: "https://mysite.duckdns.org/local/tmp/snapshot.jpg?{{now().minute}}"
      message: Front yard camera motion is {{states.sensor.front_yard_camera_motion.state}}.
    service: notify.html5_christophersmotog5

but, it fails to run at all. Home assistant recognizes it as a valid configuration, and I see no errors in the log, but, I don’t get any notifications.

Is someone able to help me understand what I’m doing wrong, and/or provide another option to do what I’d like. I am not a programmer. I run Hass.io in a docker on a virtual machine.

Thank-you

2

I suspect the problem is you’re saving the snapshot using one filename, but then calling the notify service with a different filename. I’d try adding a first action step that saves the random filename to an input_text, then use that in both of the other action steps. Something like:

  action:
  - service: input_text.set_value
    entity_id: input_text.img_fname
    data_template:
      value: "snapshot.jpg?{{range(100)|random}}"
  - data_template:
      entity_id: camera.front_yard_camera
      filename: "/config/www/tmp/{{states('input_text.img_fname')}}"
    service: camera.snapshot
  - delay: 00:00:05
  - data:
      data_template:
        image: "https://mysite.duckdns.org/local/tmp/{{states('input_text.img_fname')}}"
      message: Front yard camera motion is {{states.sensor.front_yard_camera_motion.state}}.
    service: notify.html5_christophersmotog5

Actually, though, using a random number (either way) I think can still potentially cause two consecutive invocations to use the same filename, resulting in the original problem. Rather than a random number, I’d suggest using a Counter, and increment it each time in the first step, then use that (instead of the input_text.) That way each time the filename would be different. And I think you could reset the counter when it gets to 2, so the filenames would just have suffixes of 0 and 1. That would probably be enough to get the browser to re-read the file.

3

So for anyone else stumbling across this, to prevent your phone’s browser from using a cached image in the HTML5 push notifications you can put ?{{now().second}} or a random number or similar at the end of your image URL and it will appear as a new image to your browser for subsequent notifications. But you must ensure you change data to data_template in the correct spot. See my working script example below:

sequence:
  - service: camera.snapshot
    data:
      entity_id: camera.front_door_hallway
      filename: '/config/www/alerts/front_door_hallway_alert.jpg'
  - service: notify.chrome                   
    data_template:
      title: "Home Security"
      message: "Motion downstairs"
      target: nameofdevice                   
      data:
        image: 'https://yourEXTERNALurl.com/local/alerts/front_door_hallway_alert.jpg?{{now().second}}'
2 Likes
4

Hey man, where exactly do I use this code, under automation? Or under scripts? Still new to the push notifications and would love to receive a picture of my camera on motion detected.

5

I’d say @jdbrookes code is intended to be used as a script as it starts with sequence.

I should be fairly straight forward to use in an automation though by removing the sequence key and adding all the code below the action key in your automation.

6

thnx a lot, was strugling with this too

7

hmm, althoug, i tink the seconds is not enought, so you have like 60 possibilities for your cache verson

maybe need to use like : {{ now().year + now().month + now().day + now().hour + now().minute + now().day + now().second }}

thats more unique :slight_smile:

8

thnx for that random number trick, but what happens after 60 times , when you had all 60 seconds combinations? will it download an older image then?

9

I suppose it could happen, but I never experienced it. Possibly chrome itself was refreshing the cache on a regular basis anyway, and with most of these notifications I might only get one or two a day.

Since then I’ve also moved over to Telegram notifications which don’t have caching issues. Html5 notifications started out great but then Google made some changes and they became slow and unreliable.

10

Indeed, I have changed also, using Google Hangouts now

11

@jdbrookes

i know you are not using chrome/html5 anymore, but i want to give it one more chance, seems they have added also priority now, but i am stll struggling with my cache issue

below is my code, i am sending my nabucasa url, the snapshot_buiten.jpg is always a new image, no issue there, but indeed , when you dont add like example ?50 aftet the http:// string, it loads always the same image

so indeed adding this to the end of the string, when testing in browser, i works {{ now().second }}

but when i do the automation, i doesnt send a unique seconds number, i see that when i also add the “url” parameter, so you can actually click on the link, and it points me to :

https://xxx.ui.nabu.casa/local/images/snapshot_buiten.jpg?{{%20now().second%20}}
and not like:
https://xxx.ui.nabu.casa/local/images/snapshot_buiten.jpg?50

tried the url in singel quote, double quote, no quote, its always the same
so how did you passthrough that seconds jinja?


  - service: notify.html5
    data:
      message: "Alarm uitgezet!"
      title: "Risco Alarm"
      target:       
        - !secret notify_html5_1
        - !secret notify_html5_2      
      data:
        tag: alert
        image: 'https://xxx.ui.nabu.casa/local/images/snapshot_buiten.jpg?{{ now().second }}'
        url: 'https://xxxxx.ui.nabu.casa/local/images/snapshot_buiten.jpg?{{ now().second }}'
        vibrate: 
          - 300
          - 100
          - 400
        renotify: 1 
        ttl: 86400
        priority: high
12

I’m on mobile so I can’t post an example, but you need to have data_template (as per my original example, right under the service) rather than just data. That should hopefully do it

13

Yes indeed, changed to date_template, and then it works :wink:

HTML5 fully functional for chrome (laptop)
For my Android, using now pushover, works verry good… instant, no message lost