Finishing up
Lets do a quick recap, we now have a service worker enabled in our PWA and a manifest that is filled out and ready to go. These are the two things that you need in your Ionic app to make it a PWA! As you can see the only real work we did was un-comment some code and fill out some json with info about our PWA, we didn't even have to write any JavaScript! Now we can move onto the final steps, which are building our Ionic PWA using production mode so that we get the smallest bundle possible at the moment, learning what directory we need to deploy, and going over a last consideration that you should remember while making an Ionic PWA.
Ionic-app-scripts, the set of node scripts that comes with every ionic app that handles all the nasty parts of compiling an app, has both a dev build mode and a prod build mode. Dev is built for, well, development. This means that it compiles fast so that you can have quick development cycles, but this also means that it does not run the AoT compiler, does not minify and does not do any optimizations of any kind. When you run `ionic serve` you get a dev build by default as most likely you are going to be developing your app while serving. The prod build is what you want to do when you are getting ready to deploy your app. The production build does AoT compilation, minifies the code, turns on production mode in Angular itself and more. This means that you get the smallest, fastest bundle you can and lets you squeeze out every bit of performance from your app. To do a production build that we can use for our PWA you run `ionic build --prod` from in your apps directory. Be prepared that depending on how fast your machine is this may take a minute to build, but it is definitely worth it in the end!
At this point we should now have an app that is built with production mode. This means that our `www` folder is now our PWA. Yep, its that simple! To test this you can install something like http-server https://www.npmjs.com/package/http-server, `cd` into the `www` directory of your app and run `http-server`. This will serve your Ionic PWA on `localhost:8080`, which you can plug into your browser to see the PWA running! So guess what directory you need to use when you go to deploy your pwa? Thats right, just the `www` directory! There are a few ways you can deploy a PWA, from running your own web server in the cloud (or your closet (: ) to something like Firebase Hosting. I prefer to keep things simple, so i have been using Firebase Hosting lately. Their docs https://firebase.google.com/docs/hosting/ are very thorough, so i wont explain the process here, but just be sure that when it asks which directory you would like to upload you choose the `www` folder in your apps directory.
I would now just like to go over one extra consideration when your building a PWA with Ionic. We need to remember that if we use certain cordova plugins, like the bluetooth plugin, camera plugin etc etc, that these plugins do not work out of the box on the web. At first this may seem pretty lame, but the good thing is that with the power of the modern web you can already access these capabilities using standardized web api's! To get an idea of all the native things you can access from the web nowadays i recommend checking out this site https://whatwebcando.today/.
Now on to a quick note about browser support!