Build PWA Angular 5 Application

Ahmed Abdelsalam
Tue May 1, 2018 · 4 min read
Angular 

This is the fourth part in a seven-part series about the JavaScript framework, Angular 5. In this part, we’ll go over turning our application into a PWA (Progressive Web Application).

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Progrissive Web Applications and how to turn your Angular 5 application into it. I’m going to turn the application We created in the 3 previous articles, so you have to check them first! No, you must check specifically the last one!

Article Series:

  1. Creating Angular 5 application with Angular-cli
  2. Using Angular Material with Angular 5
  3. Deploy Angular 5 Application to Netlify
  4. Build PWA Angular 5 app (You are here)
  5. Build Dynamic themes for Angular Material
  6. Using FlexLayout with Angular 5
  7. Building News App using Angular 5

Final Demo here

In the last article we deployed our application to Netlify. I won’t explain what PWA is you have to google this.

Lighthouse tool

But to get the score of any PWA you can use tool named LightHouse

I deployed our app in the last article to use it in this step, so I can test the score of the hosted application Let’s check our current page’s score Screenshot_2018-04-25_20-02-18

Our PWA score in this screen-shot is 18

Adding <noscript> Tag

Open /src/index.html add the <noscript> tag like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WbGy</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>

  <body>
    <app-root></app-root>
    <noscript>
      <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
        Sorry, but app is not available without javascript
      </h3>
    </noscript>
  </body>
</html>

This tag will tell the user that he must have JavaScript to run our page. Deploy our edit to Netlify by just deploying it to Github

git add -A
git commit -m "adding <noscript> tag"
git push

As Netlify uses Continuous Deployment your commit will be published automatically.

Let’s check the score now!

pwa-score-2

Now our PWA score is 55

55 points is a good score but I want to make it a perfect score (100)

If you remember in the first article We added some arguments while creating our Angular application, one of these arguments was --service-worker. If you didn’t use it you have to. This argument will save you a lot of time. you won’t have to add the service-worker yourself and edit many files. It’ll do everything for you.

All what you have to do now is just creating manifest_app.json file. you can name it anything and add the following code:

/src/manifest_app.json

{
  "name": "Wb-Gy Angular5 PWA",
  "short_name": "Wb-Gy",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/app_home_icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "#c4473a",
  "theme_color": "#c4473a"
}

Change name, short_name, background_color, theme_color and the icons path to you favorite choices. Next want to automate moving manifest_app.json to our dist folder while deploying, so We’ll add it to our .angular-cli.json Open .angular-cli.json in your application root, under apps then assets you’ll need to add manifest_app.json, the code should look like:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "wb-gy"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest_app.json"
      ],

This is not the whole file I removed the code after our edit for brevity. Now, Open /src/index.html and add the following line before </head>

<link rel="manifest" href="manifest_app.json" />

If you tried to check the Lighthouse score now It’ll be between 90 to 95. To make it perfect we have to add Theme color to our meta tags. add the following line to /src/index.html after the previous line

<meta name="theme-color" content="#00FF00" />

Now your /src/index.html should look like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WbGy</title>
    <base href="/" />

    <link rel="manifest" href="manifest_app.json" />
    <meta name="theme-color" content="#00FF00" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body>
    <app-root></app-root>
    <noscript>
      <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
        Sorry, but app is not available without javascript
      </h3>
    </noscript>
  </body>
</html>

Now you should get 100 points, I had 91 and that’s why my application Does not redirect HTTP traffic to HTTPS. If I were using a custom domain, I’d redirect all HTTP to HTTPS and get 100 points.

There are more details about PWA that need more articles to talk about. But for now I’ll stop here to start something cool in the next article.

Next: Build Dynamic themes for Angular Material

Some useful Links: