@angular/pwa を使ってみる

Progressive Web Apps ってそんなに新しいネタという感じはしないけど、twitter 見てたら @angular/pwa というのが v6 で利用できるらしいので備忘録

A new Angular Service Worker — creating automatic progressive web apps. Part 2: practice の画像を拝借

angular-cli v6 に

普段通り angular-cli を最新にする。

$ npm uninstall @angular/cli -g
$ npm install @angular/cli@next -g
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.0-rc.6
Node: 8.9.4
OS: darwin x64
Angular: 6.0.0-rc.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.8
@angular-devkit/build-angular     0.5.8
@angular-devkit/build-optimizer   0.5.8
@angular-devkit/core              0.5.8
@angular-devkit/schematics        0.5.8
@angular/cli                      6.0.0-rc.6
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.6
@schematics/angular               0.5.8
@schematics/update                0.5.8
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0
    
$ 

Progressive Web Apps の設定

プロジェクトを生成し @angular/pwa 動かし @angular/service-worker をインストールする

$ ng new pwa-angular --prefix pa --routing
$ cd pwa-angular
$ ng add @angular/pwa --project pwa-angular
Installing packages for tooling via npm.
+ @angular/pwa@0.5.8
added 2 packages in 5.567s
Installed packages for tooling via npm.
CREATE ngsw-config.json (463 bytes)
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)
CREATE src/assets/manifest.json (1086 bytes)
UPDATE angular.json (3876 bytes)
UPDATE package.json (1446 bytes)
UPDATE src/app/app.module.ts (605 bytes)
UPDATE src/index.html (451 bytes)
removed 2 packages in 5.794s
$ npm install @angular/service-worker -S

なるほど的なファイルを追加・更新してくれて良い。

実行してみる

最後にnpm-scripts にコマンドを登録する

"build:prod:ngsw": "ng build --service-worker --prod",
"serve:prod:ngsw": "npm run build:prod:ngsw && http-server dist/pwa-angular -p 8080"

npm run serve:prod:ngsw を実行するとデバック後のコードをブラウザで見ることができる（けど色々とありまして）。

おわり