⚡ Angular App Info PWA

• App to display information from an API with a fully working service worker.
• A service-worker is used to make this a Progressive Web Application (PWA).
• Partly tutorial code from Gary Simon at DesignCourse see 👏 Inspiration below, but with major modifications, including to maximise Lighthouse score.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular App Info PWA
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 PWA/Angular Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Angular httpClient used to get API data. RXJS observables are not used this time; just a simple HTTP fetch of data.
• Progressive Web App: runs in the browser and manages data caching so API info is still displayed in the event of a loss of network. All PWAs require HTTPS (hypertext transport secure). They require a TLS (SSL - Secure Sockets Layer) or Digital certificate.

📷 Screenshots

.

📶 Technologies

• Angular v16
• RxJS Library v7 used to subscribe to the API data observable.
• Angular service worker v16

💾 Setup

• npm i to install dependencies

• ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

• npm i -g http-server to install http-server globally.

• npm run build to create the build file.

• cd dist\angular-app-infoPwa to change directory.

• http-server -o and navigate to http://192.168.0.104:8080 to see API working with the service worker in operation.

• You will see something like:

  _Starting up http-server, serving ./ Available on: http://192.168.0.104:8080 http://127.0.0.1:8080 Hit CTRL-C to stop the server_

💻 Code Examples

• data.service.ts using httpClient service with a getInfo() function to get user details from the API.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getInfo() {
    return this.http.get<Info>("https://api.chucknorris.io/jokes/random");
  }
}

🆒 PWA/Angular Features

• Manifest.json file
• ngsw-config.json file: specifies which files and data URLs the service worker should cache and how it should update the cached files and data. Also has a URL for fonts to use when offline. Other settings, including dataGroups "freshness" strategy option.
• SwUpdate module used to subscribe to update notifications from the Service Worker, trigger update checks, and forcibly activate updates.

📋 Status & To-Do List

• Status: Working
• To-Do: Reduce unused Javascript

👏 Inspiration

• Coursetro tutorial: Build your First Angular PWA from Scratch (Angular 6 PWA Tutorial)
• Angular Documentation: service worker introduction
• Ensure text remains visible during webfont load

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com