feat(@angular/pwa): add content for when javascript is not available

packages/angular/pwa/pwa/index.ts

@@ -66,27 +66,42 @@ function updateIndexFile(options: PwaOptions): Rule {
     const lines = content.split('\n');
     let closingHeadTagLineIndex = -1;
     let closingHeadTagLine = '';
-    lines.forEach((line, index) => {
+    let closingBodyTagLineIndex = -1;
+    let closingBodyTagLine = '';
+    lines.forEach((line: string, index: number) => {
       if (/<\/head>/.test(line) && closingHeadTagLineIndex === -1) {
         closingHeadTagLine = line;
         closingHeadTagLineIndex = index;
       }
+
+      if (/<\/body>/.test(line) && closingBodyTagLineIndex === -1) {
+        closingBodyTagLine = line;
+        closingBodyTagLineIndex = index;
+      }
     });
 
-    const indent = getIndent(closingHeadTagLine) + '  ';
-    const itemsToAdd = [
+    const headTagIndent = getIndent(closingHeadTagLine) + '  ';
+    const itemsToAddToHead = [
       '<link rel="manifest" href="manifest.json">',
       '<meta name="theme-color" content="#1976d2">',
     ];
 
-    const textToInsert = itemsToAdd
-      .map(text => indent + text)
+    const textToInsertIntoHead = itemsToAddToHead
+      .map(text => headTagIndent + text)
       .join('\n');
 
+    const bodyTagIndent = getIndent(closingBodyTagLine) + '  ';
+    const itemsToAddToBody
+      = '<noscript>Please enable JavaScript to continue using this application.</noscript>';
+
+    const textToInsertIntoBody = bodyTagIndent + itemsToAddToBody;
+
     const updatedIndex = [
       ...lines.slice(0, closingHeadTagLineIndex),
-      textToInsert,
-      ...lines.slice(closingHeadTagLineIndex),
+      textToInsertIntoHead,
+      ...lines.slice(closingHeadTagLineIndex, closingBodyTagLineIndex),
+      textToInsertIntoBody,
+      ...lines.slice(closingBodyTagLineIndex),
     ].join('\n');
 
     host.overwrite(path, updatedIndex);

packages/angular/pwa/pwa/index_spec.ts

@@ -93,6 +93,8 @@ describe('PWA Schematic', () => {
 
     expect(content).toMatch(/<link rel="manifest" href="manifest.json">/);
     expect(content).toMatch(/<meta name="theme-color" content="#1976d2">/);
+    expect(content)
+      .toMatch(/<noscript>Please enable JavaScript to continue using this application.<\/noscript>/);
   });
 
   it('should update the build and test assets configuration', () => {