DEV Community: Ennio Bozzetti

CyberTabletop CLI — I turned GitHub Copilot into a tabletop exercise facilitator

Ennio Bozzetti — Fri, 13 Feb 2026 01:21:00 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Most security teams never practice incident response. Tabletop exercises are the fix — you sit around a table, someone reads a scenario, and you talk through what you'd do. But running one takes prep, a facilitator, and scheduling time that nobody has.

So I built a CLI game that does it for you. You pick a ransomware scenario, make decisions each turn, and the situation evolves based on what you chose. The twist: GitHub Copilot CLI is the facilitator. It generates the scenarios, writes the narrative, decides the consequences, and keeps the pressure on.

CyberTabletop CLI is a turn-based cybersecurity tabletop exercise game that runs entirely in your terminal. You play as the incident response lead at a pharmaceutical company that just got hit by ransomware.

Every turn, you get a situation update and 3-4 choices. Pick one, and the game advances the clock, adjusts risk scores, changes asset statuses, and generates the next set of problems. The whole thing is driven by copilot -p calls under the hood — there's no hardcoded scenario tree, so every playthrough is different.

Here's what a session looks like:

You run python main.py start
Copilot generates three ransomware variants with different entry vectors (phishing, supply chain compromise, insider threat, etc.)
You pick one
The game bootstraps a full company profile — assets, security tools, risk levels, the works
Then you're in the loop. Each turn: read the update, pick A/B/C/D, deal with the consequences

The game tracks three risk dimensions (operational, data, legal) on a 0-100 scale, manages an asset list with real-time status changes, and keeps an in-game clock that advances 5-20 minutes per turn depending on what's happening.

When you're done, you can generate an AI debrief with /debrief or export a full markdown transcript with /export — useful for sharing with your team or writing up what happened.

The interactive session supports slash commands so you never leave the game loop: /status to check your risk scores, 'json' to peek at raw state, /help to see what's available, and /exit to save and quit.

Tech stack: Python, Typer, Rich (for terminal formatting), and GitHub Copilot CLI as the AI backend. That's it.

Demo

My Experience with GitHub Copilot CLI

This project uses Copilot CLI in a way I haven't seen before — not just as a development tool, but as the runtime AI engine for the game itself.

Every time the game needs content, it shells out to copilot -p "<prompt>" and parses the JSON that comes back. That means Copilot is generating scenarios, writing incident narratives, calculating consequences, and producing debriefs. It's doing the work of a human facilitator, live, in your terminal.

Getting this to work reliably was the interesting part.

Prompt engineering for structured output

The biggest challenge was getting consistent JSON back from a CLI tool that's designed for conversational output. I ended up embedding full JSON schemas directly in every prompt, plus a system prompt (FACILITATOR_RULES) that hammers home the constraints: JSON only, no markdown, no backticks, no commentary, ransomware only, 3-4 choices per turn.

Each prompt type (start menu, bootstrap, turn, debrief) has its own schema so Copilot knows exactly what shape to return. The turn prompt also sends the full game state — risk levels, asset statuses, signals, flags, recent player actions — so Copilot can write consequences that actually make sense in context.

Defensive JSON parsing

Even with strict prompts, Copilot sometimes wraps output in markdown fences or adds commentary. So I built a defensive parser that first tries json.loads() on the raw output, then falls back to regex-extracting the first {...} block.

On Windows, I hit another curveball — Copilot occasionally returned PowerShell object notation (@{}, @()) instead of JSON. So there's a converter that handles that too. It's not pretty, but it works.

State machine design

The game state is a single dict that gets passed to Copilot each turn. Copilot returns a "state patch" — risk deltas, asset updates, new signals, flag changes — and the engine applies it. This keeps the game consistent across turns without Copilot needing to remember anything.

I kept the state compact on purpose. Only the last 6 player actions get sent back, and the state only includes what's needed for the next decision. More context = more tokens = slower and less stable responses.

What worked well

Copilot CLI turned out to be surprisingly good at this. The scenarios feel realistic, the consequences track logically, and it naturally escalates tension over time. Constraining it to pharma + ransomware helped a lot — narrow scope = more consistent output.

The 90-second subprocess timeout was generous enough that I never hit it in practice, even with the longer bootstrap prompts.

What I'd do differently

The prompt engineering is brittle. If Copilot changes how it handles system instructions, the JSON parsing could break. A future version would probably benefit from retry logic and schema validation on the response.

I'd also like to support more scenario types beyond ransomware and more industries beyond pharma, but for an MVP the narrow focus was the right call. It kept the prompts stable and the output quality high.

This was a fun build. There's something satisfying about turning a conversational AI tool into a structured game engine — and the result is something I'd actually use to run exercises with my team.

Digital Storyteller: A Multimodal Applet

Ennio Bozzetti — Thu, 04 Sep 2025 20:12:43 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

The Digital Storyteller is an interactive applet that leverages Google's Gemini models to create imaginative stories from images. Users can upload an image and, optionally, provide a text prompt to guide the narrative. The app generates a short, creative story and then converts that story into an audio file that can be played back. This provides a complete multimedia experience, transforming a static image into a dynamic, narrated tale.

Demo

Demo link

How I Used Google AI Studio

I used Google AI Studio as the development environment for building this applet. I accessed and utilized the Gemini models directly through their APIs to power the app's core functionalities. The app relies on gemini-2.5-flash to process the image and text prompts and generate the story. It then uses the gemini-2.5-flash-preview-tts model to create the audio from the text. The app was built locally and is ready to be deployed to a platform like Cloud Run, as required by the challenge.

Multimodal Features

This applet demonstrates multimodal functionality in two key ways:

Multimodal Content Understanding: The app takes two different modalities as input: an image (visual) and a text prompt. It uses the powerful gemini-2.5-flash model to understand the content of both inputs and then combine them to create a single, cohesive text output (the story).

Multimodal Content Generation: After the story is created, the app uses the gemini-2.5-flash-preview-tts model to convert the text of the story into audio data. This showcases the ability to generate new content in a different modality from a text input, providing a richer, more engaging user experience.

How to group an object by property

Ennio Bozzetti — Mon, 30 Dec 2019 17:18:35 +0000

Here is a quick tip on how you can use Javascript reduce to group an array of objects by a property.

const students = [
  { name: 'John', grade: 1 },
  { name: 'James', grade: 1 },
  { name: 'Ryan', grade: 2 },
  { name: 'Matt', grade: 2 },
  { name: 'Joe', grade: 1 }
];

const groupedStudents = students.reduce((prev, cur) => {
  if (!prev[cur['grade']]) {
    prev[cur['grade']] = [];
  }

  prev[cur['grade']].push(cur);

  return prev;
}, {});

console.log(groupedStudents);

Open your developer console and expand the object you see. As you can see, the object has two property 1 and 2. They are the grades from the original array, and since we ask to group the new object by grade, that is why our new object has property 1 and property 2.

Now if you expand the property 1, you can see that we have an array of students and inside that array, you find all the students from grade 1, and if you do the same for property 2 you can see the students from grade 2

As you can see, this is a beneficial function, and we could reuse it in many places on our application. To be able to reuse it, we need to convert to a function, and that way we can pass the property we want to group by instead of hardcoding.

Here is our new function:

function groupedObj(objArray, property) {
  return objArray.reduce((prev, cur) => {
    if (!prev[cur[property]]) {
      prev[cur[property]] = [];
    }
    prev[cur[property]].push(cur);

    return prev;
  }, {});
}

How to connect your Angular application to Firebase

Ennio Bozzetti — Tue, 01 Oct 2019 18:57:13 +0000

In this post, I will show you how you can connect your reactive form with Google Firebase. If you missed part 1 on how to make a reactive form, here is a link to it.

How to create a reactive form in Angular

Ennio Bozzetti ・ Jul 10 '19

#angular #javascript #typescript

Create your Firebase account

If you don’t have a Firebase account go to https://firebase.google.com/ and follow the steps on how to create your Firebase account. If you already have an account, log in to your account, and create a new project.

This should take a few seconds, and once done it should redirect you to a new page.

For now, that is all we need to do on Firebase, we will get back to it once we set up our application.

I create a starter repo that contains the basic setup for the project. So, let’s clone the repo.

git clone https://github.com/enniob/reactiveForms.git

Now that the repo is cloned, change to the following branch remotes/origin/Reactive-Form-Part-2.

git checkout Reactive-Form-Part-2

Let’s take a look at the current state of the application. Open the console, and type npm install this will install all the dependencies needed. Once that is done, run ng serve -o.

You can see that our application has 2 pages; Home and login. If you click on login you will see a login form where you can enter a username and password. If you enter the login and password and click login, all we are doing is console.log the formData.

So now that we know our application is working, let’s connect our login form with Firebase.

We will use the AngularFire library to make the connections between your Angular project and Firebase.

First, let’s install AngularFire npm install firebase @angular/fire --save

Once the installation is done, we need to change enviroment.ts file to include the Firebase configuration for our application.

enviroment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxxxxxx',
    databaseURL: 'xxxxxxxxxxxxxxx',
    projectId: 'xxxxxxxxxxxxxxx',
    storageBucket: 'xxxxxxxxxxxxxxx',
    messagingSenderId: 'xxxxxxxxxxxxxxx',
    appId: 'xxxxxxxxxxxxxxx'
  }
};

You can get that information from the firebase website, open your project and click on add app.

Open app.module.ts and import AngularFireModule, and AngularFireAuthModule. We also need to import our environment.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

// MATERIAL
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatToolbarModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now open login.component.ts and let's add the following code, so we can connect our form with

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm = new FormGroup({
    userName: new FormControl('', Validators.compose([Validators.required])),
    password: new FormControl('', Validators.compose([Validators.required]))
  });

  constructor(private afAuth: AngularFireAuth, private router: Router) { }

  ngOnInit() {
  }

  doLogin(formData: FormGroup) {
    if (formData.valid) {
      this.afAuth.auth.signInWithEmailAndPassword(formData.value.userName, formData.value.password)
        .then(loginResponse => {
          console.log(loginResponse);
          this.router.navigate(['/']);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

As you can see on the code above, we imported import { AngularFireAuth } from '@angular/fire/auth'; and that gives us access to the AngularFireAuth object where we can use the methods signInWithEmailAndPassword to login our user with a username and password. Just keep in mind that with FireBaseAuth you have many options for authentication, so make sure you use the method that you need for your authentication. You can see here the documentation of the available options (https://firebase.google.com/docs/reference/js/firebase.auth.Auth).

Now that we have our application connected to firebase, let run it and see what happens. Open your console and run ng serve -o after the application builds, it should open the browser with our application.

Open the developer console, and navigate to the login page. Once there enter a username and password. Notice the error on the console that error means that we do not have Firebase setup to authenticate users using email and password. To enable that, go to the firebase website and open your application. Now click on Authentication -> sign-in method.

Now click on Email/Password, select enable and click save. Click on the user tabs and add a new user. Once that is done, go back to your application and enter the username and password you created on the firebase website.

Notice now that on the developer console you do not see the error message anymore and you can see an object with user information and login type. That means that the user was authenticated.

Now open home.component.ts and add the following code. This code will check if the user is logged in or not.

home.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
  userData = '';

  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.afAuth.authState.subscribe(data => {
      if (data) {
        this.userData = data.email;
        console.log(data);
      }
    });
  }

  logoutUser() {
    this.afAuth.auth.signOut().then(response => {
      console.log(response);
      this.userData = '';
    })
    .catch(error => {
      console.log(error);
    });
  }
}

As you can see how our application is able to connect with Firebase Auth and validate the user credentials, also note that if the user closes the browser and comes back to your application it will check with Firebase if the user is already logged in and if they are it will display the welcome message. A few improvements we need to do is create a service for all the Firebase authentication function, so we can reuse the code throughout our application. On the next part, the starter repo will include a new service with all the authentication functions and we will add a check to make sure only registered users can access some routes on our application.

You can change to the branch Reactive-Form-Part-2-Final to view all the file changes we did.

How to create a reactive form in Angular

Ennio Bozzetti — Wed, 10 Jul 2019 12:44:31 +0000

In this article, I will go over how to create an Angular reactive form. We will be making a login form. I will also demonstrate how we can easily add validation to our form.

Let’s set up our project

If you don’t have Angular already installed on your computer, go to Angular.io and follow the instructions on how to install Angular on your machine. You will also need an editor. My preferred editor is Visual Studio Code.

Let’s make a new Angular project. Open a command prompt and run the following command:

ng new <name>

Follow the steps on the prompt and once that is done you should have a new Angular application.

To test your new application, open the command prompt and type ng serve; wait a few seconds and then point your web browser to

Let’s do some coding

In your code editor, open app.component.html and replace all the code there with the following:

<div>
    <button [routerLink]="['/']">Home</button>
    <button [routerLink]="['login']">Login</button>
</div>

The above source code will add the login button. If you click on the login button you will get the following error: Error: Cannot match any routes. URL Segment: 'login' Error: Cannot match any routes. URL Segment: 'login'

To fix this error we need to make a new component and create a new route. Open your command prompt and enter the following command: ng g component /login to generate the login component code. Next, open app-routing.modules.ts file and make a new route called login. Your route should look like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {path: 'login', component: LoginComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Type ng serve and open your browser. If you click on the login button now, you will not get the error message and you should see a message on the page saying login works!

Now that we have our route working let’s make an Angular reactive form. Open the login.component.ts file and type the following code:

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl, Validator, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm = new FormGroup({
    userName: new FormControl('', Validators.compose([Validators.required])),
    password: new FormControl('', Validators.compose([Validators.required]))
  });

  constructor() { }

  ngOnInit() {
  }
}

We now have a FormGroup that contains two FormControls, one for the username input and another one for the password input. In our login.component.html we can use the following HTML code to display the form on the browser.

<form [formGroup]="loginForm" class="myForm">
  Username:
  <input type="text" formControlName="userName">
  Password:
  <input type="password" formControlName="password">
  <button type="submit">Login</button>
</form>

Open your browser and you should see an error message in your developer console saying that it can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.

That is because we did not include the ReactiveFormModules to our app.module.ts, so add the following code to your app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you go back to your browser, you should notice that there are no more errors in the developer console.

If you click on the login button nothing happens. We will need to create a function and call it when the form is submitted. Open login.component.htm and add the following to the form tag (ngSubmit)=”doLogin(loginForm)” In login.component.ts we a function called doLogin that accepts a parameter of type formGroup. Here is the code for the function:

login.component.html

<form [formGroup]="loginForm" (ngSubmit)="doLogin(loginForm)" class="myForm">
  Username:
  <input type="text" formControlName="userName">
  Password:
  <input type="password" formControlName="password">
  <button type="submit">Login</button>
</form>

login.component.ts

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm = new FormGroup({
    userName: new FormControl(''),
    password: new FormControl('')
  });

  constructor() { }

  ngOnInit() {
  }

  doLogin(formData: FormGroup) {
    console.log(formData);
  }
}

Make sure you have the developer console open in your browser and click the login button on your form. The console displays the FormGroup output. Click on the arrow on the left to expand the FormGroup properties.

Now that we have our login form working, let’s make it prettier. We will be using Angular Material, so we must first install it. For more information about Angular Material visit their website at https://material.angular.io. Type the following command on the command line.

ng add @angular/material

Once the install is done, we can import the theme we want to use. Add the following line to your styles.scss.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Let’s replace the code in the following files:

<mat-card class="loginCard">
  <mat-card-content>
    <form [formGroup]="loginForm" (ngSubmit)="doLogin(loginForm)" class="myForm">
      <mat-form-field class="fullWidth">
        <mat-label>
          Username:
        </mat-label>
        <input matInput type="text" formControlName="userName">
      </mat-form-field>
      <mat-form-field class="fullWidth">
        <mat-label>
          Password:
        </mat-label>
        <input matInput type="password" formControlName="password">
      </mat-form-field>
      <button mat-button type="submit">Login</button>
    </form>
  </mat-card-content>
</mat-card>

.loginCard {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.myForm{
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.fullWidth {
  width: 100%;
}

App.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-button [routerLink]="['/']">Home</button>
    <button mat-button [routerLink]="['login']">Login</button>
  </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// MATERIAL
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Build the application using ng serve and you will see a navigation header with the login form centered on the page.

Now that we have our login form looking nicer, we can add some form validation to ensure the user enters valid data.

Add the following code to login.component.ts.

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl, Validator, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm = new FormGroup({
    userName: new FormControl('', Validators.compose([Validators.required])),
    password: new FormControl('', Validators.compose([Validators.required]))
  });

  constructor() { }

  ngOnInit() {
  }

  doLogin(formData: FormGroup) {
    console.log(formData);
  }
}

When you go back to the login page and click the login button, you will notice that the inputs will turn red, and if you open the console window in your browser, you can that the FormGroup valid property is set to invalid. This is because the username and password input was set to be required in the FormGroup.
Go back to the form and enter a username and password and click on login. You will see that the Formgroup valid property is now set to true in your console.

Conclusion
You now know how to create reactive forms. You could easily add multiple validators if you wanted to and even create your own custom validator. In my next article, I will show you how to create a login form that uses Firebase Authentication and we will also make a registration form that connects to Firebase as well.

Building a Progressive Web App with Angular — Part 2

Ennio Bozzetti — Wed, 15 May 2019 01:45:15 +0000

This is part 2 of my tutorial on Building a Progressive Web App with Angular. In this tutorial I will explain how to host your web app on Firebase Hosting, and how to notify users when your web app has an update.

If you do not have an account with Firebase you will need to make one. To do this, visit https://firebase.google.com/; click on Sign In and follow the prompts.

If you already have an account, click on GO TO CONSOLE and it should take you to the Welcome to Firebase! screen. From here you can make a new project or use an existing project.

Open the command line and type the following command.

npm install -g firebase-tools

Once completed, you should be able to use the firebase command. To connect your local machine to your Firebase account run the following command:

firebase login

You should get a few questions on the command prompt and you will be redirected to a Google authentication page where you will need to login and give access.

Now lets initialize our Firebase project.

firebase init

You will get a series of question. For the purpose of this tutorial we are only interested in the hosting options, so make sure you select: ( ) Hosting: Configure and deploy Firebase Hosting sites and press Enter.

Next you will be asked if you want to select an existing project or create a new one. Select the one that is appropriate for you. For this tutorial I selected the Create a new project option.

On the Hosting Setup section you need to specify the output directory. Since we are using Angular CLI the output files will be located in the dist folder once your project is built. Be sure to select dist for this option.

Select Yes for single-page app and that is it. Your project is now setup to use Firebase Hosting.

Let’s do some coding

Open VS Code or your preferred editor.

First let’s change our build directory, open angular.json file and change the outputPath to be: "outputPath": "dist" The Angular CLI default is dist/[PROJECTNAME], and since we told Firebase CLI that our project will be on the dist folder only, we need to make a small change on our angular.json file.

Now, let’s build our application and upload to Firebase. Open your command line and type the following command:

ng build --prod

Once the application is done, open the dist folder you will see your application files there. To upload the app to Firebase we need to run the following command:

firebase deploy

The deploy should take a few seconds and you should be able to see what is happening on the command line. Once it’s done you will get a Hosting URL and if you open that URL in your browser you will see the default Angular application.

Let’s make some changes to our app

We will make some HTML changes so we can display a welcome message and also notify the user that we have changed the website so they know to reload to view the latest version of our site. We will be using Angular Material to display the alter message, so let’s install Angular Material.

ng add @angular/material

Once the installation is completed, we need to add MatSnackBarModule to our app.modules.ts file.

Now let’s open app.component.html file and change the HTML to display our welcome message. For now we will just have a basic welcome message. Delete all the HTML from the file and just enter the following HTML code:

Open app.component.ts and let’s setup our Snackbar to notify the user once there is a change to the website. To do that we need to import MatSnackBar, and SwUpdate to our component.

The code in the constructor method will execute when the app loads and it will check to see if there are any updates between the server files and the files cached on the service workers. If they are indeed different, a snackbar will display on the screen and prompt the user to reload the application. So let’s try that now that we imported all the required modules and we added the code to check for updates. Let’s build our application again and upload to Firebase.

ng build --prod

Wait a few seconds and open your Firebase project URL in a new tab. The app will load using the files from the service worker cache, and after it’s done checking if files were updated, you will see the snackbar asking the user to reload the page. Click on “Reload” and you should see the updated app.

This completes our tutorial. In the next tutorial I will build a PWA app that will use everything that we learned in part 1 and part 2. If you have any questions, comments or suggestion for any other topic you want to see covered, please let me know.

Building a Progressive Web App with Angular — Part 1

Ennio Bozzetti — Mon, 13 May 2019 11:46:27 +0000

If you don’t know what Progressive Web Apps (PWA) are I hope this tutorial will give you an introduction to PWAs and also make you understand how they work and why it’s such a good idea to develop PWA applications.

I will be using the latest version of Angular for the purpose of this tutorial.

What is PWA?

A PWA is a web app that uses modern web development technologies to deliver app-like experience to users when they view your website on a mobile device.

Why build a Progressive Web App?

A PWA app gives your website user features that were only available to native apps in the past. Here are some features that are available in a PWA application:

*Home screen icon
*Offline mode
*Web push notification
*and many more

Here is a link to a website that gives you a list of features that are currently available for PWA applications.

I hope this gives you a short and simple overview of PWA and why we should start looking at it. So let’s create our first PWA.

First let’s install Angular.

npm install -g @angular/cli

Once this is complete, we can make our new project

ng new my-first-pwa --skip-tests --style scss

If you are new to Angular CLI, here is the documentation link. I recommend taking a look at it, since there is so much you can do now with the Angular CLI. Either way, here is a brief explanation of the commands used:

*ng new Creates a new Angular application
*my-first-pwa This is the application name, so feel free to change to whatever you want
*--skip-tests This command will skip the spec files
*--style scss This will make the style files extension to be scss.

You now have your Angular application. In order, to preview your application you need to run ng serve -o This will build your application and open it in a browser.

Here is what it should look like:

Now let’s make our application a PWA. Luckily for us Angular has made it easy to convert an Angular application into a PWA. All we need to do is install a package called @angular/pwa and this will add all the files and setup your application to be a PWA. So let’s do it!

ng add @angular/pwa

This should take only a few seconds. We can now test our application to see what changed.

First, we need to build our project

ng build --prod

Unfortunately ng server does not work with service workers, we will need to setup a HTTP server to test our service worker.

Run the following command to install http-server.

npm install -g http-server

Once completed, change the directory to your dist folder cd dist/my-first-pwa and run http-server -p 8080

Go to the following URL http://127.0.0.1:8080 on your browser. You should see the default Angular application.

But how can I check to see if my PWA is working correctly? To do this, open your browser developer tool, click on network and check Offline.

Now refresh your browser. Notice that on the network tab all the files are being loaded from ServiceWorker, and your website loads with all the content and image. This means that all the resources are being loaded from the service worker’s cache. This is just one of the many benefits of PWAs.

That is it! As you can see, Angular makes it really easy to create a new application and set it up to be a PWA. In the next tutorial I will show you how to configure Firebase so you can host your application, make changes to the application, notify the users of application updates and also update the service workers so that the correct files are loaded when the application is run next.

Here is a link to my github repository with the tutorial files.