refactor(@angular/pwa): rename manifest.json to manifest.webmanifest

christianliebel · hansl · commit 2326850374cd · 2018-12-26T13:19:43.000-08:00
Using the `webmanifest` file extension makes it easier to target the web app manifest in server configs and apply the correct MIME type (see w3c/manifest#689 (comment)).
diff --git a/packages/angular/pwa/pwa/files/root/manifest.webmanifest b/packages/angular/pwa/pwa/files/root/manifest.webmanifest
diff --git a/packages/angular/pwa/pwa/index.ts b/packages/angular/pwa/pwa/index.ts
@@ -74,7 +74,7 @@ function updateIndexFile(path: string): Rule {
 
     rewriter.on('endTag', (endTag: { tagName: string }) => {
       if (endTag.tagName === 'head') {
-        rewriter.emitRaw('  <link rel="manifest" href="manifest.json">\n');
+        rewriter.emitRaw('  <link rel="manifest" href="manifest.webmanifest">\n');
         rewriter.emitRaw('  <meta name="theme-color" content="#1976d2">\n');
       } else if (endTag.tagName === 'body' && needsNoScript) {
         rewriter.emitRaw(
@@ -156,7 +156,7 @@ export default function (options: PwaOptions): Rule {
     }
 
     // Add manifest to asset configuration
-    const assetEntry = join(normalize(project.root), 'src', 'manifest.json');
+    const assetEntry = join(normalize(project.root), 'src', 'manifest.webmanifest');
     for (const target of [...buildTargets, ...testTargets]) {
       if (target.options) {
         if (target.options.assets) {
diff --git a/packages/angular/pwa/pwa/index_spec.ts b/packages/angular/pwa/pwa/index_spec.ts
@@ -71,14 +71,14 @@ describe('PWA Schematic', () => {
 
   it('should create a manifest file', (done) => {
     schematicRunner.runSchematicAsync('ng-add', defaultOptions, appTree).toPromise().then(tree => {
-      expect(tree.exists('/projects/bar/src/manifest.json')).toEqual(true);
+      expect(tree.exists('/projects/bar/src/manifest.webmanifest')).toEqual(true);
       done();
     }, done.fail);
   });
 
   it('should set the name & short_name in the manifest file', (done) => {
     schematicRunner.runSchematicAsync('ng-add', defaultOptions, appTree).toPromise().then(tree => {
-      const manifestText = tree.readContent('/projects/bar/src/manifest.json');
+      const manifestText = tree.readContent('/projects/bar/src/manifest.webmanifest');
       const manifest = JSON.parse(manifestText);
 
       expect(manifest.name).toEqual(defaultOptions.title);
@@ -90,7 +90,7 @@ describe('PWA Schematic', () => {
   it('should set the name & short_name in the manifest file when no title provided', (done) => {
     const options = {...defaultOptions, title: undefined};
     schematicRunner.runSchematicAsync('ng-add', options, appTree).toPromise().then(tree => {
-      const manifestText = tree.readContent('/projects/bar/src/manifest.json');
+      const manifestText = tree.readContent('/projects/bar/src/manifest.webmanifest');
       const manifest = JSON.parse(manifestText);
 
       expect(manifest.name).toEqual(defaultOptions.project);
@@ -103,7 +103,7 @@ describe('PWA Schematic', () => {
     schematicRunner.runSchematicAsync('ng-add', defaultOptions, appTree).toPromise().then(tree => {
       const content = tree.readContent('projects/bar/src/index.html');
 
-      expect(content).toMatch(/<link rel="manifest" href="manifest.json">/);
+      expect(content).toMatch(/<link rel="manifest" href="manifest.webmanifest">/);
       expect(content).toMatch(/<meta name="theme-color" content="#1976d2">/);
       expect(content)
         .toMatch(/<noscript>Please enable JavaScript to continue using this application.<\/noscript>/);
@@ -118,7 +118,7 @@ describe('PWA Schematic', () => {
     schematicRunner.runSchematicAsync('ng-add', defaultOptions, appTree).toPromise().then(tree => {
       const content = tree.readContent('projects/bar/src/index.html');
 
-      expect(content).toMatch(/<link rel="manifest" href="manifest.json">/);
+      expect(content).toMatch(/<link rel="manifest" href="manifest.webmanifest">/);
       expect(content).toMatch(/<meta name="theme-color" content="#1976d2">/);
       expect(content).not
         .toMatch(/<noscript>Please enable JavaScript to continue using this application.<\/noscript>/);
@@ -134,7 +134,7 @@ describe('PWA Schematic', () => {
       const targets = config.projects.bar.architect;
 
       ['build', 'test'].forEach((target) => {
-        expect(targets[target].options.assets).toContain('projects/bar/src/manifest.json');
+        expect(targets[target].options.assets).toContain('projects/bar/src/manifest.webmanifest');
       });
       done();
     }, done.fail);
