$ amplify init
$ amplify add auth
$ amplify add api
$ amplify push

type Chatty @model {
  id: ID!
  user: String!
  message: String!
  createdAt: AWSDateTime
}

import { DataStore } from "@aws-amplify/datastore";
import { Chatty } from "./models";

await DataStore.save(new Chatty({
  user: "gsans",
  message: "Hi everyone!👋",
  createdAt: new Date().toISOString()
}))

import { DataStore, Predicates } from "@aws-amplify/datastore";
import { Chatty } from "./models";

const msg = await DataStore.query(Chatty, Predicates.ALL);

$ ng add @angular/pwa

ngsw-config.json (added)
src/assets/icons/icon-*.png (added)
src/manifest.webmanifest (added)
angular.json (updated)
index.html (updated)
app.module.ts (updated)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AmplifyDatastore</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
+  <noscript>Please enable JavaScript.</noscript>
</body>
</html>

import { ServiceWorkerModule } from '@angular/service-worker';
import { env } from '../environments/environment';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { 
      enabled: env.production 
    })
  ],
})
export class AppModule { }

$ ng build --prod

└── dist
  ├── assets/icons
  ├── favicon.ico
  ├── index.html
  ├── manifest.webmanifest
  ├── safety-worker.js
  ├── ngsw.json
  └── ngsw-worker.js

{
  "index": "/index.html",
  "assetGroups": [ 
     { 
       "name": "app",
     }, 
     { 
       "name": "assets", 
     }
  ]
}

{
 "name": "app", 
 "installMode": "prefetch", // prefetch | lazy
 "resources": {
   "files": [ 
     "/favicon.ico", 
     "/index.html", 
     "/manifest.webmanifest", 
     "/*.css", 
     "/*.js"
   ],
   "urls": [ 
     "https://aws-amplify.github.io/images/Logos/Amplify-Logo-White.svg"
   ]
 } 
}

{
  "name": "assets", 
  "installMode": "lazy", 
  "updateMode": "prefetch",
  "resources": {
    "files": [ 
      "/assets/**", 
      "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
    ]
  }
}

// <div *ngIf="offline">You are offline.</div>
// app.component.ts
@Component(...)
export class AppComponent implements OnInit {
  offline : boolean = false;
  ngOnInit() {
    // Registering datastore hub
    Hub.listen('datastore', message => {
      const { event, data } = message.payload;
      if (event === 'networkStatus') {
        this.offline = !data.active;
      }
    })
  }
}