Edited at

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

More than 1 year has passed since last update.


なぜ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より早くなってるのは感じます。