Develop a PWA (Progressive Web App) With Angular😇

In this article, We'll see how to develop progressive web app with angular.

What is PWA ?

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Let's Create Angular App.

Creates a new workspace and an initial Angular application by using bellow command,

ng new [project name]

Making your Angular app a PWA.

To make your angular app as a PWA, use the below CLI command ,

ng add @angular/pwa

It takes care of configuring your app, it will set up a,

• service worker,
• web manifest,
• Enables service worker support for angular CLI ,
• Creates the service worker configuration file.

and add a tag at index.html to show some content when the JavaScript code from your app hasn’t loaded (probably either because the user has a very slow connection or because their browser can’t run Angular).

service-worker is get added as dependencies in package.json.

Now, look at the angular.json file Service worker is enable for production mode.

Web Manifest:
The web app manifest is a simple JSON file that informs the browser about your web app and how it should behave when installed on the user's mobile device or desktop.

manifest JSON file comes with some mandatory and optional properties,

• name: When the browser launches the splash screen, it will be the name displayed on the screen.

• short_name: It will be the name displayed underneath your app shortcut on the home screen.

• start_url: It will be the page shown to the user when your app is open.

• display: It tells the browser how to display the app. They are several modes like minimal-ui, fullscreen, browser etc.
  Here, we use the standalone mode to hide everything related to the browser.

• background_color: When the browser launches the splash screen, it will be the background of the screen.

• theme_color: It will be the background color of the status bar when we open the app.

• icons: When the browser launches the splash screen, it will be the icon displayed on the screen.

Angular Service Worker build configuration:
The CLI has also added a new configuration file called ngsw-config.json, which configures the Angular Service Worker runtime behavior and specifies which files and data URLs should cache and how it should update the cached files and data.

• assetGroups: This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached. When the ServiceWorker handles a request, it checks asset groups in the order in which they appear in ngsw-config.json. The first asset group that matches the requested resource handles the request. Checkout to know more about ngsw congifuration.

Service Worker registration:
Service Worker Module automatically registered into the application root module with the help of angular CLI.

With this update, we have now transformed our regular angular app to a PWA.

Let's build the project in production mode,

ng build --prod

Serving with http-server:

• If you go to the Application tab of the developer tools on any browsers you will see a service worker running, but with an error message. That’s because ng serve doesn’t work well with service workers, and it’s necessary to build your app and run through a server to make it work.
• You can use any HTTP server, One easy way of doing this is to use the http-server npm pack.
• To Install http-server globally, use bellow command,

npm install -g http-server

• To serve the directory containing your web files with http-server, run the following command,

http-server -p 8080 -c-1 dist/<project-name>

• You can access your web app at http://127.0.0.1:8080😎.

Checkout to see the code on GitHub