<template class="task-template">
  <section id="protocol-section" class="section js-section u-category-system">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-system"></use></svg>
          Protocol Handler
        </h1>
        <h3>The <code>app</code> module provides methods for handling protocols.</h3>
        <p>These methods allow you to set and unset the protocols your app should be the default app for. Similar to when a browser asks to be your default for viewing web pages.</p>

        <p>Open the <a href="http://electron.atom.io/docs/api/app">full app API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="copy-to-demo-toggle" class="js-container-target demo-toggle-button">Launch app from URL in another app
          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X <span class="demo-meta-divider">|</span> Process: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="protocol-handler">View Demo</button>
          </div>
          <p>You can set your app as the default app to open for a specific protocol. For instance, in this demo we set this app as the default for <code>electron-api-demos://</code>. The demo button above will launch a page in your default browser with a link. Click that link and it will re-launch this app.</p>
          <h5>Packaging</h5>
          <p>This feature will only work on OS X when your app is packaged. It will not work when you're launching it in development from the command-line. When you package your app you'll need to make sure the OS X <code>plist</code> for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this app is below.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/system/protocol-handler.js"></pre></code>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/system/protocol-handler.js"></pre></code>
          <h5>OS X plist</h5>
          <pre><code class="language-xml" data-path="assets/mac/info.plist"></pre></code>
        </div>
      </div>
    </div>


    <script type="text/javascript">
      require('./renderer-process/system/protocol-handler')
    </script>

  </section>
</template>