Updated Firebase hosting instructions

src/pages/publishing/progressive-web-app.md

@@ -14,8 +14,8 @@ Because Ionic Apps are built with web technologies, they can run just as well as
 
 The two main requirements of a PWA are a <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> and a <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a>. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this.
 
-The `@angular/pwa` package will automatically add a service worker and a app manifest to the app.
-To add this package to the app run:
+The `@angular/pwa` package will automatically add a service worker and an app manifest to the app.
+To add this package to the app, run:
 
 ```shell
 $ ng add @angular/pwa
@@ -26,63 +26,98 @@ Once this package has been added run `ionic build --prod` and the `www` director
 > By default, the `@angular/pwa` package comes with Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
 
 If an app is being deployed to other channels such as Cordova or Electron, you can remove the `"serviceWorker": true` flag from the `angular.json` file.
-The service worker can be generated though by running:
+
+The service worker can be generated by running:
 
 ```shell
 $ ionic build --prod --service-worker
 ```
 
-> Note: Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware they HTTPS will be required to take full advantage of Service Workers.
+> Note: Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
 
 ## Deploying
 
 ### Firebase
 
-Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDN's, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+
+First, if not already available, [create the project](https://console.firebase.google.com) in Firebase.
 
-First, install the Firebase CLI:
+Next, in a Terminal, install the Firebase CLI:
 
 ```shell
 $ npm install -g firebase-tools
 ```
 
-With the Firebase CLI installed run `firebase init` in the project.
-This will generate a `firebase.json` config file and configure the app for deployment.
+With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
+
+**"Which Firebase CLI features do you want to set up for this folder?"**  Choose "Hosting: Configure and deploy Firebase Hosting sites."
+
+**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.
+
+**"What do you want to use as your public directory?"** Enter "www".
+
+> Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
+
+**"File www/index.html already exists. Overwrite?"** Enter "No".
 
-> `firebase init` will present a few question, including one about redirecting URLs to `/index.html`.
-> Make sure to choose **yes** for this option, but **no** to overwriting your index.html.
-> This will ensure that routing, hard reload, and deep linking work in the app.
+A `firebase.json` config file is generated, configuring the app for deployment.
 
-The last thing needed is to make sure caching headers are being set correctly. To do this, add the following snippet to the `firebase.json` file to the hosting property:
+The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like:
 
 ```json
-"headers": [
-  {
-    "source": "/build/app/**",
-    "headers": [
+{
+  "hosting": {
+    "public": "www",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
       {
-        "key": "Cache-Control",
-        "value": "public, max-age=31536000"
+        "source": "**",
+        "destination": "/index.html"
       }
-    ]
-  },
-  {
-    "source": "ngsw-worker.js",
+    ],
     "headers": [
       {
-        "key": "Cache-Control",
-        "value": "no-cache"
+        "source": "/build/app/**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public, max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "ngsw-worker.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache"
+          }
+        ]
       }
     ]
   }
-]
+}
 ```
+
 For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
 
-The app can now be deployed by running
+Next, build an optimized version of the app by running:
+
+```shell
+$ ionic build --prod
+```
+
+Last, deploy the app by running:
 
 ```shell
 $ firebase deploy
 ```
 
-After this completes the app will be live.
+After this completes, the app will be live.