chrome67からデスクトップPWAが使えるようになったのでいくつかのPWAをインストールしてみたのですが良さそうな感じがしました
デスクトップPWAを使ってみた – Takeshi Amano – Medium
chromeとは別ウィンドウで起動できるのとelectronでやらなくても良くなったのでそれだけでも需要がありそうな気がします
そこで今回は angular + @anglar/pwa + @angular/materialでサクッとサンプルプロジェクトを作ってデスクトップPWAのインストールまでしてみたいと思います
そもそもPWAはみたいなところは下記
https://codelabs.developers.google.com/codelabs/your-first-pwapp-ja/#0codelabs.developers.google.com
環境
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.8
Node: 9.11.1
OS: linux x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.4.2
@angular/cli 6.0.8
@angular/material 6.4.2
@angular/pwa 0.6.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2
webpack 4.8.3
Angularプロジェクト作成
@angular/pwaを入れるだけでPWAに必要な環境をサクッと作成できるようです
- 2018-08-01時点だとcliとpwaのバージョン指定しないとangular/pwaをインストールできない
- install, project作成
npm install -g @angular/cli@6.0.8 ng new pwa-sample --style=scss --routing cd pwa-sample
- pwa,material追加
npx ng add @angular/pwa@0.6.8 --project pwa-sample npx ng add @angular/material
- materialの雛形追加
npx ng g @angular/material:material-nav --name side-nav npx ng g @angular/material:material-dashboard --name dashboard
- src/app/app.component.html
書き換える
<app-side-nav></app-side-nav> <router-outlet></router-outlet>
起動
npx ng s --host 192.168.30.17
確認する
とりあえずベースができました
ServiceWorkerの準備
PWAにするにはServiceWorkerの準備をする必要があります
npx ng build --aot --prod npx ngsw-config dist/pwa-sample ngsw-config.json
ServiceWorkerを動作させるにはビルドした成果物のディレクトリ上にngsw.jsonとngsw-worker.jsを置く必要があるので上記コマンドでdist以下に設定ファイルを置くようにします
manifest.json
ng add @angular/pwaで生成されたmanifest.jsonの設定をする
- start_urlを設定
デプロイ
今回はnetlifyを使ってみました
githubと連携してぽちぽちするだけで独自ドメイン+SSLでデプロイすることができたのでとても楽でした
ココらへんの内容はググれば結構出てくると思うので簡単にやったことだけ書いていきます
今回すでにAWS上でドメインswfz.ioを持っていたのでそれを使ってサブドメインpwa-sample.swfz.ioをRoute53で設定した
AWS側作業
- Route53での設定
- Aレコード
- CNAME
netlify側作業
デプロイ設定を入力します
- Build Command
ng build --prod --aot && ngsw-config dist/pwa-sample ngsw-config.json
- Publish Directory
dist/pwa-sample
- Production Branch
master
- SSLの設定をボタンぽちっとする
これだけで公開できました
さらにProduction Branchに指定したブランチにpushすると自動でビルドが走ってデプロイまでしてくれます
わざわざCIの設定する必要すらない
最初github pagesで頑張ろうと思ったのですがやっているうちにyak shaving感がすごくなってきたので方向転換しました
netlifyすごい
SPAとかとりえあすデプロイするならnetlifyにしとけばおｋ！という気持ちになりました
確認
デプロイされたので確認してみます
service workerが登録されていることを確認
manifest.jsonが読まれていることを確認
アイコンがデフォルトのangularのアイコンになっているのでちょっと変えてみます
適当にターミナルの一部をキャプチャしてアイコンにしました
もともとAngularのアイコンがあるのでsrc/assets/icons以下の画像を差し替えます
src/favicon.icoも差し替えます
確認すると変わっていますね
デフォルトでは10サイズのアイコン画像が用意してあるのですが横着していくつかしか用意しなかったらインストール時に怒られました
どうやら僕の環境ではデスクトップPWAのインストールには144x144のアイコン画像が必要なようです
参考のところでも言及されていたのですが端末の画面密度によって必要なアイコンのサイズが異なるようなので必要なサイズのアイコンがない場合はホームに追加できません。
なので本来は揃えられるだけサイズ違いを揃えた方が良いですね
ちゃんとアイコンも変わっています
まとめ
記事にまとめてみるとめちゃくちゃ簡単そうになりました
やっぱりアイコンが設定できてそれ用にウィンドウが立ち上がってっていうのはテンションが上がる気がします
Anaularでもpwaを追加するのとservice workerの設定を少しするだけで簡単にできるのでとりあえず対応させてもよいのでは？とか思ったりしました
これをテンプレートとしてなんかしらツールでも作ってみようかなと思ってます
全然関係ないけどnetlifyがいいですね！
3つ4つくらいフォームから設定するだけでpushしたら自動でデプロイまで行ってくれるっていうのはなかなか感動しました
httpsの設定もさくっとできるので独自ドメインを予め取っておけばすぐに公開できます
今回はとりあえず作ってみただけなので今度はServiceWorkerとか使って実用的なWebアプリを作ってみたいと思います
