Progressive web applications are a kind of web applications that are created with technologies to perform activities like native apps. The best part of progressive web apps is that it works efficiently when network coverage is not reliable. Plus, these web applications do not require installation like native apps, and these apps are efficient and faster than traditional native apps.
In this article, we have mentioned steps to build progressive web apps with Angular and use Firebase to deploy the app.
Prerequisites
Before getting into the details of building progressive web apps, let's first see the environment you need to set up on your system. You can build a PWA app with Angular 14 or any other version of Angular.
Install Node.js locally on your system.
The latest version of Google Chrome should be on your system.
Install Lighthouse Chrome Extension which later helps you test if your application is progressive.
You need a Google Account if you want to connect it to Firebase.
Now that we have taken care of the prerequisites, let’s dive into the steps that you need to follow for building a responsive PWA with Angular.
Step 1: Create a new project
You first need to create a new project with Angular CLI. Angular by default generates test files that you will not need in creating a project. Hence use - -skip-tests flag in the following command.
This will prompt you with some configuration and the options are below.
A new project directory will be created named ng-pwa
Navigate it to another directory.
You have successfully created a new project in Angular CLI.
Step 2: Create a Web Application Manifest
A web app manifest is a JASON file that includes a configuration that users can home save on their system’s home screen. The behavior and appearance will also be represented with it at the time of the home screen.
In order to create a web app manifest for your application, use a new file name manifest.json in the src folder root.
nano src/manifest.json
Add the following code to the file.
The above code is created in a way to support an app for different dimensions including mobile, tablet, and desktop. Therefore, make sure to add duplicate icons for different device sizes.
After you have added images, visit index.file and add the below-given head section.
The web app manifest will not be added automatically to the build folder until we ask Angular to do so. We will add ty to the build folder by adding manifest.json to the apps section of the assets array of .angular-cli.json file.
In case you have to build your app with Angular 6 then you need to edit angular.json instead of the .angular-cli.json.
Step 3: Add Service Workers
One of the foundation parameters for progressive web apps is service workers. It is written in JavaScript which helps cache necessary files and assets, which helps an app function at the time of network coverage unavailability. It can intercept requests and manages all the responses from the server.
Build an app with webpack prior to production. Install the new package and configure it with npm package sw-precache-webpack-plugin
Install the package by using the npm install command from the directory ng-pwa.
Create a file called precache-config.js in the installed package.
Add up the below-given file
The sw-precache-webpack-plugin file is configured with precache-config.js file by using literal object-value pairs.
Now to finish the Angular service worker environment set up in the system, create npm command or script which you can use to build an app and auto-generate the file of the service worker in the build folder. Add the following commands in package.json.
Step 4: Create the View
Since we are creating a PWA Angular, we just need a single view.
Edit the code app.component.html and replace it with new code. The following is the code you can use.
The above code builds a new web page including an image, three links, and some text.
Now edit the styles.css and replace the code with the following.
Step 5: Deploy your Application
In order to make your app work properly, it is important to provide a secure connection. Therefore, we will be using Firebase to deploy our Angular app.
Singin to Firebase Console and set up an environment.
After signing in, click on the ‘Add project’ option to create a new project.
You’ll be asked to enter the project’s name.
In this tutorial, we are only interested in the Hosting page and Develop section. Navigate back to the command terminal and run npm install in order to install the firebase-tools package.
Now this package will enable us to test and deploy to Firebase from the terminal.
Run the following command from the ng-pwa directory to create a PWA Angular app and auto-generate the service worker.
Below is the custom script that is generated prior to and created in our application production.
Source: digitalocean.com
Now run the below command and login to the Firebase.
Now enter your credentials like account information into the terminal.
Then answer the below questions as shown.
Source: digitalocean.com
Now run the following command to deploy the application as shown below.
Now the following app to see the application.
Source: digitalocean.com
Troubleshooting
In case the ‘Firebase Hosting Setup Complete’ message pops up instead of your application, you might have overwritten your index.html. You need to rebuild with firebase init, npm run pwa and select the option ‘No’.
Step 6: Lighthouse testing
Open the hosted app in your Google Chrome web browser to test your PWA. Lighthouse can be chosen by clicking the Extensions icon. You will see a popup and be asked to click the Generate report button. You will momentarily see a screen with the message "Waiting for Lighthouse results" after clicking the button. You will get a screen with the test results after it is finished.
This Angular PWA example will help you build an interactive and secure web application with Angular.
No comments:
Post a Comment