Configure your angular application with Prerender or SSR and PWA
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 the 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 angular application performance by opting for options one by one. I will have all list in another article but here I am mainly focusing on what features are available to improve Angular application performance.
Create Angular Application with mostly used version.
Integrate Angular Universal framework.
Dynamic web application - Server-Side Rendering (SSR)
Static web application - Prerendering
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 -
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.
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
Lighthouse Report: Using 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 -
Ability to run offline
Background processing in service workers in a separate thread
Support for push notifications
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.
"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",
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
Lighthouse Report: Using 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.