Progressive Web Apps with Angular

Progressive Web Apps with Angular

I started my PWAs learning journey while sitting in a conference session with Josh Crowther at The Rich Web Experience. His Progressive Web Apps: The Future of the Web presentation taught me everything I needed to know to get started. However, his examples used Polymer and I wanted to create a PWA with Angular.

When I first started researching how to build PWAs with Angular, I found mobile.angular.io.

This website seemed to be exactly what I needed and I was pumped to find a tutorial showing how to build a PWA with Angular CLI. After installing Angular CLI, I tried the tutorial’s recommended first step:

ng new hello-mobile --mobile

I was disappointed to find that Angular CLI (v1.0.0) does not support the mobile flag.

After searching through the project’s GitHub issues, I found a reference to Maxim Salnikov’s PWA demo app. Maxim created this repo as part of a half-day workshop at ngPoland and the project’s README said to contact him for workshop instructions. I emailed Maxim and he politely shared his Angular 2 PWA Workshop instructions and slides.

NOTE: Since then, Maxim as created a new guide called Progressive Web Apps using the Angular Mobile Toolkit.

Transform your Angular App to be a PWA

There are a number of steps you need to perform to make the Angular client work offline and be a PWA.

1. Add Angular Material
2. Create and register a Service Worker
3. Create an App Shell
4. Add a manifest to make it installable

Add Angular Material

Installing Angular Material is not a necessary step, but it will make the client look much nicer. Make sure you’re in the clientdirectory, then install it using npm.

npm install --save @angular/material @angular/cdk

Add imports for the modules you’ll be using in app.module.ts:

import { MatListModule, MatToolbarModule } from '@angular/material';

@NgModule({
  ...
  imports: [
    ...
    MatListModule, MatToolbarModule
  ]

Add Material icons and a theme to styles.css:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

Change the HTML templates to use Material components. For app.component.html, you can change the <h1> to be an <mat-toolbar>.

<mat-toolbar color="primary">
  <span>Welcome to {{title}}!</span>
</mat-toolbar>

<app-beer-list></app-beer-list>

In beer-list.component.html, change it to use <mat-list> and its related components.

<h2>Beer List</h2>

<mat-list>
  <mat-list-item *ngFor="let b of beers">
    <img mat-list-avatar src="{{b.giphyUrl}}" alt="{{b.name}}">
    <h3 mat-line>
      {{b.name}}
    </h3>
  </mat-list-item>
</mat-list>

After making these changes, the app should look a little better. Run ng serve and you should see how your UI has changed. Below is a screenshot using Chrome’s device toolbar.