Merge pull request #59 from san650/broccoli-asset-rev

Improve compatibility with broccoli-asset-rev addon

Author: san650

README.md

@@ -30,6 +30,8 @@ See the [documentation](#documentation) section below for more information.
 * [Installation](#installation)
 * [Example](#example)
 * [Configuration](#configuration)
+  * [Disable](#disable)
+  * [Fingerprint](#fingerprint)
 * [API documentation](#api-documentation)
   * [`name`](#name)
   * [`short_name`](#short_name)
@@ -107,7 +109,7 @@ It will generate the following meta tags
 `index.html`
 
 ```html
-<link rel="manifest" href="/manifest.json">
+<link rel="manifest" href="/manifest.webmanifest">
 <link rel="apple-touch-icon" href="/images/icons/android-chrome-192x192-883114367f2d72fc9a509409454a1e73.png" sizes="192x192">
 <link rel="apple-touch-icon" href="/images/icons/android-chrome-512x512-af3d768ff652dc2be589a3c22c6dc827.png" sizes="512x512">
 <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-36cba25bc155e8ba414265f9d85861ca.png" sizes="180x180">
@@ -117,7 +119,7 @@ It will generate the following meta tags
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 ```
 
-and the following `manifest.json` file
+and the following `manifest.webmanifest` file
 
 ```json
 {
@@ -145,38 +147,43 @@ and the following `manifest.json` file
 
 ## Configuration
 
-### Manifest name
+### Disable
 
-You can set the name of the manifest by adding a configuation option to `config/environment.js`.
+You can disable the addon by adding a configuration option to `ember-cli-build.js` build file.
 
 ```js
-module.exports = function(environment) {
-  var ENV = {
-    modulePrefix: 'dummy',
-    environment: environment,
-    rootURL: '/'
-    ...
-  };
+var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-  ENV['ember-web-app'] = {
-    name: 'my-awesome-manifest.json'
+module.exports = function(defaults) {
+  var options = {
+    'ember-web-app': {
+      enabled: false
+    }
   };
 
-  return ENV;
+  var app = new EmberApp(defaults, options);
+
+  return app.toTree();
 };
 ```
 
-### Disable
+### Fingerprint
 
-You can disable the addon by adding a configuration option to `ember-cli-build.js` build file.
+You can add fingerprint checksum to your manifest.webmanifest file by configuring [broccoli-asset-rev](https://github.com/rickharrison/broccoli-asset-rev).
+
+The following example prepends with a custom domain and adds fingerprint checksum to the manifest.webmanifest file.
+
+`ember-cli-build.js`
 
 ```js
 var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function(defaults) {
+  var defaultExtensions = ['js', 'css', 'png', 'jpg', 'gif', 'map'];
   var options = {
-    'ember-web-app': {
-      enabled: false
+    fingerprint: {
+      extensions: defaultExtensions.concat(['webmanifest']),
+      prepend: 'https://www.example.com/'
     }
   };
 
@@ -186,6 +193,8 @@ module.exports = function(defaults) {
 };
 ```
 
+Note that the `replaceExtensions` configuration from `broccoli-asset-rev` is updated internally by `ember-web-app` so you don't have to configure yourself on your project.
+
 ## API documentation
 
 This Ember addon generates a [Web Application Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) at build time using the `config/manifest.js` configuration file.

blueprints/ember-web-app/index.js

@@ -11,6 +11,6 @@ module.exports = {
   },
 
   afterInstall: function() {
-    return this.addPackageToProject('ember-web-app-rename', '^1.0.0');
+    return this.removePackageFromProject('ember-web-app-rename');
   }
 };

index.js

@@ -1,9 +1,7 @@
 /* eslint-env node */
 'use strict';
 
-var constants = require('./lib/constants');
-var MANIFEST_TEMP_NAME = constants.MANIFEST_TEMP_NAME;
-var MANIFEST_NAME = constants.MANIFEST_NAME;
+var MANIFEST_NAME = "manifest.webmanifest";
 
 module.exports = {
   name: 'ember-web-app',
@@ -50,7 +48,7 @@ module.exports = {
 
     var GenerateManifest = require('./lib/broccoli/generate-manifest-json');
 
-    return new GenerateManifest(generateManifestFromConfiguration(this.manifestConfiguration), MANIFEST_TEMP_NAME);
+    return new GenerateManifest(generateManifestFromConfiguration(this.manifestConfiguration), MANIFEST_NAME);
   },
 
   contentFor: function(section, config) {
@@ -74,7 +72,7 @@ module.exports = {
 
   _configureFingerprint: function() {
     var configureFingerprint = require('./lib/configure-fingerprint');
-    this.app.options.fingerprint = configureFingerprint(this.app.options.fingerprint, MANIFEST_TEMP_NAME);
+    this.app.options.fingerprint = configureFingerprint(this.app.options.fingerprint, MANIFEST_NAME);
   },
 
   _getManifestConfiguration: function() {

lib/android-link-tags.js

@@ -3,10 +3,11 @@
 module.exports = androidLinkTags;
 
 function androidLinkTags(config, manifestName) {
-  var name = (config['ember-web-app'] && config['ember-web-app'].name) || manifestName;
+  var resolveURL = require('./resolve-url');
   var rootURL = config.rootURL || '/';
+  var url = resolveURL(rootURL, manifestName);
 
   return [
-    `<link rel="manifest" href="${rootURL}${name}">`
+    `<link rel="manifest" href="${url}">`
   ];
 }

lib/broccoli/generate-manifest-json.js

@@ -11,7 +11,7 @@ GenerateManifest.prototype.constructor = GenerateManifest;
 function GenerateManifest(manifest, manifestName) {
   // We don't need any input node
   Plugin.call(this, [], {
-    annotation: 'generate manifest.json',
+    annotation: 'generate manifest.webmanifest',
     persistentOutput: true
   });
 

lib/configure-fingerprint.js

@@ -17,9 +17,6 @@ function configureFingerprint(currentOptions, manifestName) {
     }
   }
 
-  var exclude = fingerprint.exclude || defaultOptions.exclude;
-  fingerprint.exclude = exclude.concat([manifestName]);
-
   var replaceExtensions = fingerprint.replaceExtensions || defaultOptions.replaceExtensions;
   fingerprint.replaceExtensions = replaceExtensions.concat([manifestName.match(/\.(.*$)/)[1]]);
 

lib/constants.js

@@ -0,0 +1,12 @@
+/*jshint node:true*/
+'use strict';
+
+module.exports = function() {
+  return {
+    icons: [
+      {
+        src: 'pio.png'
+      }
+    ]
+  };
+}

node-tests/acceptance/fixtures/broccoli-asset-rev/config/manifest.js

@@ -0,0 +1,15 @@
+/* global require, module */
+var EmberApp = require('ember-cli/lib/broccoli/ember-app');
+
+module.exports = function(defaults) {
+  var options = {
+    fingerprint: {
+      extensions: ['png', 'webmanifest'],
+      prepend: 'https://www.example.com/'
+    }
+  };
+
+  var app = new EmberApp(defaults, options);
+
+  return app.toTree();
+};

node-tests/acceptance/fixtures/broccoli-asset-rev/ember-cli-build.js

@@ -17,15 +17,15 @@ describe('Acceptance: manifest file generation', function() {
     app = new AddonTestApp();
   });
 
-  it('generates a manifest.json file', function() {
+  it('generates a manifest.webmanifest file', function() {
     return app
       .create('empty', {
         fixturesPath: 'node-tests/acceptance/fixtures',
       })
       .then(function() {
         return app.runEmberCommand('build')
       })
-      .then(contentOf(app, 'dist/manifest.json'))
+      .then(contentOf(app, 'dist/manifest.webmanifest'))
       .then(assertJSON(app, {
         name: 'empty',
         short_name: 'empty',
@@ -47,61 +47,62 @@ describe('Acceptance: manifest file generation', function() {
       .then(function() {
         return app.runEmberCommand('build', '--prod')
       })
-      .then(contentOf(app, 'dist/manifest.json'))
+      .then(contentOf(app, 'dist/manifest.webmanifest'))
       .then(assertJSON(app, {
         icons: [ { src: "pio-8911090226e7b5522790f1218f6924a5.png" } ]
       }))
       .then(contentOf(app, 'dist/fastbootAssetMap.json'))
       .then(assertJSON(app, { "pio.png": "pio-0987654321.png" }));
   });
 
-  it('renames manifest.json', function() {
+  it('doesn\'t generate the manifest.webmanifest', function() {
     return app
-      .create('config-name', {
+      .create('disabled', {
         fixturesPath: 'node-tests/acceptance/fixtures',
       })
       .then(function() {
         return app.runEmberCommand('build')
       })
-      .then(contentOf(app, 'dist/my-awesome-manifest.json'))
-      .then(assertJSON(app, {
-        name: 'foo'
-      }))
+      .then(function() {
+        assert.ok(!fs.existsSync(app.filePath('dist/manifest.webmanifest')), 'Doesn\'t generate manifest.webmanifest file');
+      })
       .then(contentOf(app, 'dist/index.html'))
       .then(function(content) {
-        assert.ok(content.indexOf('href="/my-awesome-manifest.json"') > -1, 'index.html uses name from configuration');
+        assert.ok(!content.includes('apple-touch-icon'), 'Doesn\'t include meta tags');
       });
   });
 
-  it('doesn\'t generate the manifest.json', function() {
+  it('uses rootURL configuration', function() {
     return app
-      .create('disabled', {
+      .create('config-root-url', {
         fixturesPath: 'node-tests/acceptance/fixtures',
       })
       .then(function() {
         return app.runEmberCommand('build')
       })
-      .then(function() {
-        assert.ok(!fs.existsSync(app.filePath('dist/manifest.json')), 'Doesn\'t generate manifest.json file');
-      })
       .then(contentOf(app, 'dist/index.html'))
       .then(function(content) {
-        assert.ok(!content.includes('apple-touch-icon'), 'Doesn\'t include meta tags');
+        assert.ok(content.indexOf('href="/foo/bar/baz/manifest.webmanifest"') > -1, 'index.html uses rootURL from configuration');
       });
   });
 
-  it('uses rootURL configuration', function() {
+  it('uses fingerprint configuration for manifest', function() {
     return app
-      .create('config-root-url', {
+      .create('broccoli-asset-rev', {
         fixturesPath: 'node-tests/acceptance/fixtures',
       })
       .then(function() {
-        return app.runEmberCommand('build')
+        return app.runEmberCommand('build', '--prod')
       })
       .then(contentOf(app, 'dist/index.html'))
       .then(function(content) {
-        assert.ok(content.indexOf('href="/foo/bar/baz/manifest.json"') > -1, 'index.html uses rootURL from configuration');
-      });
+        assert.ok(content.indexOf('href="https://www.example.com/manifest-ce65942fa306b3b532ff17cf85454f3d.webmanifest"') > -1, 'checksum fingerprint is added to manifest.webmanifest file');
+        assert.ok(content.indexOf('href="https://www.example.com/pio-8911090226e7b5522790f1218f6924a5.png"') > -1, 'checksum fingerprint is added to image file');
+      })
+      .then(contentOf(app, 'dist/manifest-ce65942fa306b3b532ff17cf85454f3d.webmanifest'))
+      .then(assertJSON(app, {
+        icons: [ { src: "https://www.example.com/pio-8911090226e7b5522790f1218f6924a5.png" } ]
+      }));
   });
 });
 

node-tests/acceptance/fixtures/broccoli-asset-rev/public/pio.png

@@ -12,18 +12,18 @@ describe('Broccoli: ProcessManifest', function() {
     fixturePath: __dirname,
 
     subject: function() {
-      return new GenerateManifest({ foo: 'bar', apple: 'baz', ms: 'qux' }, 'manifest.json');
+      return new GenerateManifest({ foo: 'bar', apple: 'baz', ms: 'qux' }, 'manifest.webmanifest');
     },
   });
 
   afterEach(function() {
     return cleanupBuilders();
   });
 
-  it('generates manifest.json file', function() {
+  it('generates manifest.webmanifest file', function() {
     return GenerateManifestHelper()
       .then(function(result) {
-        assert.deepEqual(result.files, ['manifest.json']);
+        assert.deepEqual(result.files, ['manifest.webmanifest']);
         return path.join(result.directory, result.files[0]);
       })
       .then(readManifest)

node-tests/acceptance/fixtures/config-name/config/environment.js

@@ -8,10 +8,10 @@ describe('Unit: androidLinkTags()', function() {
     var manifest = {};
     var config = {};
     var expected = [
-      '<link rel="manifest" href="/manifest.json">'
+      '<link rel="manifest" href="/manifest.webmanifest">'
     ];
 
-    assert.deepEqual(androidLinkTags(config, 'manifest.json'), expected);
+    assert.deepEqual(androidLinkTags(config, 'manifest.webmanifest'), expected);
   });
 
   it('uses rootURL if defined', function() {
@@ -20,24 +20,9 @@ describe('Unit: androidLinkTags()', function() {
       rootURL: '/foo/bar/'
     };
     var expected = [
-      '<link rel="manifest" href="/foo/bar/manifest.json">'
+      '<link rel="manifest" href="/foo/bar/manifest.webmanifest">'
     ];
 
-    assert.deepEqual(androidLinkTags(config, 'manifest.json'), expected);
-  });
-
-  it('uses name from configuration', function() {
-    var manifest = {};
-    var config = {
-      rootURL: '/foo/bar/',
-      'ember-web-app': {
-        name: 'other-name.foo'
-      }
-    };
-    var expected = [
-      '<link rel="manifest" href="/foo/bar/other-name.foo">'
-    ];
-
-    assert.deepEqual(androidLinkTags(config, 'manifest.json'), expected);
+    assert.deepEqual(androidLinkTags(config, 'manifest.webmanifest'), expected);
   });
 });