Progressive Web Apps with Angular

Key Takeaways

a progressive web app or pwa will make a traditional web application behave more like a native mobile app in this episode we're going to take an angular 4 application and make it 100 compliant with google's pwa spec to do this we're going to create an app manifest with a bunch of mobile icons we're going to cache our app offline with a service worker and we're going to serve it over a secure https connection when that's all said and done we'll be able to run our app through the lighthouse chrome plugin which is maintained by google which will tell us whether or not we're meeting all the pwa requirements as well as give us some feedback on performance and best practices not only will this provide a better user experience but it will also bring up this ad to home screen banner on android devices or any other program that supports progressive web apps currently it's not supported in ios safari or microsoft edge but they are moving in that direction so they probably will be supported in the future another cool feature we're not going to talk about in this video is push notifications but i do have another video covering that topic so make sure to check that out as well the first step is to install the lighthouse plugin for chrome you can get it in the chrome store and it's what we're going to use to generate the actual audit on the site the next step is to create the manifest.json file in the source directory of your project the purpose of this file is to tell browsers exactly how to handle your web app for example your app should have a name and some theme colors and you'll also want to tell it whether or not to display in portrait or landscape then we need to generate some icons there's plenty of places on the internet where you can have this all done automatically with just a single base logo you need to have a variety of icons to handle different mobile devices and operating systems after you generate the icons drop them into your assets folder in angular and then add them to the manifest each icon will need to have its own source size and type specified that's it for the manifest there's plenty of other things we could add here but this is the bare minimum that we need for now the next thing we need to do is link our manifest in the index.html as well as provide some other meta tags we have a variety of meta tags here that are basically all telling different browsers that our site is mobile app capable then the only other thing we need to do is link to the manifest that we just created we also need to register it in the angular cli so we can do that by adding it to the assets array to ensure it's in our production build that's it for the first part of the process now we need to start building a service worker that will cache the page for offline capabilities this diagram shows the basic process the service worker will cache the assets on the user's device and if the internet is out then it will serve up whatever's in the cache to give the user some interactivity when there's no connection you can actually test this out now on our live fire starter demo app first visit the app with an active connection and then turn off the internet connection and refresh the page the website on the left has no offline cache so it just gets the standard error while firestarter on the right has an offline cache with the service worker so it gets a full web page displayed anyway to implement this feature we can actually pick up right where we left off in the index.html we'll go down to the closing body tag and we're going to write a script that will register the service worker it's extremely simple it just checks if the navigator has a service worker and if so it calls serviceworker.register followed by the service worker name currently the serviceworker.js file doesn't exist but we're going to use a package called sw precache to build it automatically in the next step sw precache is a popular open source library developed by google that we're going to use to write the service worker code for us automatically first we install the webpack version of the library to our development environment using mpm then create a new file called precacheconfig.js in the root of your project inside the file we first import sw precache and then we'll set our configuration variables i'd like to point out that the navigate fallback whitelist is necessary if you're using firebase oauth so don't forget to include it if you are sw precache is going to create the service worker right after our production build is created in the dist folder in this example we're going to cache all javascript and css assets but you can customize this any way you want based on your own app configuration to use this script we're going to create a custom command in the package.json file we create a command called pwa for progressive web app it first runs ng build production and then it runs sw precache in the dist folder where that production build lives and uses the configuration that we just supplied then from the command line we can just run npm run pwa as you can see it does our normal production build with ahead of time compilation and then after that's done it generates the service worker now let's actually go into the disk folder and take a look at the service worker we have an array of a bunch of cached assets that will be served when the app is offline then we have a bunch of event listeners in this file that will handle the management of the cache for the user as well as trigger that install banner on compatible devices the only thing left to do is deploy the app it's required that your app be served over an https connection with an ssl certificate if you're deploying with firebase this is configured automatically but any other hosting over https should work if you are using firebase just run firebase deploy only hosting and then we can validate everything with the lighthouse plugin you use the plugin by just clicking it and running generate report it's really that easy at this point our app is scoring 100 on the pwa score which means it's installable on compatible devices but every app's different so you may have other issues you have to address beyond this if you get stuck anywhere make sure to join our slack team and we'll be more than happy to help you out if this video helped you please like and subscribe and if you want to support the channel consider becoming a pro member at angularfirebase.com you'll get a free copy of my book as well as one-on-one project consulting thanks for watching and i'll see you next time you