How to develop an Angular Progressive Web Application

by  Bozo Penovic

Progressive web applications are web applications served through the web browser, built using common web technologies such as HTML, CSS, and JavaScript, with the ability to work offline, sending push notifications and accessibility to device hardware components. They are often designed with responsive principles, which means the design is adjusted for the screen size and makes it look like a native application.

In comparison to developing native applications, one of the main benefits of developing PWA applications is less built time and reduced costs. Furthermore, you do not need developers for each platform (Android, iOS) because they are build using common technologies. These applications are a good use-case for internally used applications that are needed quickly or for a specific niche.

Requirements

Angular requires a current, active LTS, or maintenance LTS version of Node.js

Setup your Angular application
Install and setup Angular

Setup your Angular application

  • Install and setup Angular

    1. Install Angular CLI globally npm install -g @angular/cli
    2. Generate a new Angular app using Angular CLI, called AngularPWA ng new AngularPwa

  • Start the Angular application

    While developing you can run the application with command ng serve. By default, your application will be hosted on http://localhost:4200.

    If you want to build your Angular application, run command ng build. For a production build, add production parameter ng build –prod. Find your dist folder with the compiled files within the Angular application folder.

Make your Angular application a Progressive web application

Add an Angular PWA package through Angular CLI ng add @angular/pwa . This command makes changes within the project:

  • files ngsw-config.json and src/manifest.webmanifest are created.
  • also, some files are updated, such as angular.json, package.json, src/app.module.ts, src/index.html.

Service worker

The Service worker is a script that runs in the background of your browser separated from the web application. The advantage of the service worker is the ability to handle a request, kind of like an interceptor. It can handle every application request and it is often used as a cache manager. Additionally, the service worker implements onfetch and onmessage handlers, so push notifications are supported (depending on the browser support).

Start service worker (NGSW)

Do not use the service worker if you start your Angular application using ng serve. To check this, navigate to DevTools > Applications > Service Workers.

Here is why:

You are using the development environment and inside src/app.module.ts there is a rule ServiceWorkerModule.register('ngsw-worker.js', %7B enabled: environment.production %7D), which is false. During development, we can use the service worker on localhost, but in the production site, we will need the HTTPS setup on the hosting server.

Requirements

  1. Your browser must support service workers, you can check it on this link .
  2. In the production environment, use service workers with the HTTPS protocol on your site.

For development purposes, you can run the service worker on the localhost but in the production environment, use HTTPS.

With the service worker you can filter responses and hijack connections. We want to avoid  man-in-the-middle attacks using the HTTPS protocol.

Configure service worker

Inside the ngsw - config.json file is a configuration for the service worker. The generated file includes a configuration for static files such as fonts, images, script, and style files.

They are separated into two objects depending on the install or update mode:

installMode – The installMode defines how resources are initially cached. The installMode can be set on one of of two values:

  • prefetch – service worker fetches every single resource from the list, while the new version of the application is caching. Even though this can be intensive for network bandwith, it ensures that resources are available when they are requested, even when the application is offline.
  • lazy – service worker caches a resource from the list, only if that resource is requested. The resources that are not requested will not be cached.

updateMode – the updateMode defines the way to update resources that are already cached, when a new version of the application is discovered:

  • prefetch – service worker fetches and makes a cache of resources from the list immediately.
  • lazy – service worker will update a cached resources when they are requested again. Lazy mode is only working if an installMode is also a lazy one.

You can configure the service worker to cache responses from APIs. After "assetGroups":[] add "dataGroups":[]. For example:

{
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "apiUrl/subpath1/**"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxAge": "7d",
        "maxSize": 100
      }
    },
    {
      "name": "api-freshness",
      "urls": [
        "apiUrl/subpath2/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "3d",
        "timeout": "3s"
      }
    }
  ]
}

The Angular service worker can use either of two caching strategies for data resources.

  • performance – used for resources that are not changed often. Service worker returns resource from cache if a resource exists for the current version of the application in cache memory and the network request will not be created.
  • freshness – used for resources that are changed often. Service worker returns data from cache, only if the network times out.

=> Reference from Angular documentation

Manifest

The manifest file describes the application, necessary for a web application to be installed and presented to the user as a “native” application. It provides information such as name, author, icon(s), version, display type, theme colors, etc.

Responsive web design

Responsive web design (RWD) is an approach to designing the web application to adjust for every screen size. Web applications designed with RWD adapt the layout by using fluid and proportion-based grid, flexible – images, and CSS3 media queries:

  • The fluid grid concept requests a developer to use a relative unit for sizing of elements, for example percentages, view height, view width, and not absolute units such as pixels or points.
  • Flexible images are styled with using a relative unit to adjust their size on container elements resizing.
  • Media queries allow developers to apply a different CSS style rule based device or rendering surfrace (browser) characteristics such as height and width.
  • Responsive layouts adjust and adapt application layout to any device screen size.

=> RWD reference Responsive design

Update packages

Before you update all packages, first update the the Angular version using ng update @angular/cli @angular/core.

If you want to update packages to the latest version, I recommend you install npm-check-updates.. After that, run command ncu -u which will update package.json to the latest version of packages.

Maybe some packages will need to be downgraded because they are a dependency package of some other package. Be aware of it!

You can find the code on github:  PWA

Similar Articles

Back to All Articles
Back to All Articles