Merge pull request #31353 from justindarc/bug1194342

Bug 1194342 - [Music][NGA] Enable ServiceWorkers via build-time flag

Makefile

@@ -85,6 +85,7 @@ SCREEN_TIMEOUT?=-1
 PRODUCTION?=0
 GAIA_OPTIMIZE?=0
 GAIA_DEV_PIXELS_PER_PX?=1
+NGA_SERVICE_WORKERS?=0
 
 # Parallel build for multicores CPU
 P?=1
@@ -562,7 +563,8 @@ define BUILD_CONFIG
   "DEFAULT_KEYBOAD_SYMBOLS_FONT": "$(DEFAULT_KEYBOAD_SYMBOLS_FONT)", \
   "DEFAULT_GAIA_ICONS_FONT": "$(DEFAULT_GAIA_ICONS_FONT)", \
   "RAPTOR_TRANSFORM": "$(RAPTOR_TRANSFORM)", \
-  "RAPTOR_TRANSFORMER_PATH": "$(RAPTOR_TRANSFORMER_PATH)" \
+  "RAPTOR_TRANSFORMER_PATH": "$(RAPTOR_TRANSFORMER_PATH)", \
+  "NGA_SERVICE_WORKERS": "$(NGA_SERVICE_WORKERS)" \
 }
 endef
 

dev_apps/music-nga/.gitignore

@@ -1,2 +1,3 @@
+node_modules/
 media/*
 !media/.gitkeep

dev_apps/music-nga/README.md

@@ -3,26 +3,24 @@ music-nga
 
 Experiments in re-building the FxOS Music app using NGA
 
-To set up development environment, clone this repo then run:
-- `npm install`
-- `bower install`
+To install from Gaia:
+- From the Gaia repo's root directory, run `make install-gaia APP=music-nga`
 
-You may also occassionally need to run `bower update` to fetch the latest dependencies.
+Note: To install an experimental build that utilizes Service Workers for the backend API, use the `SERVICE_WORKERS=1` flag.
 
 To run on Firefox OS device:
 - Ensure "USB Debugging" is set to "ADB+DevTools" in "Settings" > "Developer"
 - Open "WebIDE" in Firefox desktop
 - Select your device from the right-hand "Runtime" menu
 - Select "Open App" from the left-hand menu and choose "Open Packaged App..."
-- Browse to the root folder of this repo
+- Browse to the root folder of this app in the repo
 - Press "Run" to push to the device
 
 Note: Be sure to "Request Higher Permissions" under "Runtime Info" for your device and set `dom.serviceWorkers.enabled` to `true` under "Device Preferences" before running the app.
 
 Running a local web server for development:
-- Install [nws](https://www.npmjs.com/package/nws)
-  + `npm install -g nws`
-- From this repo's root directory, run `nws` (automatically serves up this app from HTTP port 3030)
+- Run `npm install`
+- From this app's root directory, run `npm run serve` (automatically serves up this app from HTTP port 3030)
 
 To run on Firefox desktop (Developer Edition *RECOMMENDED*):
 - Check "Enable multi-process Firefox" in `about:preferences` > "General"

dev_apps/music-nga/build/build.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/* global require, exports */
+var utils = require('utils');
+
+exports.execute = function(options) {
+  utils.copyToStage(options);
+
+  var file = utils.getFile(options.STAGE_APP_DIR, 'js', 'config.js');
+  var content = 'var SERVICE_WORKERS = ' + (options.NGA_SERVICE_WORKERS === '1') + ';'
+
+  utils.writeContent(file, content);
+};

dev_apps/music-nga/elements/music-artwork.js

@@ -128,15 +128,7 @@ proto.createdCallback = function() {
   var shadowRoot = this.createShadowRoot();
   shadowRoot.innerHTML = template;
 
-  var iconsLink = document.querySelector('link[href$="gaia-icons-embedded.css"]');
-  var iconsHref = iconsLink && iconsLink.href;
-  if (iconsHref) {
-    fetch(iconsHref).then((response) => {
-      response.text().then((icons) => {
-        shadowRoot.querySelector('style').innerHTML += icons;
-      });
-    });
-  }
+  getIcons().then(icons => shadowRoot.querySelector('style').innerHTML += icons);
 
   var $ = shadowRoot.querySelector.bind(shadowRoot);
 
@@ -221,6 +213,23 @@ Object.defineProperty(proto, 'overlayVisible', {
   }
 });
 
+function getIcons() {
+  return new Promise((resolve, reject) => {
+    var iconsLink = document.querySelector('link[href$="gaia-icons-embedded.css"]');
+    var iconsHref = iconsLink && iconsLink.href;
+    if (!iconsHref) {
+      reject();
+      return;
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', iconsHref, true);
+    xhr.onload = () => resolve(xhr.response);
+    xhr.onerror = () => reject();
+    xhr.send();
+  });
+}
+
 try {
   window.MusicControls = document.registerElement('music-artwork', { prototype: proto });
 } catch (e) {

dev_apps/music-nga/elements/music-controls.js

@@ -50,15 +50,7 @@ proto.createdCallback = function() {
   var shadowRoot = this.createShadowRoot();
   shadowRoot.innerHTML = template;
 
-  var iconsLink = document.querySelector('link[href$="gaia-icons-embedded.css"]');
-  var iconsHref = iconsLink && iconsLink.href;
-  if (iconsHref) {
-    fetch(iconsHref).then((response) => {
-      response.text().then((icons) => {
-        shadowRoot.querySelector('style').innerHTML += icons;
-      });
-    });
-  }
+  getIcons().then(icons => shadowRoot.querySelector('style').innerHTML += icons);
 
   var $id = shadowRoot.getElementById.bind(shadowRoot);
 
@@ -99,6 +91,23 @@ Object.defineProperty(proto, 'paused', {
   }
 });
 
+function getIcons() {
+  return new Promise((resolve, reject) => {
+    var iconsLink = document.querySelector('link[href$="gaia-icons-embedded.css"]');
+    var iconsHref = iconsLink && iconsLink.href;
+    if (!iconsHref) {
+      reject();
+      return;
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', iconsHref, true);
+    xhr.onload = () => resolve(xhr.response);
+    xhr.onerror = () => reject();
+    xhr.send();
+  });
+}
+
 try {
   window.MusicControls = document.registerElement('music-controls', { prototype: proto });
 } catch (e) {