MileciaIt's very likely that you are reading this on your phone or some other kind of mobile device. Every day more and more people are getting online on their phones. It's convenient and it's not going to change. Mobile isn't the future anymore, it's here and we have to keep learning new techniques to make our web apps more responsive. That's one of the reasons progressive web apps (PWAs) are rising in popularity.
The best part is that they aren't difficult to create and you don't have to make huge changes to your code. On top of that, there are a number of tools you can use to gauge how progressive your web apps really are. You get some really cool functionality for your web apps when you make them PWAs. This is quick walk-through on what PWAs are, why we bother making them, and how to actually make one in Angular.
What a PWA is
A progressive web app is a lot more simple than it sounds. Here's a list of the things that make a web app progress:
- Your site follows HTTPS protocol
- The pages are responsive across mobile devices, including tablets
- Your site works cross-browser
- Transitions shouldn't feel slow
- All of the URLs load when the app is offline
- There's metadata for Add to Home screen
- The first load is really fast
- Every page has a URL
This list is everything you need to make a simple PWA. None of these steps seem difficult, right? That's because the first half of these things are best practices you should be following in any web app. In case you're wondering, making transitions feel faster means you are giving the user some kind of feedback, like a loading wheel, while they wait for a page to load.
The other four things on the list are what really bring home what PWAs are good for. You need metadata so the user can save your site to their home screen just like an app would appear. We'll do that with a manifest.json file. You can make the app load offline with some cool caching you'll do with service workers. Making the first load of your application really fast is just testing and optimizing code. Lastly, giving each page its own URL might be tricky if you're working on a single-page application (SPA), but it shouldn't be extraordinarily difficult.
So now you know what a PWA is made of. It's a web application that follows best practices, loads offline, and works fast. The progressive part comes from the fact that you can slowly upgrade your existing apps to make them PWAs. Most likely you already have the first four things done which means you're already half way there.
Why bother with making one
Progressive web apps have become such a buzz term that it's hard to remember why we care about them in the first place. They make mobile browsing more native-like across all devices without an additional code base. Depending on your application, you might be able to get away with just a PWA instead of building mobile apps. Some apps don't need super performance or permissions to make changes on a device so a PWA would be a great choice.
When you're building your app, you can make it a PWA to begin with and potentially avoid the need for making native mobile apps. That's the main reason you would bother making a PWA. Once you have made it responsive, there aren't many more steps you need to take and the benefits are worth that extra effort.
How to make a PWA
Now it's what you've been waiting for. We're going to make a really simple PWA using Angular 7. If you don't have the Angular CLI installed and you want to follow along, make sure you run this command in the directory for the project you want to make.
npm install -g @angular/cli
Then you can quickly create your Angular 7 app by running this command.
ng new client
I usually call my front-end stuff "client", but you can name your new app anything you want to. Angular makes it really easy to make PWAs, like most of the popular frameworks do. You can run this command to make your new Angular app or your existing ones progressive. Make sure you are in the root directory before you run this.
ng add @angular/pwa
This adds a couple of things for you. You get a pre-generated manifest file that you could edit, a ngsw-config.json file that sets the configs for your service worker, and the ServiceWorkerModule gets imported into the app but will only be used when you make a production build. This gives you the next two things on your PWA checklist!
The last two items are up to how you want to run your project. There are plenty of ways to speed up your app, like minifying files or lazy loading and handling the URLS is super dependent on how you handle routing. That'll probably generate most of your app's URL.
If you noticed, we didn't have to write any extra code to make this new Angular app into a PWA. All you had to do was run an ng command and boom. You have a functioning PWA. Now you can build your app and run it in production mode to see it in action. One quick way to see if your PWA is working is to check if the service worker is available.
You can do this in the Chrome Dev Tools by going to the Application tab and then checking the Service Workers panel. If you see a service worker available, your PWA is working! Now all you have to do is build your app like you normally would, keep that responsive design in mind, and make the rest of your Angular components flow.
It's always easy to say how simple it is to make a PWA when you're starting from a brand new app. Where it gets complicated is when you are trying to upgrade an existing app that may or may not be responsive, it might not be cross-browser, or it could have issues loading quickly. That's when you have to refactor code and update packages and it can get messy.
Not to mention how weird the service workers can be. Have you needed to upgrade an app, Angular or something else, to be a progressive web app? Do you have any funny stories or advice for people going through that crazy process? I would say that you should definitely make sure that app is responsive first. It's probably going to take the most time and it will make a huge difference for user experience.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
