angular
PWA
angular-cli
Angular6
anguar-pwa

Angular6のPWAテンプレ作成に62秒でケリをつける

なぜAngular6でいくのか?

腐れ縁故に。以上。
Angularであれば1-2までは、しっかりと開発経験がござる。4-5は嗜む程度に。
他のフレームワークはよく知らない。知ってても知らないフリしとく。

なぜVue.jsでいかないのか?

まるで知らん故に。いつかっていうか、近々そんな仕事があるかもしれないのだが。
そんときゃ、そん時だぜ。
なぜ最近、人気なのかもよく知らん。

早速、Angular6の導入をスタート(...0秒)

Angular CLI@nextをインストール(...13秒)

npm i  @angular/cli@next -g

/Users/uwettie/.nodebrew/node/v9.2.1/bin/ng -> /Users/uwettie/.nodebrew/node/v9.2.1/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@6.0.0-rc.5 postinstall /Users/uwettie/.nodebrew/node/v9.2.1/lib/node_modules/@angular/cli
> node ./bin/ng-update-message.js

+ @angular/cli@6.0.0-rc.5
added 3 packages from 2 contributors, removed 829 packages and updated 10 packages in 12.549s

Angular/service-worker@nextをインストール(...20秒)

npm i @angular/service-worker@next --save -D

npm notice save @angular/service-worker is being moved from dependencies to devDependencies
+ @angular/service-worker@6.0.0-rc.5
added 1 package from 1 contributor and removed 2 packages in 6.274s

プロジェクト新規作成(...40秒)

  • todo-clientがプロジェクト名
  • Styleはscss形式を指定
#新規作成
ng new todo-client --style=scss


> fsevents@1.1.3 install /Users/uwettie/works/todo-client/node_modules/fsevents
> node install

[fsevents] Success: "/Users/uwettie/works/todo-client/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote

> node-sass@4.8.3 install /Users/uwettie/works/todo-client/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/uwettie/.npm/node-sass/4.8.3/darwin-x64-59_binding.node

> node-sass@4.8.3 postinstall /Users/uwettie/works/todo-client/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/uwettie/works/todo-client/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Testing binary
Binary is fine

> @angular/cli@6.0.0-rc.5 postinstall /Users/uwettie/works/todo-client/node_modules/@angular/cli
> node ./bin/ng-update-message.js

added 1289 packages from 1263 contributors in 19.187s
    Successfully initialized git.
CREATE todo-client/README.md (1032 bytes)
CREATE todo-client/angular.json (3940 bytes)
CREATE todo-client/package.json (1400 bytes)
CREATE todo-client/tsconfig.json (384 bytes)
CREATE todo-client/tslint.json (2805 bytes)
CREATE todo-client/.editorconfig (245 bytes)
CREATE todo-client/.gitignore (503 bytes)
CREATE todo-client/src/environments/environment.prod.ts (51 bytes)
CREATE todo-client/src/environments/environment.ts (743 bytes)
CREATE todo-client/src/favicon.ico (5430 bytes)
CREATE todo-client/src/index.html (297 bytes)
CREATE todo-client/src/main.ts (370 bytes)
CREATE todo-client/src/polyfills.ts (3114 bytes)
CREATE todo-client/src/test.ts (642 bytes)
CREATE todo-client/src/assets/.gitkeep (0 bytes)
CREATE todo-client/src/styles.scss (80 bytes)
CREATE todo-client/src/browserslist (51 bytes)
CREATE todo-client/src/karma.conf.js (961 bytes)
CREATE todo-client/src/tsconfig.app.json (194 bytes)
CREATE todo-client/src/tsconfig.spec.json (282 bytes)
CREATE todo-client/src/tslint.json (314 bytes)
CREATE todo-client/src/app/app.module.ts (314 bytes)
CREATE todo-client/src/app/app.component.scss (0 bytes)
CREATE todo-client/src/app/app.component.html (1141 bytes)
CREATE todo-client/src/app/app.component.spec.ts (986 bytes)
CREATE todo-client/src/app/app.component.ts (208 bytes)
CREATE todo-client/e2e/protractor.conf.js (752 bytes)
CREATE todo-client/e2e/src/app.e2e-spec.ts (299 bytes)
CREATE todo-client/e2e/src/app.po.ts (208 bytes)
CREATE todo-client/e2e/tsconfig.e2e.json (213 bytes)

Service workerをプロジェクトに追加(...47秒)

  • コマンド一発叩くだけで、PWAに必要な物を一式追加&設定ファイル変更まで、99.9%全自動でやってくれる
#todo-clientプロジェクトにPWAに必要なものを追加&設定変更
ng add @angular/pwa --project todo-client

Installing packages for tooling via npm.
+ @angular/pwa@0.5.7
added 2 packages from 2 contributors in 6.479s
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 (1078 bytes)
UPDATE angular.json (3977 bytes)
UPDATE package.json (1492 bytes)
UPDATE src/app/app.module.ts (526 bytes)
UPDATE src/index.html (448 bytes)

残りの0.01%のCLIのヘマを手動で補ってPWA化完成(...55秒)

  • index.htmlを開いて、manifest.jsonのパスにassets/を追加
index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TodoClient</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="manifest" href="manifest.json">
+  <link rel="manifest" href="assets/manifest.json">
  <meta name="Description" content="Angular Application">
  <meta name="theme-color" content="#FFFFFF">
</head>
<body>
  <app-root></app-root>
</body>
</html>
  • manifest.jsonを開いてアプリ名を追記
  • アイコンのパスが間違ってるので、先頭のimages/を削除
manifest.json
{
-  "name": "",
+  "name": "TODO",
-  "short_name": "",
+  "short_name": "TODO",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
-      "src": "images/icons/icon-72x72.png",
+      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-96x96.png",
+      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-128x128.png",
+      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-144x144.png",
+      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-152x152.png",
+      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-192x192.png",
+      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-384x384.png",
+      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
-      "src": "images/icons/icon-512x512.png",
+      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

アプリをビルドして起動(...61秒)

#ビルドして起動
ng serve --prod

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ **

Date: 2018-04-18T10:52:22.699Z
Hash: 33cc649a5cfed1025def
Time: 14030ms
chunk {0} runtime.5f9d33fb31487f0fdbf1.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2d976f42c1abc2acac30.js (polyfills) 59.4 kB [initial] [rendered]
chunk {3} main.36c19e7e550fc6ca18f9.js (main) 305 kB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.

ページにアクセス(...62秒)

http://localhost:4200/

初期表示画面

Screen Shot 2018-04-18 at 18.16.15.png

PWA設定

  • マニフェスト

Screen Shot 2018-04-18 at 19.09.36.png

  • Service worker

Screen Shot 2018-04-18 at 19.53.03.png

PWAのテンプレ完成(...62秒)

PWAアプリのテンプレ作成は、たったのこれだけ。
62秒でケリがつきました。

Vue.jsはこれ以上に簡単に作れて、パフォーマンス良いって事なんだろうか?

私にはそっちは全くわかりませんが、Angular6の現場からは以上です!

参考

公式Angular6ガイド -> https://next.angular.io/

感想

Angular6、リリースだってよにて、バージョン6でコンパイラを色々変えたって話だったけど
ビルドがAngular5より早くなってるのは感じます。