Service worker

app/helpers/split-prefix.js

@@ -16,7 +16,7 @@ export function splitPrefix(value) {
   const prefix = parts[1];
   const name = Ember.Handlebars.Utils.escapeExpression(parts[2]);
 
-  return new Ember.Handlebars.SafeString(`<span class="name-prefix">${prefix}</span> <span class="name-main">${name}</span>`);
+  return new Ember.Handlebars.SafeString(`<span class="name-prefix">${prefix}</span><span class="name-main">${name}</span>`);
 }
 
 export default Ember.Helper.helper(splitPrefix);

app/index.html

@@ -65,7 +65,19 @@ <h3 class="loading">Loading...</h3>
 
     <script src="assets/vendor.js"></script>
     <script src="assets/ember-addons-website.js"></script>
-    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+    <script>
+
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('sw.js', {scope: '../'}).then(function(sw) {
+          // registration worked!
+          console.log('SW Registered', sw);
+        }).catch(function(err) {
+          // registration failed :(
+          console.log('SW Not Registered', err);
+        });
+      }
+    </script>
 
     {{content-for 'body-footer'}}
   </body>

app/styles/app.css

@@ -152,11 +152,30 @@ a.sort-button {
   margin-top: 20px;
 }
 
+.gravatar--wrapper {
+  display: inline;
+}
+
 .gravatar {
   border-radius: 50%;
   margin-right: 5px;
 }
 
+.author-information {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 130px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+}
+
+.author-information__anchor:hover {
+  text-decoration: none;
+  color: #D02714;
+}
+
 .package-link {
   font-size: 24px;
 }

app/templates/components/em-pkg.hbs

@@ -29,9 +29,13 @@
   {{/if}}
 </td>
 <td class="cell-gravatar hidden-xs">
-  <a href="https://www.npmjs.com/~{{user.name}}" target="_blank">
-    <img src="{{user.gravatar}}?s=30&d=retro" class="gravatar">
-    {{user.name}}
+  <a href="https://www.npmjs.com/~{{user.name}}" target="_blank" class="author-information__anchor">
+    <div class='gravatar--wrapper'>
+      <img src="{{user.gravatar}}?s=30&d=retro" class="gravatar">
+    </div>
+    <div class="author-information">
+      {{user.name}}
+    </div>
   </a>
 </td>
 <td class="cell-downloads hidden-xs">

package.json

@@ -43,5 +43,6 @@
     "ember-legacy-views": "0.2.0",
     "ember-load": "0.0.3",
     "ember-moment": "^4.1.0"
-  }
+  },
+  "dependencies": {}
 }

public/sw.js

@@ -0,0 +1,56 @@
+var addonsLink = 'https://io-builtwithember-addons-data.s3.amazonaws.com/addons.json';
+
+var CACHE_DEPENDENCIES_NAME = 'ADDONS_DEPENDENCIES';
+var CACHE_DEPENDENCIES = [
+  'assets/vendor.css',
+  'assets/vendor.js',
+  'assets/ember-addons-website.css',
+  'assets/ember-addons-website.js',
+  'assets/favicon.png',
+  'fonts/fontawesome-webfont.woff?v=4.4.0',
+  'fonts/fontawesome-webfont.woff2?v=4.4.0',
+  'assets/github-logo.svg'
+];
+CACHE_DEPENDENCIES.push(addonsLink);
+
+// Request the addons.js, filter the gravatar ulrs and
+// add the new urls to the CACHE_DEPENDENCIES array.
+function urlsToPrefetch() {
+  return fetch(addonsLink).then(function(response) {
+    return response.json();
+  }).then(function(json) {
+    return json.map(function(curr) {
+      return curr["_npmUser"].gravatar + '?s=30&d=retro';
+    }).filter(function(data, index, array) {
+      if (array.indexOf(data) === index) {
+        return data;
+      }
+    }).concat(CACHE_DEPENDENCIES);
+  });
+}
+
+// waitUntil expects a promise and it will stop the worker execution
+// until the promise is resolved.
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    urlsToPrefetch().then(function(urls) {
+      // Open the specified cache if it exists. If the cache doesn't exist
+      // create it and add prefetch the urls on the array.
+      caches.open(CACHE_DEPENDENCIES_NAME).then(function(cache) {
+        cache.addAll(urls);
+      });
+    })
+  );
+});
+
+// Intercept every request that the app makes. If it the request matches
+// a request that has been stored in the cache return the response that is stored.
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(res) {
+      if (res) {
+        return res;
+      }
+    })
+  );
+});