polymer-platinum-rails 1.0.0.pre.rc.1

data/app/assets/components/platinum-push-messaging/service-worker.js

@@ -0,0 +1,151 @@
+/*
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+'use strict';
+
+var options = JSON.parse(decodeURIComponent(location.search.substring(1)));
+
+var DEFAULT_TAG = self.registration.scope;
+var DATA_SUPPORT = Notification.prototype.hasOwnProperty('data');
+
+self.skipWaiting();
+
+/**
+ * Resolves a URL that is relative to the registering page to an absolute URL
+ *
+ * @param url {String} a relative URL
+ * @return {String} the equivalent absolute URL
+ */
+var absUrl = function(url) {
+  if (typeof(url) === 'string') {
+    return new URL(url, options.baseUrl).href;
+  }
+};
+
+var getClientWindows = function() {
+  return clients.matchAll({
+    type: 'window',
+    includeUncontrolled: true
+  }).catch(function(error) {
+    // Couldn't get client list, possibly not yet implemented in the browser
+    return [];
+  });
+};
+
+var getVisible = function(url) {
+  return getClientWindows().then(function(clientList) {
+    for (var client of clientList) {
+      if (client.url === url && client.focused &&
+          client.visibilityState === 'visible') {
+        return client;
+      }
+    }
+    return null;
+  });
+};
+
+var messageClient = function(client, message, notificationShown) {
+  client.postMessage({
+    source: self.registration.scope,
+    message: message,
+    type: notificationShown ? 'click' : 'push'
+  });
+};
+
+var notify = function(data) {
+  var messagePromise;
+
+  if (options.messageUrl) {
+    messagePromise = fetch(absUrl(options.messageUrl)).then(function(response) {
+      return response.json();
+    });
+  } else {
+    messagePromise = data ? data.json() : Promise.resolve({});
+  }
+
+  return messagePromise.then(function(message) {
+    var detail = {
+      title: message.title || options.title || '',
+      body: message.message || options.message || '',
+      tag: message.tag || options.tag || DEFAULT_TAG,
+      icon: absUrl(message.icon || options.iconUrl),
+      data: message
+    };
+
+    var clickUrl = absUrl(message.url || options.clickUrl);
+
+    if (!DATA_SUPPORT) {
+      // If there is no 'data' property support on the notification then we have
+      // to pass the link URL (and anything else) some other way. We use the
+      // hash of the icon URL to store it.
+      var iconUrl = new URL(detail.icon || 'about:blank');
+      iconUrl.hash = encodeURIComponent(JSON.stringify(detail.data));
+      detail.icon = iconUrl.href;
+    }
+
+    return getVisible(clickUrl).then(function(visibleClient) {
+      if (visibleClient) {
+        messageClient(visibleClient, message, false);
+      } else {
+        return self.registration.showNotification(detail.title, detail);
+      }
+    });
+  });
+};
+
+var clickHandler = function(notification) {
+  notification.close();
+
+  var message;
+  if ('data' in notification) {
+    message = notification.data;
+  } else {
+    message = new URL(notification.icon).hash.substring(1);
+    message = JSON.parse(decodeURIComponent(message));
+  }
+
+  var url = absUrl(message.url || options.clickUrl);
+
+  if (!url) {
+    return;
+  }
+
+  return getClientWindows().then(function(clientList) {
+    for (var client of clientList) {
+      if (client.url === url && 'focus' in client) {
+        client.focus();
+        return client;
+      }
+    }
+    if ('openWindow' in clients) {
+      return clients.openWindow(url);
+    }
+  }).then(function(client) {
+    if (client) {
+      messageClient(client, message, true);
+    }
+  });
+};
+
+self.addEventListener('push', function(event) {
+  event.waitUntil(notify(event.data));
+});
+
+self.addEventListener('notificationclick', function(event) {
+  event.waitUntil(clickHandler(event.notification));
+});
+
+self.addEventListener('message', function(event) {
+  if (event.data.type == 'test-push') {
+    notify({
+      json: function() {
+        return Promise.resolve(event.data.message);
+      }
+    });
+  }
+});

data/app/assets/components/platinum-sw/README.md

@@ -0,0 +1,43 @@
+# Platinum Service Worker Elements
+A set of Polymer elements that simplify service worker registration and caching, powered by the
+[`sw-toolbox` library](https://github.com/googlechrome/sw-toolbox).
+Full documentation is available at https://PolymerElements.github.io/platinum-sw/index.html
+
+# Considerations
+
+## Top-level `sw-import.js`
+While `<platinum-sw-register>` abstracts away many of the details of working with service workers,
+there is one specific requirement that developers must fulfill: it needs to register a JavaScript file
+located at the top-level of your site's web root. (Details behind this requirement can be found in
+the service worker specification [issue tracker](https://github.com/slightlyoff/ServiceWorker/issues/468#issuecomment-60276779).)
+
+In order to use `<platinum-sw-register>`, it's recommended that you create a `sw-import.js` file in
+your site's web root. The file's only contents should be
+
+    importScripts('bower_components/platinum-sw/service-worker.js');
+
+You can adjust the path to `service-worker.js` if your project has its Polymer elements
+installed somewhere other than `bower_components/`.
+
+If you have multiple subdirectories worth of pages on your site, it's recommend that you include the
+`<platinum-sw-register>` element on a top-level entry page that all visitors will access first; once
+they visit the top-level page and the service worker is registered, it will automatically apply to
+all sub-pages, which will fall under its
+[scope](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-registration-scope).
+
+## `cacheOnly` & `cacheFirst` `defaultCacheStrategy` Considered Harmful
+The [`sw-toolbox` library](https://github.com/googlechrome/sw-toolbox),
+which `<platinum-sw-cache>` is built on, supports a number of
+[caching strategies](https://github.com/googlechrome/sw-toolbox#built-in-handlers).
+Two of them, `cacheOnly` and `cacheFirst`, are strongly discouraged to be used as the `defaultCacheStrategy`
+for `<platinum-sw-cache>`. With both of those strategies, all HTTP requests, including requests for
+the page which contains the `<platinum-sw-cache>` element, are served directly from the [Cache Storage
+API](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#cache-objects) without
+first consulting the network for a fresh copy. Once the copy of the host page is cached,
+it's extremely difficult to change the configuration of the service worker (since the configuration
+depends on the page's contents), and developers could find themselves deploying sites that can never
+update.
+
+In a future release of `<platinum-sw-cache>`, using `cacheOnly` and `cacheFirst` as `defaultCacheStrategy`
+may lead to an explicit error condition, but for the meantime, please consider a more reasonable default
+(like `networkFirst`).

data/app/assets/components/platinum-sw/bootstrap/sw-toolbox-setup.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+var swToolboxURL = new URL('../sw-toolbox/sw-toolbox.js', params.get('baseURI')).href;
+importScripts(swToolboxURL);
+
+if (params.has('defaultCacheStrategy')) {
+  var strategy = params.get('defaultCacheStrategy');
+  toolbox.router.default = toolbox[strategy] || self[strategy];
+}
+
+if (params.has('precache')) {
+  toolbox.precache(params.get('precache'));
+}
+
+if (params.has('route')) {
+  var setsOfRouteParams = params.get('route');
+  while (setsOfRouteParams.length > 0) {
+    var routeParams = setsOfRouteParams.splice(0, 3);
+    var originParam;
+    if (routeParams[2]) {
+      originParam = {origin: new RegExp(routeParams[2])};
+    }
+    var handler = toolbox[routeParams[1]] || self[routeParams[1]];
+    if (typeof handler === 'function') {
+      toolbox.router.get(routeParams[0], handler, originParam);
+    } else {
+      console.error('Unable to register sw-toolbox route: ', routeParams);
+    }
+  }
+}

data/app/assets/components/platinum-sw/bower.json

@@ -0,0 +1,37 @@
+{
+  "name": "platinum-sw",
+  "private": true,
+  "version": "1.0.1",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "description": "Service worker helper elements.",
+  "main": "platinum-sw-elements.html",
+  "keywords": [
+    "caching",
+    "offline",
+    "polymer",
+    "service-worker",
+    "serviceworker",
+    "web-component",
+    "web-components"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "sw-toolbox": "^2.0.2"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.2",
+    "marked-element": "PolymerElements/marked-element#^1.0.0",
+    "web-component-tester": "*",
+    "fetch": "^0.9.0"
+  }
+}

data/app/assets/components/platinum-sw/demo/index.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Platinum Service Worker Elements Demo</title>
+
+    <script src="../../fetch/fetch.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../platinum-sw-elements.html">
+    <link rel="import" href="../../marked-element/marked-element.html">
+  </head>
+
+  <body>
+    <template is="dom-bind" id="page-template">
+      <platinum-sw-register skip-waiting
+                            clients-claim
+                            reload-on-install
+                            state="{{state}}">
+        <platinum-sw-cache default-cache-strategy="networkFirst"
+                           precache="{{precacheList}}"></platinum-sw-cache>
+      </platinum-sw-register>
+
+      <h1>Platinum Service Worker Elements Demo</h1>
+      <p>This is a simple offline-capable eBook reader.</p>
+      <p>
+        On browsers that support service workers, this page itself and all the books are all
+        available offline, by virtue of the <code>&lt;platinum-sw-register></code> and
+        <code>&lt;platinum-sw-cache></code> elements.
+      </p>
+      <p>
+        Service workers are meant to be a progressive enhancement, and browsers that lack service
+        worker support will still have a functional (online-only) eBook reader.
+      </p>
+
+      <template is="dom-if" if="[[state]]">
+        <select on-change="selectBook">
+          <option disabled selected>Select a Book...</option>
+          <template is="dom-repeat" id="books" items="[[books]]">
+            <option>{{item.title}}</option>
+          </template>
+        </select>
+      </template>
+
+      <marked-element markdown="{{text}}"></marked-element>
+    </template>
+
+    <script>
+      var t = document.querySelector('#page-template');
+
+      t.books = [{
+        title: 'Don Quixote',
+        url: 'https://cdn.rawgit.com/GITenberg/Don-Quixote_996/master/996.txt'
+      }, {
+        title: 'Dubliners',
+        url: 'https://cdn.rawgit.com/GITenberg/Dubliners_2814/master/2814.txt'
+      }, {
+        title: 'Pride & Prejudice',
+        url: 'https://cdn.rawgit.com/GITenberg/Pride-and-Prejudice_1342/master/1342.txt'
+      }];
+
+      t.precacheList = t.books.map(function(book) {
+        return book.url;
+      });
+
+      t.selectBook = function(e) {
+        var books = document.querySelector('#books');
+        var selectedBook = books.itemForElement(e.target.selectedOptions[0]);
+        window.fetch(selectedBook.url).then(function(response) {
+          return response.text();
+        }).then(function(text) {
+          t.text = text;
+        });
+      };
+
+      window.addEventListener('WebComponentsReady', function() {
+        // Explicitly call the register() method. We need to wait until the template's variables are
+        // all set first, since the configuration depends on bound variables.
+        document.querySelector('platinum-sw-register').register();
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/platinum-sw/demo/sw-import.js

@@ -0,0 +1 @@
+importScripts('../service-worker.js');

data/app/assets/components/platinum-sw/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+
+  <body>
+    <iron-component-page src="platinum-sw-elements.html"></iron-component-page>
+  </body>
+</html>

data/app/assets/components/platinum-sw/platinum-sw-cache.html

@@ -0,0 +1,116 @@
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+  /**
+   * The `<platinum-sw-cache>` element makes it easy to precache specific resources, perform runtime
+   * caching, and serve your cached resources when a network is unavailable.
+   * Under the hood, the [sw-toolbox](https://github.com/googlechrome/sw-toolbox) library is used
+   * for all the caching and request handling logic.
+   * `<platinum-sw-cache>` needs to be a child element of `<platinum-sw-register>`.
+   * A simple, yet useful configuration is
+   *
+   *     <platinum-sw-register>
+   *       <platinum-sw-cache></platinum-sw-cache>
+   *     </platinum-sw-register>
+   *
+   * This is enough to have all of the (local) resources your site uses cached at runtime.
+   * (It uses the default `defaultCacheStrategy` of "networkFirst".)
+   * When there's a network available, visits to your site will go against the network copy of the
+   * resources, but if someone visits your site when they're offline, all the cached resources will
+   * be used.
+   *
+   * @demo demo/index.html An offline-capable eReader demo.
+   */
+  Polymer({
+    is: 'platinum-sw-cache',
+
+    properties: {
+      /**
+       * The caching strategy used for all local (i.e. same-origin) requests.
+       *
+       * For a list of strategies, see the [`sw-toolbox` documentation](https://github.com/GoogleChrome/sw-toolbox#built-in-handlers).
+       * Specify a strategy as a string, without the "toolbox" prefix. E.g., for
+       * `toolbox.networkFirst`, set `defaultCacheStrategy` to "networkFirst".
+       *
+       * Note that the "cacheFirst" and "cacheOnly" strategies are not recommended, and may be
+       * explicitly prevented in a future release. More information can be found at
+       * https://github.com/PolymerElements/platinum-sw#cacheonly--cachefirst-defaultcachestrategy-considered-harmful
+       *
+       * @see {@link https://github.com/GoogleChrome/sw-toolbox#built-in-handlers}
+       */
+      defaultCacheStrategy: {
+        type: String,
+        value: 'networkFirst'
+      },
+
+      /**
+       * Used to provide a list of URLs that are always precached as soon as the service worker is
+       * installed. Corresponds to  [`sw-toolbox`'s `precache()` method](https://github.com/GoogleChrome/sw-toolbox#toolboxprecachearrayofurls).
+       *
+       * This is useful for URLs that that wouldn't necessarily be picked up by runtime caching,
+       * i.e. a list of resources that are needed by one of the subpages of your site, or a list of
+       * resources that are only loaded via user interaction.
+       *
+       * `precache` can be used in conjunction with `precacheFile`, and the two arrays will be
+       * concatenated.
+       *
+       * @see {@link https://github.com/GoogleChrome/sw-toolbox#toolboxprecachearrayofurls}
+       */
+      precache: {
+        type: Array,
+        value: function() { return []; }
+      },
+
+      /**
+       * Used to provide a list of URLs that are always precached as soon as the service worker is
+       * installed. Corresponds to  [`sw-toolbox`'s `precache()` method](https://github.com/GoogleChrome/sw-toolbox#toolboxprecachearrayofurls).
+       *
+       * While the `precache` option supports provided the array of URLs in as an inline attribute,
+       * this option supports providing them as an array in JSON file, which is fetched at runtime.
+       * This is useful if the array is generated via a separate build step, as it's easier to
+       * write that output to a file then it is to modify inline HTML content.
+       *
+       * `precacheFile` can be used in conjunction with `precache`, and the two arrays will be
+       * concatenated.
+       *
+       * @see {@link https://github.com/GoogleChrome/sw-toolbox#toolboxprecachearrayofurls}
+       */
+      precacheFile: String
+    },
+
+    _getParameters: function(baseURI) {
+      return new Promise(function(resolve) {
+        var params = {
+          importscriptLate: new URL('bootstrap/sw-toolbox-setup.js', baseURI).href,
+          defaultCacheStrategy: this.defaultCacheStrategy,
+          precache: this.precache
+        };
+
+        if (this.precacheFile) {
+          window.fetch(this.precacheFile).then(function(response) {
+            if (!response.ok) {
+              throw Error('unable to load ' + this.precacheFile);
+            }
+            return response.json();
+          }.bind(this)).then(function(files) {
+            params.precache = params.precache.concat(files);
+          }).catch(function(error) {
+            console.info('Skipping precaching: ' + error.message);
+          }).then(function() {
+            resolve(params);
+          });
+        } else {
+          resolve(params);
+        }
+      }.bind(this));
+    }
+  });
+</script>