<commit_before><!DOCTYPE html>
<html>
  <head>
    <title>
      navigator.connect API
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove'>
</script>
    <script class="remove">
// (this is to make tidy happy)
      // See http://www.w3.org/respec/ for ReSpec documentation.
      var respecConfig = {
          specStatus: "unofficial",
          shortName: "navigator-connect-api",
          editors: [
            {
              name: "<NAME>",
              company: "Google",
              companyURL: "https://www.google.com/"
            },
            {
              name: "<NAME>",
              company: "Samsung Electronics",
              companyURL: "http://www.samsung.com/sec/"
            },
          ],
          edDraftURI:   "https://mkruisselbrink.github.io/navigator-connect/",
          noLegacyStyle: true,

          otherLinks: [{
            key: "Participate",
            data: [
              { value: "File bugs and feature requests",
                href: "https://github.com/mkruisselbrink/navigator-connect/issues",
              },
              { value: "Fix the text through GitHub",
                href: "https://github.com/mkruisselbrink/navigator-connect",
              },
            ],
          }],
      };
    </script>
  </head>
  <body>
    <section id='abstract'>
      <p>
        This document describes an API to facility cross origin communication between service
        workers and webpages.
      </p>
    </section>
    <section id='sotd'></section>
    <section class='informative' id="introduction">
      <h2>
        Introduction
      </h2>
      <p>
        With the navigator.connect API clients (either webpages or some flavor of worker) can
        connect to services, with these services being implemented by service workers.
      </p>
      <section>
        <h2>
          Example
        </h2>
        <pre class="example highlight">
// http://example.com/webapp.js
navigator.connect('https://example.com/services/echo').then(
  function(port) {
    port.postMessage('hello');
    port.onmessage = function(event) {
      // Handle reply from the service.
    };
  }
);

// https://example.com/serviceworker.js
this.addEventListener('connect', function(event) {
  // Optionally check event.client.origin to determine if that origin should be
  // allowed access to this service.
  event.acceptConnection(event.client.targetUrl === 'https://example.com/services/echo');
  event.source.addEventListener('message', function(event) {
    // Set up a listener
  });
  event.source.postMessage('You are connected!');
});
</pre>
      </section>
    </section>
    <section><commit_msg>Update examples to better illustrate expected API usage.<commit_after><!DOCTYPE html>
<html>
  <head>
    <title>
      navigator.connect API
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove'>
</script>
    <script class="remove">
// (this is to make tidy happy)
      // See http://www.w3.org/respec/ for ReSpec documentation.
      var respecConfig = {
          specStatus: "unofficial",
          shortName: "navigator-connect-api",
          editors: [
            {
              name: "<NAME>",
              company: "Google",
              companyURL: "https://www.google.com/"
            },
            {
              name: "<NAME>",
              company: "Samsung Electronics",
              companyURL: "http://www.samsung.com/sec/"
            },
          ],
          edDraftURI:   "https://mkruisselbrink.github.io/navigator-connect/",
          noLegacyStyle: true,

          otherLinks: [{
            key: "Participate",
            data: [
              { value: "File bugs and feature requests",
                href: "https://github.com/mkruisselbrink/navigator-connect/issues",
              },
              { value: "Fix the text through GitHub",
                href: "https://github.com/mkruisselbrink/navigator-connect",
              },
            ],
          }],
      };
    </script>
  </head>
  <body>
    <section id='abstract'>
      <p>
        This document describes an API to facility cross origin communication between service
        workers and webpages.
      </p>
    </section>
    <section id='sotd'></section>
    <section class='informative' id="introduction">
      <h2>
        Introduction
      </h2>
      <p>
        With the navigator.connect API clients (either webpages or some flavor of worker) can
        connect to services, with these services being implemented by service workers.
      </p>
      <section>
        <h2>
          Example
        </h2>
        <pre class="example highlight" title="Connect to a service">
// http://example.com/webapp.js
navigator.connect('https://example.com/services/echo').then(
  function(port) {
    port.postMessage('hello');
    port.onmessage = function(event) {
      // Handle reply from the service.
    };
  }
);
</pre>
        <pre class="example highlight" title="Handle a connection request">
// https://example.com/serviceworker.js
this.addEventListener('connect', function(event) {
  // Optionally check event.client.origin to determine if that origin should be
  // allowed access to this service.
  event.acceptConnection(event.client.targetUrl === 'https://example.com/services/echo');
  event.source.addEventListener('message', function(event) {
    // Set up a listener
  });
  event.source.postMessage('You are connected!');
  // Port isn't stored, so when the service worker is killed the connection will be closed.
});
</pre>
        <pre class="example highlight" title="Setup a potentially long lasting connection to a service">
// https://acme.com/client-sw.js
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    navigator.connect('https://example.com/services/foobar')
      .then(function(port) {
        console.log('Connected to service');
        // Store port to keep the connection alive after this service worker is killed.
        self.ports.add('foobar', port);
      })
  );
});
</pre>
        <pre class="example highlight" title="Handle a connection request for a long lasting connection">
// https://example.com/serviceworker.js
self.addEventListener('connect', function(event) {
  // Somehow decide to accept or reject the connection.
  event.acceptConnection(event.client.targetUrl === 'https://example.com/services/foobar');
  // Store port to keep the connection alive after this service worker is killed.
  self.ports.add('foobarClient', event.source);
});

self.ports.addEventListener('message', function(event) {
  // Handle messages send to stored ports.
  if (event.source.key === 'foobarClient') {
    // ...
  }
});
</pre>
        <pre class="example highlight" title="Handle some event by sending a message to a stored port">
// https://example.com/serviceworker.js

self.addEventListener('someevent', function(event) {
  event.waitUntil(
    self.ports.match('foobarClient')
      .then((ports) => ports.forEach((port) => port.postMessage('some event happened')))
  );
});
</pre>
      </section>
    </section>
    <section>
{'fraction_non_alphanumeric': 0.1387066541705717, 'fraction_numerical': 0.0026777346364975233, 'mean_word_length': 2.346774193548387, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 81, 'https://': 21, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6757097', 'n_tokens_mistral': 2125, 'n_tokens_neox': 2085, 'n_words': 520}