Configuring Progressive web app in Angular.

» What is a PWA?

  1. A PWA, or Progressive Web App, is a type of web application that combines the best of both web and mobile apps.

  2. Progressive Web Apps (PWAs) are web applications built using standard web technologies such as HTML, CSS, and JavaScript. This allows developers to create PWAs using familiar web development tools and languages.

  3. PWAs are designed to work seamlessly on any platform or device with a modern web browser, such as your desktop computers, smartphones, and tablets.

  4. PWAs are responsive, they load quickly and work seamlessly offline by caching data.

» Prerequisites

  1. Make sure that you have:

    1. Angular CLI installed.
    2. Node.js and npm installed.

  2. After installing, check if it is installed properly by running the command:

ng version

» Create a new Project

  1. Now, let’s create a new Angular project. Open your terminal and run
ng new angular-pwa

This command sets up a new Angular project for us. You can replace ‘angular-pwa’ with your preferred project name.

Then let’s navigate into this project directory by running the command

cd angular-pwa

then run the following command to open this project into the code editor. and

code .

» Open VS code

  1. To add PWA capabilities to our Angular project, run
ng add @angular/pwa

  1. This command will install the necessary packages and configure our project for Progressive Web App functionality.

  2. After adding the PWA package, Angular made several changes to our project.

  3. It adds various PNG files and icons for PWA functionality.

  4. It generates a ‘ngsw-config.json’ file and a ‘manifest.webmanifest’ file for PWA configuration. Additionally, it modifies key project files, such as ‘angular.json,’ ‘package.json,’ ‘index.html,’ and ‘app.module.ts.

» Manifest File

  1. “name” and “short_name”: These define the name of your PWA

name: defines how the application will be listed.

short_name: is the name accompanying the icon on the home screen.

  1. “description”: is a brief description of what your PWA does or represents.

  2. “icons”: defines an array of images. These specify a collection of icons that represent your app on different devices and contexts.

Each icon is defined by its “src” (the image file’s path), “sizes” (dimensions in pixels), “type” (the image format), and “purpose” .

  1. “start_url”: will define the URL where your PWA should start when launched.

  2. “display”: It determines how your app should be displayed. “standalone” means it should appear as a standalone application, not in a browser window. Instead of standalone you can also use fullscreen, minimal-ui or browser

  3. “orientation”: This specifies the default orientation for the web application: “portrait” means it starts in portrait mode.

  4. “background_color”: This sets the background color displayed while your PWA is loading.

  5. “theme_color”: is the default theme color for the application.. On Android, this is also used to color the status bar.

» ANGULAR.JSON

  1. Angular.json file is used to configure various aspects of your Angular application, including assets, styles, scripts, and other settings

  2. “assets”: Lists files and directories to include as assets, such as icons and images.

  3. “scripts”: Allows you to include additional JavaScript files.

  4. “serviceWorker”: true: Enables the service worker for Progressive Web App (PWA) functionality.

  5. “ngswConfigPath”: “ngsw-config.json”: Points to the service worker configuration file.

» APP.MODULE.TS file

“app.module.ts is used to import theServiceWorkerModule for registering ngsw-config.js (only for production mode).

» Test in DevTools

  1. Oepn the terminal and run the comamnd npm start and the website will start listening on localhost4200.

  2. Right-click anywhere on the page, then select ‘Inspect’ to launch the browser’s developer tools.

  3. Within the developer tools, navigate to the ‘Application’ tab. There, you’ll find a section for the manifest file, sevice worker file and for now you will see it says no manifest file detected. Now in manifest section you will find the details such as the name, short name, description, and icons— have all retrieved from the manifest.webmanifest file file

  4. And then in service worker tab you will find no file. The reason for that is: A Progressive Web App (PWA) runs in secure HTTPS and local environments. However, it’s important to note a limitation with the Angular CLI: the service worker doesn’t function when using the ‘ng serve’ / npm start command. We will need to create a build and host it independently, that will rely on tools like ‘http-server’.

  5. So you just have to add a single line script in package.json file,

"start-pwa": "ng build --configuration production && http-server -p 8080 -c-1 dist/angular-pwa"

  1. What it will do is? It builds your Angular app in production mode. and starts an HTTP server on port 8080 to host the production build of your app.

  2. So now in termianl run the command npm start-pwa and there you will have the website running.

  3. Let’s navigate to devtools and then in application tab and in service worker you will have the service worker file activated. And in network tab you will find the files are loaded from the service worker.

» Generate a LightHouse test

  1. Now let’s generate a lighouse test. Navigate to lighthouse tab and click the analyse page load and it will take few moments to generate the report.

  2. And there you have this green checkmark on PWA.

And That’s it! You’ve successfully configured Progressive web app in Angular.

Thank You and Happy coding!😊

Topics