Configure your angular application with Prerender or SSR and PWA

LazyPanda
LazyPanda

In the era of 2022, the web application has had to work faster with any kind of device, as now the user does not have any patience to wait to get into your application. There are several competitor sites that are there to serve our purpose by solving problems by one another. And the solution states correctly and presents the user with useful information quickly that the solution will be picked up. So, in the case of Time, Performance & solution all are equally important for any kind of application.  

In the case of Angular application, there are many ways to improve the application performance, which I learned one by one by solving challenges. Earlier days, I created an angular application and the performance and SEO were not implemented correctly. It took a lot of time to understand the root cause and get fixed one by one. 

 

The following could be your case when you might find that your angular application still not holding good and you do need to improve the performance. Most of us like noob developers, trying very hard to get things being done properly. That will not happen in a day definitely as we are not aware of the features are being available to fit our application. Once we get more problems or challenges, we are trying to find the solutions, and believe me, the Web (internet) is one of the best mediums to get all particles and put those together and build proper stuff to serve the business. Eventually, we can modify one another whenever new updates or features are available.

I have improved much angular application performance by opting options one by one. I will do have all list in another article but here I am mainly focusing on what are the features are being available to improve Angular application performance. 

  1. Create Angular Application with mostly used version.
  2. Integrate Angular Universal framework.
    1. Dynamic web application - Server-Side Rendering (SSR)
    2. Static web application - Prerendering
  3. Integrate PWA

Let's make our hands dirty...


Create an Angular application (v 11 / 12 / 13)

I believe you do have any of angular-CLI been installed on your device, and already created any angular application using ng new command. If not, then let's create one - 

ng new seo-demo-app

 

Once the application is created, you can make some simple changes like 2 routes, 2 API calls, 1 details page. I already have one sample application and there I am going to make the changes. and let's configure Angular Universal on your application.

 

Let's see the Lighthouse report after implementing the router, API, and details page -

light-house-report-angular

 


Configure Angular Universal for SSR & Prerender

I already have two long blogs for configuring Angular Universal and during the process if you are facing any challenges, how you can resolve those. You can check those as well. 

First tutorial - 

Second Tutorial - 

Codebase with only Angular Universal enabled application, you can find from here.

Let's see the Lighthow report with the Angular Universal application.

Lighthouse Report: Using SSR

light-house-report-angular-universal-SSR

Lighthouse Report: Using Prerender

light-house-report-angular-universal-prerender


Configure PWA on Angular Universal App

A lot of benefits you can get using Angular universal, but still, I want to achieve some more features such as - 

  1. Ability to run offline
  2. High performance
  3. Background processing in service workers in a separate thread
  4. Support for push notifications
  5. An icon on the phone’s home screen

 

To have all the above functionality, we need to configure angular PWA to our angular Universal app. First, install the following - 

ng add @angular/pwa

This command will make all necessary changes to get PWA to be worked. 

  • Adds the @angular/service-worker package to your project.
  • Enables service workers to build support in the CLI.
  • Imports and registers the service worker in the app module.
  • Updates the index.html file:
  • Includes a link to add the manifest.webmanifest file.
  • Adds meta tags for theme-color.
  • Installs icon files to support the installed Progressive Web App (PWA).
  • Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

After installation, and with prod build you can see under dist folder there is a ngsw.json file. Which will going to enable the PWA configuration and register service worker for your application. 

Once you run the npm run prerender command to build your application, you will notice the ngsw.json file has not been moved under dist folder. For that you need some more steps to enable the ngsw.json file under dist in order to work PWA features.

In the case of prerender command you can see the ngsw.json is not present in your dist folder for that you need to update the package.json file with the below command. 

"scripts": {

"ng": "ng",

"build": "npm run build:ssr",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e",

"dev:ssr": "ng run demo-seo:serve-ssr",

"serve:ssr": "node dist/demo-seo/server/main.js",

"build:ssr": "ng build --prod && ng run demo-seo:server:production",

"list-routes": "node ./scripts/list-routes.js",

"pwa-prerender-hack": "sed -i -e \"s/serviceWorker: false/serviceWorker: true/g\" ./node_modules/@nguniversal/builders/src/prerender/index.js",

"prerender": "npm run pwa-prerender-hack && ng run demo-seo:prerender --routesFile routes.txt",

"start": "http-server ./dist/demo-seo/browser"

},

 

If you are on the Windows platform, you might see the "sed" has not been found. For that, you need to install it from the following link - http://gnuwin32.sourceforge.net/packages/sed.htm

After installation, please set the environment variable under Path - "C:\Program Files (x86)\GnuWin32\bin"

 

To enable ngsw.json under dist/<project-name>/browser you need to update follwing command in package .json file. 

"scripts": {

"ng": "ng",

"build": "npm run build:ssr",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e",

"dev:ssr": "ng run demo-seo:serve-ssr",

"serve:ssr": "node dist/demo-seo/server/main.js",

"build:ssr": "ng build --prod && ng run demo-seo:server:production",

"list-routes": "node ./scripts/list-routes.js",

"prerender": "ng run demo-seo:prerender --routesFile routes.txt && ./node_modules/.bin/ngsw-config ./dist/demo-seo/browser ./ngsw-config.json",

"start": "http-server -p 4500 -c-1 ./dist/demo-seo/browser"

},

 

Also, you need to update the ngsw-config.json file as well, in order to cache the route based index.html files as well. 

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js",
         
"/**/*.html"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
 
"dataGroups": [
    {
      "name": "all-country",
      "urls": [
        "/v3.1/all"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "10d",
        "timeout": "10s"
      }
    },
    {
      "name": "each-country",
      "urls": [
        "/v3.1/name/"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "10d",
        "timeout": "10s"
      }
    }
  ]

}

 

now you are all done with caching all files and offline cache for your REST APIs. 

 


Now let's see the Lighthouse report for Angular Universal + SSR + PWA & Angular Universal + Prerender + PWA. 

Lighthouse Report: Using SSR + PWA

light-house-report-angular-universal-SSR-pwa

Lighthouse Report: Using Prerender + PWA

light-house-report-angular-universal-prerender-pwa

 

Looks good, though the results are the same with real applications with multiple functionalities the report will get increase accordingly from Angular Universal to PWA. It makes your application installable and the service worker has been registered. 

 


You can find the sample codebase from the following Github repository - https://github.com/lazypanda-instance/seo-demo-app/tree/ng11-universal-pwa

There are more functionalities that can be included with PWA configuration, I will try to cover the rest of the functionalities in another article. Till stay tuned.

Happy Coding!

- LP