{"id":16687396,"url":"https://github.com/rodrigokamada/angular-pwa","last_synced_at":"2025-10-23T23:47:42.500Z","repository":{"id":40001341,"uuid":"440847800","full_name":"rodrigokamada/angular-pwa","owner":"rodrigokamada","description":"Application example built with Angular 13 and adding the Progressive Web Application (PWA) using the @angular/pwa library.","archived":false,"fork":false,"pushed_at":"2024-01-27T01:27:44.000Z","size":2130,"stargazers_count":29,"open_issues_count":2,"forks_count":21,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-09-29T12:59:54.656Z","etag":null,"topics":["angular","beginners","dev-community","frontend","gh-actions","gh-pages","hacktoberfest","pwa","stackblitz","tutorial"],"latest_commit_sha":null,"homepage":"https://rodrigokamada.github.io/angular-pwa/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigokamada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"rodrigokamada"}},"created_at":"2021-12-22T12:17:33.000Z","updated_at":"2025-09-06T18:41:51.000Z","dependencies_parsed_at":"2024-10-28T11:29:37.345Z","dependency_job_id":"1815136d-a477-42d3-85bc-18d8ca02dd5f","html_url":"https://github.com/rodrigokamada/angular-pwa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rodrigokamada/angular-pwa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigokamada","download_url":"https://codeload.github.com/rodrigokamada/angular-pwa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-pwa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280712961,"owners_count":26378085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","beginners","dev-community","frontend","gh-actions","gh-pages","hacktoberfest","pwa","stackblitz","tutorial"],"created_at":"2024-10-12T15:09:01.852Z","updated_at":"2025-10-23T23:47:42.485Z","avatar_url":"https://github.com/rodrigokamada.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rodrigokamada"],"categories":[],"sub_categories":[],"readme":"# Angular Progressive Web Application (PWA)\n\n\nApplication example built with [Angular](https://angular.io/) 14 and adding the Progressive Web Application (PWA) using the [@angular/pwa library](https://www.npmjs.com/package/@angular/pwa).\n\nThis tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/adicionando-o-aplicativo-web-progressivo-pwa-em-uma-aplicacao-angular) in portuguese and on the [DEV Community](https://dev.to/rodrigokamada/adding-the-progressive-web-application-pwa-to-an-angular-application-4g1e) in english.\n\n\n\n[![Website](https://shields.braskam.com/v1/shields?name=website\u0026format=rectangle\u0026size=small\u0026radius=5)](https://rodrigo.kamada.com.br)\n[![LinkedIn](https://shields.braskam.com/v1/shields?name=linkedin\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.linkedin.com/in/rodrigokamada)\n[![Twitter](https://shields.braskam.com/v1/shields?name=twitter\u0026format=rectangle\u0026size=small\u0026radius=5\u0026socialAccount=rodrigokamada)](https://twitter.com/rodrigokamada)\n[![Instagram](https://shields.braskam.com/v1/shields?name=instagram\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.instagram.com/rodrigokamada)\n\n\n\n## Prerequisites\n\n\nBefore you start, you need to install and configure the tools:\n\n* [git](https://git-scm.com/)\n* [Node.js and npm](https://nodejs.org/)\n* [Angular CLI](https://angular.io/cli)\n* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/))\n\n\n\n## Getting started\n\n\n### Create the Angular application\n\n\n**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the route file and the SCSS style format.\n\n```powershell\nng new angular-pwa --routing true --style scss\nCREATE angular-pwa/README.md (1056 bytes)\nCREATE angular-pwa/.editorconfig (274 bytes)\nCREATE angular-pwa/.gitignore (620 bytes)\nCREATE angular-pwa/angular.json (3237 bytes)\nCREATE angular-pwa/package.json (1075 bytes)\nCREATE angular-pwa/tsconfig.json (863 bytes)\nCREATE angular-pwa/.browserslistrc (600 bytes)\nCREATE angular-pwa/karma.conf.js (1428 bytes)\nCREATE angular-pwa/tsconfig.app.json (287 bytes)\nCREATE angular-pwa/tsconfig.spec.json (333 bytes)\nCREATE angular-pwa/.vscode/extensions.json (130 bytes)\nCREATE angular-pwa/.vscode/launch.json (474 bytes)\nCREATE angular-pwa/.vscode/tasks.json (938 bytes)\nCREATE angular-pwa/src/favicon.ico (948 bytes)\nCREATE angular-pwa/src/index.html (296 bytes)\nCREATE angular-pwa/src/main.ts (372 bytes)\nCREATE angular-pwa/src/polyfills.ts (2338 bytes)\nCREATE angular-pwa/src/styles.scss (80 bytes)\nCREATE angular-pwa/src/test.ts (745 bytes)\nCREATE angular-pwa/src/assets/.gitkeep (0 bytes)\nCREATE angular-pwa/src/environments/environment.prod.ts (51 bytes)\nCREATE angular-pwa/src/environments/environment.ts (658 bytes)\nCREATE angular-pwa/src/app/app-routing.module.ts (245 bytes)\nCREATE angular-pwa/src/app/app.module.ts (393 bytes)\nCREATE angular-pwa/src/app/app.component.scss (0 bytes)\nCREATE angular-pwa/src/app/app.component.html (23364 bytes)\nCREATE angular-pwa/src/app/app.component.spec.ts (1088 bytes)\nCREATE angular-pwa/src/app/app.component.ts (216 bytes)\n✔ Packages installed successfully.\n    Successfully initialized git.\n```\n\n**2.** Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post *[Adding the Bootstrap CSS framework to an Angular application](https://github.com/rodrigokamada/angular-bootstrap)*.\n\n**3.** Add the `@angular/pwd` library to set up the Angular service worker.\n\n```powershell\nng add @angular/pwa\nℹ Using package manager: npm\n✔ Found compatible package version: @angular/pwa@13.1.2.\n✔ Package information loaded.\n\nThe package @angular/pwa@13.1.2 will be installed and executed.\nWould you like to proceed? Yes\n✔ Package successfully installed.\nCREATE ngsw-config.json (631 bytes)\nCREATE src/manifest.webmanifest (1346 bytes)\nCREATE src/assets/icons/icon-128x128.png (1253 bytes)\nCREATE src/assets/icons/icon-144x144.png (1394 bytes)\nCREATE src/assets/icons/icon-152x152.png (1427 bytes)\nCREATE src/assets/icons/icon-192x192.png (1790 bytes)\nCREATE src/assets/icons/icon-384x384.png (3557 bytes)\nCREATE src/assets/icons/icon-512x512.png (5008 bytes)\nCREATE src/assets/icons/icon-72x72.png (792 bytes)\nCREATE src/assets/icons/icon-96x96.png (958 bytes)\nUPDATE angular.json (3621 bytes)\nUPDATE package.json (1615 bytes)\nUPDATE src/app/app.module.ts (804 bytes)\nUPDATE src/index.html (509 bytes)\n✔ Packages installed successfully.\n```\n\n**Note:**\n\nThe files `ngsw-config.json`, `src/manifest.webmanifest` and icons were added and the files `angular.json`, `package.json`, `src/app/app.module.ts` and `src/index.html` were changed to the application.\n\n* `ngsw-config.json`: [Service worker](https://angular.io/guide/service-worker-intro) configuration file allows you to configure cache strategy and files and other configurations.\n* `src/manifest.webmanifest`: Application configuration file or [WEB app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) file allows you to configure the name, colors, icons and other configurations.\n* `angular.json`: The service worker configuration was added.\n* `package.json`: The `@angular/service-worker` library was added.\n* `src/app/app.module.ts`: The service worker configuration was added.\n* `src/index.html`: Manifest file configuration and theme color was added.\n\n**4.** Remove the contents of the `AppComponent` class from the `src/app/app.component.ts` file. Create the `updateOnlineStatus` method to check the browser connection status as below.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n\n  isOnline: boolean;\n\n  constructor() {\n    this.isOnline = false;\n  }\n\n  public ngOnInit(): void {\n    this.updateOnlineStatus();\n\n    window.addEventListener('online',  this.updateOnlineStatus.bind(this));\n    window.addEventListener('offline', this.updateOnlineStatus.bind(this));\n  }\n\n  private updateOnlineStatus(): void {\n    this.isOnline = window.navigator.onLine;\n    console.info(`isOnline=[${this.isOnline}]`);\n  }\n\n}\n```\n\n**5.** Remove the contents of the `src/app/app.component.html` file. Add the HTML code to display the browser connection status as below.\n\n```html\n\u003cdiv class=\"container-fluid py-3\"\u003e\n  \u003ch1\u003eAngular Progressive Web Application (PWA)\u003c/h1\u003e\n\n  \u003cdiv class=\"row my-5\"\u003e\n    \u003cdiv class=\"col text-end\"\u003e\n      Status:\n    \u003c/div\u003e\n    \u003cdiv class=\"col\"\u003e\n      \u003cspan class=\"badge bg-success\" *ngIf=\"isOnline\"\u003eOnline\u003c/span\u003e\n      \u003cspan class=\"badge bg-danger\" *ngIf=\"!isOnline\"\u003eOffline\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**6.** Run the application with the command below.\n\n```powershell\nnpm start\n\n\u003e angular-pwa@1.0.0 start\n\u003e ng serve\n\n✔ Browser application bundle generation complete.\n\nInitial Chunk Files   | Names         |  Raw Size\nvendor.js             | vendor        |   2.05 MB | \nstyles.css, styles.js | styles        | 486.85 kB | \npolyfills.js          | polyfills     | 339.20 kB | \nscripts.js            | scripts       |  76.33 kB | \nmain.js               | main          |  10.71 kB | \nruntime.js            | runtime       |   6.86 kB | \n\n                      | Initial Total |   2.95 MB\n\nBuild at: 2022-01-01T17:33:35.241Z - Hash: 1e50e703667ef1c0 - Time: 3557ms\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n✔ Compiled successfully.\n```\n\n**7.** Access the URL `http://localhost:4200/` and check if the application is working.\n\n![Angular Progressive Web Application (PWA) - Browser connection status](https://res.cloudinary.com/rodrigokamada/image/upload/v1641086404/Blog/angular-pwa/angular-pwa-step1.png)\n\n**8.** Change the contents of the `AppComponent` class from the `src/app/app.component.ts` file. Import the `SwUpdate` service and create the `updateVersion` and `closeVersion` methods to check for available updates for the application as below.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { SwUpdate, VersionReadyEvent } from '@angular/service-worker';\nimport { filter, map } from 'rxjs/operators';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n\n  isOnline: boolean;\n  modalVersion: boolean;\n\n  constructor(private swUpdate: SwUpdate) {\n    this.isOnline = false;\n    this.modalVersion = false;\n  }\n\n  public ngOnInit(): void {\n    this.updateOnlineStatus();\n\n    window.addEventListener('online',  this.updateOnlineStatus.bind(this));\n    window.addEventListener('offline', this.updateOnlineStatus.bind(this));\n\n    if (this.swUpdate.isEnabled) {\n      this.swUpdate.versionUpdates.pipe(\n        filter((evt: any): evt is VersionReadyEvent =\u003e evt.type === 'VERSION_READY'),\n        map((evt: any) =\u003e {\n          console.info(`currentVersion=[${evt.currentVersion} | latestVersion=[${evt.latestVersion}]`);\n          this.modalVersion = true;\n        }),\n      );\n    }\n  }\n\n  private updateOnlineStatus(): void {\n    this.isOnline = window.navigator.onLine;\n    console.info(`isOnline=[${this.isOnline}]`);\n  }\n\n  public updateVersion(): void {\n    this.modalVersion = false;\n    window.location.reload();\n  }\n\n  public closeVersion(): void {\n    this.modalVersion = false;\n  }\n\n}\n```\n\n**9.** Change the contents of the `src/app/app.component.html` file. Add the HTML code to display if there are updates available for the application as below.\n\n```html\n\u003cdiv class=\"container-fluid py-3\"\u003e\n  \u003ch1\u003eAngular Progressive Web Application (PWA)\u003c/h1\u003e\n\n  \u003cdiv class=\"row my-5\"\u003e\n    \u003cdiv class=\"col text-end\"\u003e\n      Status:\n    \u003c/div\u003e\n    \u003cdiv class=\"col\"\u003e\n      \u003cspan class=\"badge bg-success\" *ngIf=\"isOnline\"\u003eOnline\u003c/span\u003e\n      \u003cspan class=\"badge bg-danger\" *ngIf=\"!isOnline\"\u003eOffline\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"w-100 position-absolute top-0\" *ngIf=\"modalVersion\"\u003e\n  \u003cdiv class=\"alert alert-secondary m-2\"\u003e\n    \u003cbutton type=\"button\" class=\"btn-close position-absolute top-0 end-0 m-1\" aria-label=\"Close\" (click)=\"closeVersion()\"\u003e\u003c/button\u003e\n    A new version of this app is available. \u003ca href=\"\" (click)=\"updateVersion()\"\u003eUpdate now\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**10.** Access the URL `http://localhost:4200/` and check if the application is working.\n\n![Angular Progressive Web Application (PWA) - Available update](https://res.cloudinary.com/rodrigokamada/image/upload/v1641149762/Blog/angular-pwa/angular-pwa-step2.png)\n\n**11.** Install the `@angular/cdk` library.\n\n```powershell\nnpm install @angular/cdk\n```\n\n**12.** Change the contents of the `AppComponent` class from the `src/app/app.component.ts` file. Import the `Platform` service and create the `loadModalPwa`, `addToHomeScreen` and `closePwa` methods to check the operational system and the browser and display how to add the application as below.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { Platform } from '@angular/cdk/platform';\nimport { SwUpdate, VersionReadyEvent } from '@angular/service-worker';\nimport { filter, map } from 'rxjs/operators';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n\n  isOnline: boolean;\n  modalVersion: boolean;\n  modalPwaEvent: any;\n  modalPwaPlatform: string|undefined;\n\n  constructor(private platform: Platform,\n              private swUpdate: SwUpdate) {\n    this.isOnline = false;\n    this.modalVersion = false;\n  }\n\n  public ngOnInit(): void {\n    this.updateOnlineStatus();\n\n    window.addEventListener('online',  this.updateOnlineStatus.bind(this));\n    window.addEventListener('offline', this.updateOnlineStatus.bind(this));\n\n    if (this.swUpdate.isEnabled) {\n      this.swUpdate.versionUpdates.pipe(\n        filter((evt: any): evt is VersionReadyEvent =\u003e evt.type === 'VERSION_READY'),\n        map((evt: any) =\u003e {\n          console.info(`currentVersion=[${evt.currentVersion} | latestVersion=[${evt.latestVersion}]`);\n          this.modalVersion = true;\n        }),\n      );\n    }\n\n    this.loadModalPwa();\n  }\n\n  private updateOnlineStatus(): void {\n    this.isOnline = window.navigator.onLine;\n    console.info(`isOnline=[${this.isOnline}]`);\n  }\n\n  public updateVersion(): void {\n    this.modalVersion = false;\n    window.location.reload();\n  }\n\n  public closeVersion(): void {\n    this.modalVersion = false;\n  }\n\n  private loadModalPwa(): void {\n    if (this.platform.ANDROID) {\n      window.addEventListener('beforeinstallprompt', (event: any) =\u003e {\n        event.preventDefault();\n        this.modalPwaEvent = event;\n        this.modalPwaPlatform = 'ANDROID';\n      });\n    }\n\n    if (this.platform.IOS \u0026\u0026 this.platform.SAFARI) {\n      const isInStandaloneMode = ('standalone' in window.navigator) \u0026\u0026 ((\u003cany\u003ewindow.navigator)['standalone']);\n      if (!isInStandaloneMode) {\n        this.modalPwaPlatform = 'IOS';\n      }\n    }\n  }\n\n  public addToHomeScreen(): void {\n    this.modalPwaEvent.prompt();\n    this.modalPwaPlatform = undefined;\n  }\n\n  public closePwa(): void {\n    this.modalPwaPlatform = undefined;\n  }\n\n}\n```\n\n**13.** Change the contents of the `src/app/app.component.html` file. Add the HTML code to display how to add the application as below.\n\n```html\n\u003cdiv class=\"container-fluid py-3\"\u003e\n  \u003ch1\u003eAngular Progressive Web Application (PWA)\u003c/h1\u003e\n\n  \u003cdiv class=\"row my-5\"\u003e\n    \u003cdiv class=\"col text-end\"\u003e\n      Status:\n    \u003c/div\u003e\n    \u003cdiv class=\"col\"\u003e\n      \u003cspan class=\"badge bg-success\" *ngIf=\"isOnline\"\u003eOnline\u003c/span\u003e\n      \u003cspan class=\"badge bg-danger\" *ngIf=\"!isOnline\"\u003eOffline\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"w-100 position-absolute top-0\" *ngIf=\"modalVersion\"\u003e\n  \u003cdiv class=\"alert alert-secondary m-2\"\u003e\n    \u003cbutton type=\"button\" class=\"btn-close position-absolute top-0 end-0 m-1\" aria-label=\"Close\" (click)=\"closeVersion()\"\u003e\u003c/button\u003e\n    A new version of this app is available. \u003ca href=\"\" (click)=\"updateVersion()\"\u003eUpdate now\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"w-100 position-absolute bottom-0\" *ngIf=\"modalPwaPlatform === 'ANDROID' || modalPwaPlatform === 'IOS'\"\u003e\n  \u003cdiv class=\"alert alert-secondary m-2\"\u003e\n    \u003cbutton type=\"button\" class=\"btn-close position-absolute top-0 end-0 m-1\" aria-label=\"Close\" (click)=\"closePwa()\"\u003e\u003c/button\u003e\n    \u003c!-- Android --\u003e\n    \u003cdiv *ngIf=\"modalPwaPlatform === 'ANDROID'\" (click)=\"addToHomeScreen()\"\u003e\n      Add this WEB app to home screen\n    \u003c/div\u003e\n    \u003c!-- iOS with Safari --\u003e\n    \u003cdiv *ngIf=\"modalPwaPlatform === 'IOS'\"\u003e\n      To install this WEB app on your device, tap the \"Menu\" button\n      \u003cimg src=\"https://res.cloudinary.com/rodrigokamada/image/upload/v1641089482/Blog/angular-pwa/safari_action_button_38x50.png\" class=\"ios-menu m-0\" /\u003e\n      and then \"Add to home screen\" button\n      \u003ci class=\"bi bi-plus-square\"\u003e\u003c/i\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**14.** Add the style in the `src/app/app.component.scss` file as below.\n\n```css\n.ios-menu {\n  width: 14px;\n}\n```\n\n**15.** Ready! Access the URL `http://localhost:4200/` and check if the application is working. See the application working on [GitHub Pages](https://rodrigokamada.github.io/angular-pwa/) and [Stackblitz](https://stackblitz.com/edit/angular14-pwa).\n\n**15.1.** Android version.\n\n\u003ctable border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg alt=\"Angular Progressive Web Application (PWA) - Android add application\" src=\"https://res.cloudinary.com/rodrigokamada/image/upload/v1641151985/Blog/angular-pwa/angular-pwa-step3-android.png\" /\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg alt=\"Angular Progressive Web Application (PWA) - Android confirm add application\" src=\"https://res.cloudinary.com/rodrigokamada/image/upload/v1641151985/Blog/angular-pwa/angular-pwa-step4-android.png\" /\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cem\u003eModal to add to home screen\u003c/em\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cem\u003eConfirmation to add to home screen\u003c/em\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n**15.2.** iOS version.\n\n\u003ctable border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg alt=\"Angular Progressive Web Application (PWA) - iOS add application\" src=\"https://res.cloudinary.com/rodrigokamada/image/upload/v1641211584/Blog/angular-pwa/angular-pwa-step3-ios.png\" /\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg alt=\"Angular Progressive Web Application (PWA) - iOS menu add application\" src=\"https://res.cloudinary.com/rodrigokamada/image/upload/v1641211584/Blog/angular-pwa/angular-pwa-step4-ios.png\" /\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cem\u003eModal to add to home screen\u003c/em\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cem\u003eMenu to add to home screen\u003c/em\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n\n## Cloning the application\n\n**1.** Clone the repository.\n\n```powershell\ngit clone git@github.com:rodrigokamada/angular-validation.git\n```\n\n**2.** Install the dependencies.\n\n```powershell\nnpm ci\n```\n\n**3.** Run the application.\n\n```powershell\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigokamada%2Fangular-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-pwa/lists"}