Hello there! Welcome to this quick guide about AngularJS web application development from scratch.

AngularJS: main information

AngularJS is a web application framework for front-end development. It was built by Google. Angular focuses on the way you use HTML to make it more suited to build actual web apps. As you probably know, HTML wasn’t created with web apps as we have today in mind. It was created for the purpose of building the static web documents.

Nowadays, a pretty big amount of apps that you visit are web applications in some way. But we are still using browsers that render HTML documents. And so this is when Angular comes in. It changes the way you write HTML to it’s more friendly for building those complex web apps that you are trying to produce.

Please, don’t misunderstand me here that ANgular is just about writing HTML. In fact, AngularJS is actually a JavaScript framework. However, pretty much all of the JavaScript that you write will be put into use through the HTML that you write. So, you’ll learn how it all works with time.

Now, I’ll show you the process of creating a simple progressive web app. Let’s get started!

Progressive web app will make a traditional web app behave more like a native mobile app. We are going to create an Angular app and make it one hundred percent compliant with google’s PWA spec. To do this, we create the app called Manifest with a bunch of mobile icons and we are going to cache it offline with a service worker and 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.

Lighthouse plugin will tell us whether or not we are 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 also bring up this ad to home screen banner on Android 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.

  1. The first step is to install the Lighthouse plugin for Chrome. You can get it from the Chrome store and it’s what we are going to use to generate the actual audit on the site.
  2. 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 colours. You’ll also want to tell it whether or not to display in portrait or landscape.
  3. Then we need to generate some icons. There are 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.
  4. 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. There are a lot of other things we could add here, but this is the bare minimum we need for now.
  5. The next thing we need to do is to 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.
  6. Then the other thing to do is link to the manifest that we have just created. We also need to register in the Angular CLI, so we can do it by adding to the assets array to ensure it’s in our production building.

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. It means that the service worker will cache the asserts 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 is no connection.

To implement this feature we can actually pick up right where we left off in the index.html. We go down to the closing body tag and we’re going to write a script that will register this 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.

It can happen that the serviceworker.js file does not exist, and in this case you should 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.

  1. Firstly, we install the webpack version of the library to our development environment using npm.
  2. Then create a new file and call it precache-config.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 for using firebase oauth. So, do not forget to include it.
  3. Sw-precache is going to create the service worker right after production build is created in the dist folder. In this example we are going to cache all JavaScript and CSS assets, but you can customize this in any way you want, based on your own app configuration.
  4. To use this script we are going to create a custom command in the package.json file. We create a command called pwa. 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 have just supplied.
  5. 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 after it is done, it generates the service worker.
  6. 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.
  7. The only thing left to do is to deploy the app. It’s required that your app is 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, deploy only hosting and then we can validate everything with the Lighthouse plugin.
  8. 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 is different, so you may have other issues you have to adress beyond this.

Conclusion

To sum everything up, I really hope that this short guide has helped you with your first steps in Angular web development. Come back for more and stay in touch!