Using state-switch from HACS and app notifications to get better actionable notifications on IOS

Share your Projects! Dashboards & Frontend
, , , ,
1

Better Actionable Notifications for IOS

I've always found the actionable notifications on IOS annoying, since as of now you can only see their "actions" by holding on the notification. This is a bit too cumbersome for me, and unintuitive for my girlfriend.

Recently I landed on a project called Lovelace-State-Switch on HACS. The focus of this project for me was the hash setting. Now I have a single hidden lovelace page that holds my notification pages, and only show the correct one if a certain link is followed.

  1. To start you of course need to have HACS Installed, then search for and install state-switch.
    Don’t forget to reload lovelace.

    • If you don’t like to use HACS the creator has a well made guide on manual installation of Lovelace plugins here: https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

    Make sure to read through the Plugin’s page, I’m not going in-depth on how to use all of it’s features.

  2. With the plugin installed, create a new view. Name it something related, give it a URL, and make sure to turn off visibility for all users. You don’t have to use Panel view type, but I found it easier.

  3. I’ll provide my Card Configuration and some Photos of their pages here for reference.
    The pages are mostly markdown, but the last one manualunlock uses a vertical stack to add some entities underneath that might be useful to control.

Example Configuration I have a "Dismiss" button on each page, that simply takes them to the default view. I also made sure to mirror the details of the notifications in case a user opens one without reading. 
type: custom:state-switch
entity: hash
default: test
states:
  test:
    type: markdown
    content: |
      # TEST PAGE
      If this page opens, something went wrong!
      # [Dismiss](/lovelace/home)
      [washer](/lovelace/Notify#washer)
      [dooropen](/lovelace/Notify#dooropen)
      [manualunlock](/lovelace/Notify#manualunlock)
  washer:
    type: markdown
    content: |
      # Washing Maching Cycle Is Finished
      # [Dismiss](/lovelace/home)
  dooropen:
    type: markdown
    content: |
      # Smart Lock
      Door has been left open at least 10 seconds
      # [Dismiss](/lovelace/home)
  manualunlock:
    type: vertical-stack
    cards:
      - type: markdown
        content: |
          # Smart Lock 
          The front door has been manually unlocked.
          # [Dismiss](/lovelace/home)
      - type: entities
        entities:
          - entity: lock.smart_lock
          - entity: input_select.auto_lock_delay

Photos

  1. All thats left is to make a notification that points to the page. Since I use node-red, I installed a custom subflow created by sstratoti that made it easier. https://github.com/sstratoti/actionable-notifications-subflow-for-ios

    • You can also use this blueprint: https://community.home-assistant.io/t/ios-notifications-actions-attachments-customizable-blueprint/422673 made by user Hypercooke if you like to use the built-in automation system instead.

    Just make sure Notification URL option is set for each notification. The manualunlock notification url for mine is /lovelace/Notify#manualunlock

That’s it! Now when a notification is sent through the app and is opened, they should be brought to your hidden notification page.

Since I’m a new user I’m unable to post many links or photos, but I hope the way I got around is ok.

2 Likes