Udemy: Progressive Web Apps

In the Udemy: Progressive Web Apps (PWA) course by Maximilian Schwarzmuller, Max outlines the following manual steps in Section 13: SPAs and PWAs, Lesson 203 to make a PWA out of any Angular application.  However, they are a bit out of date (as he suggests that they may be).  For an updated (simplified) process of adding PWA to an Angular application, see my write-up.

Manual Steps:

• Modify the angular-cli.json file:  Add serviceWorker": true, in the apps[] portion of this file.
• Add service worker package via npm
• Max then highlights that in order to use Service Workers in Angular, we need to tell Angular to build this as a "Production" build.

npm install --save @angular/service-worker

ng build --prod

Max goes on to explain that when we create a production build, the Angular CLI creates a couple of new files that suggest they are specific to the Service Workers. He also opens up the ngsw-manifest.json file to see what is contained in it and explains that these files are all of this project's static assets (bundled, minified, etc).  It's basically telling the Angular Service Worker that all of these files should be "pre-cached" (aka, "pre-fetched"?).  There is a hash associated with each static asset filename which is used to identify when a new version of this static asset is available.

• Max also notes that the production build also creates a sw-register.xxx file that registers the Angular Service Worker with the application.
• Max then points out the worker-basic.min.js file and says that this is the Service Worker package which is all setup and managed by the Service Worker.
• Max then goes on to point out that the Assets (fonts, icons, etc) are missing at this point (if using his manual process of converting an Angular App to a PWA). To solve this, Max recommends creating an ngsw-manifest.json file at the Project Root directory (not to be confused with the dist/ngsw-manifest.json file that is automatically created by the Production build step).  NOTE: When using the Angular CLI to add PWA functionality as described above, the CLI automatically creates a file called ngsw-config.json that appears to serve as the same functionality, but there are a lot of differences between these two files.
• Next, Max talks about adding a manifest.json file to the assets folder and makes a copy of the content of a manifest file from somewhere into this file, but I don't know where he got it.  Maybe he got it from the "manifest.json" file that he created in the "Manifest" Modules (A hint I see is that the "Instagram as a Progressive Web App" was the original application name) Yup, found it in app-manifest-03--final.zip?  NOTE: In the Angular CLI automatic version (which presumably uses a Schematic to automate all of this), the equivalent file is the src/manifest.webmanifest file.
• Finally, Max adds a <link \> line to add the manifest file to the index.html file.
• Build the new Angular application (production) with the Service Worker information applied: ng build --prod
• Max suggests, however, that it's possible to use ng serve --prod but the Angular Documentation suggests that this is NOT possible.  They say that we must use something like http-server instead. "Because ng serve does not work with service workers, you must use a separate HTTP server to test your project locally." However, ng serve --help suggests that we should be able to use the --prod option because it is still available, but it doesn't say specifically that it supports service workers.  Hmmm?

Q?: Would the manual steps outlined by Max work for AngularJS applications too?