angular - add pwa

ng add @angular/pwa

log

CREATE ngsw-config.json (511 bytes)
CREATE src/manifest.webmanifest (1083 bytes)
// 创建图标文件,以支持安装渐进式应用(PWA)。
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3952 bytes)
UPDATE package.json (1498 bytes)
UPDATE src/app/app.module.ts (1737 bytes)
UPDATE src/index.html (570 bytes)

angular.json

  • projects
    • your project name
      • architect
        • build
          • options
            • assets
              ["src/favicon.ico", "src/assets"] update to ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"]
          • configurations
            • production
            • add serviceWorker: true
        • test
          • options
            • assets
              ["src/favicon.ico", "src/assets"] update to ["src/favicon.ico", "src/assets", src/manifest.webmanifest]

package.json

  • dependencies
    add "@angular/pwa": "^0.13.1", "@angular/service-worker": "~7.2.0"

app.module.ts

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

imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],

index.html

add


<link rel="manifest" href="manifest.webmanifest">

<meta name="theme-color" content="#1976d2">

<body>
  <app-root>app-root>
  <noscript>Please enable JavaScript to continue using this application.noscript>
body>

install lite-server or http-server

install list-server to global

npm install -g lite-server

build project and start lite-server

only build use production environment serviceWorker work;
so use ng build --prod

ng build --prod && lite-server --baseDir "your dist dir"
ex:
ng build --prod && lite-server --baseDir dist/notebook

open localhost:3000

你可能感兴趣的:(JS,TS)