home-assistant.github.io/docs/ecosystem/ios/notifications/content_extensions/index.html
2017-11-08 08:01:54 +00:00

411 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dynamic content - Home Assistant</title>
<meta name="author" content="Home Assistant">
<meta name="description" content="Extend your notifications with dynamic content">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/docs/ecosystem/ios/notifications/content_extensions/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Dynamic content">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/docs/ecosystem/ios/notifications/content_extensions/">
<meta property="og:type" content="article">
<meta property="og:description" content="Extend your notifications with dynamic content">
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Dynamic content">
<meta name="twitter:description" content="Extend your notifications with dynamic content">
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
<link href="/stylesheets/screen.css" media="screen, projection, print" rel="stylesheet">
<link href="/atom.xml" rel="alternate" title="Home Assistant" type="application/atom+xml">
<link rel='shortcut icon' href='/images/favicon.ico' />
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
</head>
<body >
<header class='site-header'>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
<a href="/" class="site-title">
<img width='40' src='/demo/favicon-192x192.png'>
<span>Home Assistant</span>
</a>
</div>
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<ul class="menu pull-right">
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/components/">Components</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/cookbook/">Examples</a></li>
<li><a href="/developers/">Developers</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
</ul>
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<i class="icon-search"></i>
<input id='search' placeholder='Search the docs…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="grid-wrapper">
<div class="grid grid-center">
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
<article class="page">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/_docs/ecosystem/ios/notifications/content_extensions.markdown'>Edit this page on GitHub</a></div>
<header>
<h1 class="title indent">
Dynamic content
</h1>
</header>
<hr class="divider">
<p>With the new Content Extension feature found in iOS 10, dynamic content can now be displayed as part of a notification without opening an app.</p>
<h1>Map</h1>
<p>Will show a map with a red tipped pin at the coordinates given.
The map will be centered at the coordinates given.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">service</span><span class="pi">:</span> <span class="s">notify.ios_&lt;your_device_id_here&gt;</span>
<span class="s">data</span><span class="pi">:</span>
<span class="s">message</span><span class="pi">:</span> <span class="s">Something happened at home!</span>
<span class="s">data</span><span class="pi">:</span>
<span class="s">push</span><span class="pi">:</span>
<span class="s">category</span><span class="pi">:</span> <span class="s">map</span>
<span class="s">action_data</span><span class="pi">:</span>
<span class="s">latitude</span><span class="pi">:</span> <span class="s2">"</span><span class="s">40.785091"</span>
<span class="s">longitude</span><span class="pi">:</span> <span class="s2">"</span><span class="s">-73.968285"</span>
</code></pre>
</div>
<h2>Showing a second pin</h2>
<p>You can use the following properties under <code class="highlighter-rouge">action_data</code> to display a second pin. If used, the first pin will be red and the second green.</p>
<ul>
<li><strong>second_latitude</strong>: The latitude of the second pin. <strong>Must be a string!</strong></li>
<li><strong>second_longitude</strong>: The longitude of the second pin. <strong>Must be a string!</strong></li>
<li><strong>shows_line_between_points</strong>: A Boolean value indicating whether a line should be drawn between the first and second pin.</li>
</ul>
<h2>Extra configuration</h2>
<p>You can also pass the following properties under <code class="highlighter-rouge">action_data</code> to modify the map in various ways. All are expected to be boolean values unless otherwise noted:</p>
<ul>
<li><strong>shows_compass</strong>: A Boolean indicating whether the map displays a compass control.</li>
<li><strong>shows_points_of_interest</strong>: A Boolean indicating whether the map displays point-of-interest information.</li>
<li><strong>shows_scale</strong>: A Boolean indicating whether the map shows scale information.</li>
<li><strong>shows_traffic</strong>: A Boolean value indicating whether the map displays traffic information.</li>
<li><strong>shows_user_location</strong>: A Boolean value indicating whether the map should try to display the users location.</li>
</ul>
<p class="img">
<img src="/images/ios/map.png" />
An example of the map dynamic content.
</p>
<h1>Camera Stream</h1>
<p>The notification thumbnail will be a still image from the camera.
The notification content is a real time MJPEG stream of a camera (assuming the camera supports it).</p>
<p>You can use the attachment parameters <code class="highlighter-rouge">content-type</code> and <code class="highlighter-rouge">hide-thumbnail</code> with camera to control the thumbnail.</p>
<p>You can view an example <a href="https://www.youtube.com/watch?v=LmYwpxPKW0g">here</a>.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">service</span><span class="pi">:</span> <span class="s">notify.ios_&lt;your_device_id_here&gt;</span>
<span class="s">data</span><span class="pi">:</span>
<span class="s">message</span><span class="pi">:</span> <span class="s">Motion detected in the Living Room</span>
<span class="s">data</span><span class="pi">:</span>
<span class="s">attachment</span><span class="pi">:</span>
<span class="s">content-type</span><span class="pi">:</span> <span class="s">jpeg</span>
<span class="s">push</span><span class="pi">:</span>
<span class="s">category</span><span class="pi">:</span> <span class="s">camera</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">camera.demo_camera</span>
</code></pre>
</div>
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LmYwpxPKW0g" frameborder="0" allowfullscreen=""></iframe>
</div>
<h1>Combining with actionable notifications</h1>
<p>As you can see the <code class="highlighter-rouge">category</code> key is used to tell the device what kind of content extension to use. You can use the same category identifiers in your own custom <a href="/ecosystem/ios/notifications/actions/">actions</a> to add actions to the content extension.</p>
<p>For example this configuration adds actions to a camera content message.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">ios</span><span class="pi">:</span>
<span class="s">push</span><span class="pi">:</span>
<span class="s">categories</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">name</span><span class="pi">:</span> <span class="s">Camera With Actions</span>
<span class="s">identifier</span><span class="pi">:</span> <span class="s1">'</span><span class="s">camera'</span>
<span class="s">actions</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">identifier</span><span class="pi">:</span> <span class="s1">'</span><span class="s">OPEN_COVER'</span>
<span class="s">title</span><span class="pi">:</span> <span class="s1">'</span><span class="s">Open</span><span class="nv"> </span><span class="s">Cover'</span>
<span class="s">activationMode</span><span class="pi">:</span> <span class="s1">'</span><span class="s">background'</span>
<span class="s">authenticationRequired</span><span class="pi">:</span> <span class="s">yes</span>
<span class="s">destructive</span><span class="pi">:</span> <span class="s">no</span>
<span class="pi">-</span> <span class="s">identifier</span><span class="pi">:</span> <span class="s1">'</span><span class="s">CLOSE_COVER'</span>
<span class="s">title</span><span class="pi">:</span> <span class="s1">'</span><span class="s">Close</span><span class="nv"> </span><span class="s">Cover'</span>
<span class="s">activationMode</span><span class="pi">:</span> <span class="s1">'</span><span class="s">background'</span>
<span class="s">authenticationRequired</span><span class="pi">:</span> <span class="s">yes</span>
<span class="s">destructive</span><span class="pi">:</span> <span class="s">yes</span>
</code></pre>
</div>
<h1>Troubleshooting</h1>
<p>If you are having problems with receiving these special notifications try restarting your phone first. The extensions somewhat often fail to register properly until a restart.</p>
</article>
</div>
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
<div class="grid">
<section class="aside-module grid__item one-whole lap-one-half">
<div class='section'>
<h1 class="title delta">Topics</h1>
<ul class='divided sidebar-menu'>
<li>
<b><a href='/faq/'>FAQ </a></b> |
<b><a href='/docs/glossary/'>Glossary </a></b>
</li>
<li>
<b><a href='/docs/installation/'>Installation </a></b>
<ul>
<li><a href='/hassio/'>Hass.io </a></li>
<li><a href='/docs/installation/virtualenv/'>Python Virtual Env </a></li>
<li><a href='/docs/installation/hassbian/'>Hassbian </a></li>
<!--<li><a href='/docs/installation/raspberry-pi-all-in-one/'>Raspberry Pi All-in-One </a></li>-->
<li><a href='/docs/installation/updating/'>Updating </a></li>
<li><a href='/docs/installation/troubleshooting/'>Troubleshooting </a></li>
</ul>
</li>
<li>
<b><a href='/docs/configuration/'>Configuration </a></b>
<ul>
<li><a href='/docs/configuration/yaml/'>YAML </a></li>
<li><a href='/docs/configuration/basic/'>Basic information </a></li>
<li><a href='/docs/configuration/devices/'>Setting up devices </a></li>
<li><a href='/docs/configuration/customizing-devices/'>Customizing entities </a></li>
<li><a href='/docs/configuration/troubleshooting/'>Troubleshooting </a></li>
<li><a href='/docs/configuration/securing/'>Security Check Points </a></li>
</ul>
</li>
<li>
<b>Advanced Configuration</b>
<ul>
<li><a href='/docs/configuration/remote/'>Remote access </a></li>
<li><a href='/docs/configuration/packages/'>Packages </a></li>
<li><a href='/docs/configuration/splitting_configuration/'>Splitting up the configuration </a></li>
<li><a href='/docs/configuration/secrets/'>Storing Secrets </a></li>
<li><a href='/docs/configuration/templating/'>Templating </a></li>
<li><a href='/docs/configuration/group_visibility/'>Group Visibility </a></li>
<li><a href='/docs/configuration/platform_options/'>Entity component platform options </a></li>
</ul>
</li>
<li>
<b>Core objects</b>
<ul>
<li><a href='/docs/configuration/events/'>Events </a></li>
<li><a href='/docs/configuration/state_object/'>State Objects </a></li>
</ul>
</li>
<li>
<b><a href='/docs/automation/'>Automation </a></b>
<ul>
<li><a href='/docs/automation/examples/'>Examples </a></li>
<li><a href='/docs/automation/editor/'>Editor </a></li>
<li><a href='/docs/automation/trigger/'>Triggers </a></li>
<li><a href='/docs/automation/condition/'>Conditions </a></li>
<li><a href='/docs/automation/action/'>Actions </a></li>
<li><a href='/docs/automation/templating/'>Templates </a></li>
</ul>
</li>
<li>
<b><a href='/docs/frontend/'>Frontend </a></b>
<ul>
<li><a href='/docs/frontend/mobile/'>Android/iOS Homescreen </a></li>
<li><a href='/docs/frontend/webserver/'>Web server fingerprint </a></li>
<li><a href='/docs/frontend/browsers/'>Browser Compatibility List </a></li>
</ul>
</li>
<li>
<b><a href='/docs/backend/'>Backend </a></b>
<ul>
<li><a href='/docs/backend/database/'>Database </a></li>
<li><a href='/docs/backend/updater/'>Updater </a></li>
<li><a href='/developers/api/'>API </a></li>
</ul>
</li>
<li>
<b><a href='/docs/scripts/'>Scripts </a></b>
<ul>
<li><a href='/docs/scripts/service-calls/'>Service Calls </a></li>
<li><a href='/docs/scripts/conditions/'>Conditions </a></li>
<li><a href='/docs/scripts/editor/'>Editor </a></li>
</ul>
</li>
<li>
<b><a href='/docs/tools/'>Tools and Helpers </a></b>
<ul>
<li><a href='/docs/tools/dev-tools/'>Developer Tools </a></li>
<li><a href='/docs/tools/hass/'>hass </a></li>
<li><a href='/docs/tools/scripts/'>Scripts </a></li>
</ul>
</li>
<li>
<b><a href='/docs/z-wave/'>Z-Wave </a></b>
<ul>
<li><a href='/docs/z-wave/installation/'>Configuring the Z-Wave component </a></li>
<li><a href='/docs/z-wave/adding/'>Adding devices </a></li>
<li><a href='/docs/z-wave/control-panel/'>The Z-Wave control panel </a></li>
<li><a href='/docs/z-wave/controllers/'>Controllers </a></li>
<li><a href='/docs/z-wave/devices/'>Devices </a> and <a href='/docs/z-wave/entities/'>Entities </a></li>
<li><a href='/docs/z-wave/query-stage/'>Query Stages </a> for devices</li>
<li><a href='/docs/z-wave/device-specific/'>Device Specific </a> configuration</li>
<li><a href='/docs/z-wave/events/'>Events </a> and <a href='/docs/z-wave/services/'>Services </a></li>
</ul>
</li>
<li>
<b><a href='/docs/mqtt/'>MQTT </a></b>
<ul>
<li><a href='/docs/mqtt/broker/'>Broker </a></li>
<li><a href='/docs/mqtt/certificate/'>Certificate </a></li>
<li><a href='/docs/mqtt/discovery/'>Discovery </a></li>
<li><a href='/docs/mqtt/service/'>Publish service </a></li>
<li><a href='/docs/mqtt/birth_will/'>Birth and last will messages </a></li>
<li><a href='/docs/mqtt/testing/'>Testing your setup </a></li>
<li><a href='/docs/mqtt/logging/'>Logging </a></li>
<li><a href='/docs/mqtt/processing_json/'>Processing JSON </a></li>
</ul>
</li>
<li>
<b><a href='/docs/ecosystem/ios/'>iOS </a></b>
<ul>
<li><a href='/docs/ecosystem/ios/notifications/basic/'>Basic notifications </a></li>
<ul>
<li><a href='/docs/ecosystem/ios/notifications/sounds/'>Sounds </a></li>
<li><a href='/docs/ecosystem/ios/notifications/architecture/'>Architecture </a></li>
<li><a href='/docs/ecosystem/ios/notifications/privacy_security_rate_limits/'>Privacy, rate limiting and security </a></li>
</ul>
<li>Advanced notifications</li>
<ul>
<li><a href='/docs/ecosystem/ios/notifications/attachments/'>Attachments </a></li>
<li><a class='active' href='/docs/ecosystem/ios/notifications/content_extensions/'>Dynamic content </a></li>
<li><a href='/docs/ecosystem/ios/notifications/actions/'>Actionable notifications </a></li>
<li><a href='/docs/ecosystem/ios/notifications/requesting_location_updates/'>Requesting location updates </a></li>
</ul>
<li><a href='/docs/ecosystem/ios/location/'>Location Tracking </a></li>
<li><a href='/docs/ecosystem/ios/integration/'>Integration with other apps </a></li>
</ul>
</li>
<li>
<a href='/docs/ecosystem/'>Ecosystem </a>
<ul>
<li>
<a href='/docs/autostart/'>Autostart </a>
<ul>
<li><a href='/docs/autostart/systemd/'>systemd (Linux) </a></li>
<li><a href='/docs/autostart/upstart/'>Upstart (Linux) </a></li>
<li><a href='/docs/autostart/init.d/'>init.d (Linux) </a></li>
<li><a href='/docs/autostart/macos/'>macOS </a></li>
<li><a href='/docs/autostart/synology/'>Synology NAS </a></li>
</ul>
</li>
<li>
<a href='/docs/ecosystem/appdaemon/'>AppDaemon </a>
</li>
<li>
<a href='/docs/ecosystem/hadashboard/'>HADashboard </a>
</li>
<li>
<a href='/docs/ecosystem/notebooks/'>Notebooks </a>
<ul>
<li><a href='/docs/ecosystem/notebooks/'>Introduction </a></li>
<li><a href='/docs/ecosystem/notebooks/installation/'>Installation </a></li>
<li><a href='/docs/ecosystem/notebooks/graph/'>Graph </a></li>
<li><a href='/docs/ecosystem/notebooks/api/'>Home Assistant API </a></li>
<li><a href='/docs/ecosystem/notebooks/database/'>Database </a></li>
<li><a href='/docs/ecosystem/notebooks/stats/'>Statistics </a></li>
</ul>
</li>
<li>
Remote access
<ul>
<li><a href='/docs/ecosystem/apache/'>Apache </a></li>
<li><a href='/docs/ecosystem/caddy/'>Caddy Server </a></li>
<li><a href='/docs/ecosystem/nginx/'>NGINX </a></li>
<li><a href='/docs/ecosystem/nginx_subdomain/'>NGINX with subdomain</a></li>
<li><a href='/docs/ecosystem/tor/'>Tor Onion Service </a></li>
</ul>
</li>
<li>
<a href='/docs/ecosystem/certificates/'>Certificates </a>
<ul>
<li><a href='/docs/ecosystem/certificates/tls_self_signed_certificate/'>Self-signed certificate </a></li>
<li><a href='/docs/ecosystem/certificates/tls_domain_certificate/'>Certificate domain owners </a></li>
<li><a href='/docs/ecosystem/certificates/lets_encrypt/'>Let's Encrypt (detailed) </a></li>
</ul>
</li>
<li>
Backup
<ul>
<li><a href='/docs/ecosystem/backup/backup_github/'>Backup to GitHub </a></li>
<li><a href='/docs/ecosystem/backup/backup_dropbox/'>Backup to Dropbox </a></li>
<li><a href='/docs/ecosystem/backup/backup_usb/'>Backup to USB device </a></li>
</ul>
</li>
<li><a href='/docs/ecosystem/scenegen/'>scenegen </a></li>
<li><a href='/docs/ecosystem/synology/'>Synology </a></li>
<li><a href='/docs/ecosystem/hass-configurator/'>HASS Configurator </a></li>
</ul>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<div class="copyright">
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
<div class="credit">
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a> (no support!).<br>
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
</div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">home-assistant.io</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</div>
</div>
</div>
</footer>
<script>
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
indexName: 'home-assistant',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});
document.querySelector('.search .close').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'none';
});
document.querySelector('.show-search').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'block';
document.getElementById('toggle').checked = false;
document.querySelector('.search-container input').focus();
});
</script>
</body>
</html>