Build PWA with Angular 5 App

4 min readMay 1, 2018

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).

Read this article on my new tool Medium Plus, for a smart, customizable reading experience.

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!

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)
Article Series:

Creating Angular 5 application with Angular-cli
Using Angular Material with Angular 5
Deploy Angular 5 Application to Netlify
Build PWA with Angular 5 App (You are here)
Build Dynamic themes for Angular Material
Using FlexLayout with Angular 5
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

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!

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 Angularapplication, 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 HTTPSand 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

If you have any question comment it below or You can find me on Twitter @geeksamu

Before you go, check me out the next useful Links: 👀

👨️ My Website/Portfolio

🔥 Get your $50 in FREE hosting credit HERE

⚡ Best Web Browser for 2019 | Privacy First & Chromium Based

🤑️ No Stripe? How To Get Paid With Payoneer ⇒ $25 + $10 Sign UP Bonus

Build PWA with Angular 5 App

Lighthouse tool

Adding <noscript> Tag

Written by Ahmed Abdelsalam

Adding `<noscript>` Tag