Transform a started angular 4 project with angular-cli to a Progressive Web App

createPWA.bat

@echo off
if [%1]==[] (
	@echo  "Project name missing !!"
	goto eof
)
if exist %~s1\NUL (
	@echo  "Project Exist !!"
	goto eof
)

REM UPDATE angular cli
REM call npm install -g @angular/cli@latest
call ng new %1 
cd %1
REM INSTALL material design
call npm install --save @angular/material
REM INSTALL ANIMATION
call npm install --save hammerjs
REM ADD local storage
call npm install angular-async-local-storage --save
REM ASS Service Worker
call npm install @angular/service-worker
REM transform to PWA
call node ..\updatePWA.js
REM create default directory
mkdir src\app\providers
mkdir src\app\models
mkdir src\app\pipes
REM create Home Page
call ng g component home
REM jspdf
:eof
pause

updatePwa.js

/************************************************************************************/
/* Update angular 4 project to PWA                                                  */
/************************************************************************************/
/* Usage                                                                            */
/* create your angular project :                                                    */
/*                  -   ng new my-project                                           */
/*                  -   cd my-project                                               */
/*                  -   npm install @angular/service-worker                         */
/*                  -   node  [PATH OF THIS SCRIPT]/udatePWA.js                     */
/* Don't miss to create icons with (example) https://realfavicongenerator.net/      */
/************************************************************************************/
/* files not tested before apply modifications, be carefull                         */
/* Activate serviceWorker in .angular-cli.json                                      */
/* Declare manifest.json in assets in .angular-cli.json                             */
/* Create manifest.json file in src/assets/                                         */
/* Add manifest, icons and compatibility in index.html                              */
/************************************************************************************/
/* 2017 - Diyfr                                                                     */
/************************************************************************************/

var fs = require('fs');
var manifest =JSON.parse( '{"name":"[NAME]","short_name":"[NAME]","theme_color":"#ff1744","background_color":"#212121","display":"standalone","orientation":"portrait","start_url":"/index.html","icons":[{"src":"assets/icons/icon-72x72.png","sizes":"72x72","type":"image/png"},{"src":"assets/icons/icon-96x96.png","sizes":"96x96","type":"image/png"},{"src":"assets/icons/icon-128x128.png","sizes":"128x128","type":"image/png"},{"src":"assets/icons/icon-144x144.png","sizes":"144x144","type":"image/png"},{"src":"assets/icons/icon-152x152.png","sizes":"152x152","type":"image/png"},{"src":"assets/icons/icon-192x192.png","sizes":"192x192","type":"image/png"},{"src":"assets/icons/icon-384x384.png","sizes":"384x384","type":"image/png"},{"src":"assets/icons/icon-512x512.png","sizes":"512x512","type":"image/png"}]}');

var content ='\n\t<meta name="msapplication-TileColor" content="#b92b27">\n'+
'\t<meta name="msapplication-TileImage" content="assets/icons/mstile-150x150.png">\n'+
'\t<meta name="msapplication-config" content="assets/icons/browserconfig.xml">\n'+
'\t<meta name="theme-color" content="#ff1744">\n'+
'\t<meta name="apple-mobile-web-app-capable" content="yes">\n'+
'\t<meta name="apple-mobile-web-app-status-bar-style" content="black">\n'+
'\t<link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg" color="#b92b27">\n'+
'\t<link rel="icon" type="image/x-icon" href="favicon.ico">\n'+
'\t<link rel="manifest" href="assets/manifest.json">\n'+
'\t<link rel="icon" type="image/png" href="assets/icons/favicon-32x32.png" sizes="32x32">\n'+
'\t<link rel="icon" type="image/png" href="assets/icons/favicon-16x16.png" sizes="16x16">\n'+
'\t<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">\n'+
'\t<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/apple-touch-icon-120x120.png">\n'+
'\t<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-touch-icon-152x152.png">\n'+
'\t<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon-180x180.png">\n';

    /**
     * {JSDoc}
     *
     * The splice() method changes the content of a string by removing a range of
     * characters and/or adding new characters.
     *
     * @param {String} current string 
     * @param {number} start Index at which to start changing the string.
     * @param {number} delCount An integer indicating the number of old chars to remove.
     * @param {string} newSubStr The String that is spliced in.
     * @return {string} A new string with the spliced substring.
     */
    var splice = function(str, start, delCount, newSubStr) {
        return str.slice(0, start) + newSubStr + str.slice(start + Math.abs(delCount));
    };


fs.readFile('.angular-cli.json', function (err, data) {
    var json = JSON.parse(data);
	json.apps[0].serviceWorker=true;
    json.apps[0].assets.push("manifest.json");
	console.log("Enable service Worker");
	var jsonStr = JSON.stringify(json, null, '\t');
    fs.writeFile('.angular-cli.json', jsonStr,(err) => {
		if (err) throw err;
		console.log('.angular-cli.json updated !');
		createManifest(json.project.name);
	});
});

function createManifest(name){
	manifest.name = name;
	manifest.short_name = name;
	console.log("Add manifest");
	var jsonStr = JSON.stringify(manifest, null, '\t');
	fs.writeFile("src/assets/manifest.json", jsonStr,(err) => {
		if (err) throw err;
		console.log('manifest.json created !');
		updateHtml();
	});
}

function updateHtml(){
	fs.readFile('src/index.html', function (err, data) {
		var index = data.indexOf("<head>");
		var result = splice(data,index+6,0,content);
		console.log("Update index.html Header");
		console.log("generate icons https://realfavicongenerator.net/");
		fs.writeFile('src/index.html', result,(err) => {
			if (err) throw err;
			console.log('index.html updated !');
		});
	});
}