Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした