#pwanight にAngularの話を持ち込む
AngularでPWAやろうよPWA Night vol.7@Yahoo! Lodge
View Slide
エンジニア,UIデザイナー@utsukeInc.Elixir,Elm,TypeScript,Expo神社巡り,バスケ@ngmr_mo(nagimaru)About meTomoya Ishizaka
AngularJSとAngularは別物です諸注意
とにかくフルスタック最低限必要ライブラリはだいたい公式によって⽤意されてるCLIがとっても便利半年に⼀回メジャーアップデートがあるよ*1Component Dev Kitが便利RxJS + TypeScriptが前提*1 古いバージョンも18ヶ⽉サポートされるAngularの魅⼒
@angular/material @angular/common/http @angular/router@angular/pwa @angular/animations @angular/fire@angular/forms @angular/cdk @angular/service-worker@angular/platform-webworkerなどなど...Angular公式が提供するパッケージ
nggeneratecomponenthoge でコンポーネントの雛壇が吐き出せるngupdate だけでメジャーアップデートに対応ngxi18n で多⾔語対応@angular-devkit/schematicsを使うと⾃分でSchematicsを作れる*1他にもたくさんのコマンドが⽤意されているよ*1 2年前Pug+Stylusに対応したコンポーネントを吐き出すng generateを作ったら便利だったAngular CLIが便利
Component Dev Kit (@angular/cdk) はコンポーネントを開発する際にありがちな機能を基盤としてまとめたパッケージComponent Dev Kitについて
例えば地味にめんどくさいDrag & Drop(D&Dで並び替えられるリストを作る例)Component Dev Kitについて
import { Component } from '@angular/core'import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: [ './app.component.styl' ]})export class AppComponent {public items = ['Item1', 'Item2', 'Item3', 'Item4']public drop(event: CdkDragDrop): void {moveItemInArray(event.container.data, event.previousIndex, event.currentIndex)}}[cdkDropListData]="items"(cdkDropListDropped)="drop($event)" >{{item}}Component Dev Kitについて
以上のように、多くの部分を優しく包み込んでくれるフレームワークです
パフォーマンス向上CDKにVirtual ScrollingとDrag and Dropの追加Custom Elementsのサポートを開始Web Workerのサポートを開始Ivyが実験的に搭載され、 enableIvyするとテンプレートの型チェックが実現Differential Loadingが導⼊され、モダンブラウザ向けレガシーブラウザ向け両⽅のコードが吐き出され、実⾏ブラウザによってロードするコードを変えるここ1年のAngularの進化(v7, v8)
AngularでのPWAへの取り組み
2016/05: @angular/[email protected]2017/02: @angular/[email protected]2018/03: @angular/[email protected]
2016/05: @angular/[email protected]2017/02: @angular/[email protected]2018/03: @angular/[email protected]iOS SafariがSWをサポートするより遠く昔からガッツリ
manifest.webmanifestの追加アイコンなどのアセット追加@angular/pwaと@angular/service-workerがpackage.jsonに追加されるnggapp-shell でApp Shellが⽣産できるようにng add @angular/pwa すると
ngsw-config.jsonを元にngsw-worker.jsを⽣産する以下の2つのインターフェースに沿ってキャッシュルールを記述できる//画像アセットなど向けinterface AssetGroup {name: stringinstallMode?: 'prefetch' | 'lazy'updateMode?: 'prefetch' | 'lazy'resources: {files?: string[]urls?: string[]}}//外部APIなどのデータ向けexport interface DataGroup {name: stringurls: string[]version?: numbercacheConfig: {maxSize: numbermaxAge: stringtimeout?: stringstrategy?: 'freshness' | 'performance'}}@angular/service-workerを使う
//利⽤可能なswが⾒つかったswUpdate.available.subscribe(event => {console.log('current version: ', event.current)console.log('available version: ', event.available)})// swが新しくactivateされたswUpdate.activated.subscribe(event => {console.log('old version: ', event.previous)console.log('new version: ', event.current)})// Service Workerが有効かswUpdate.isEnabled // => boolean//新しいswがあるかチェック(availableが発⽕)swUpdate.checkForUpdate()//強制的に新しいswをactivateするswUpdate.activateUpdate()SwUpdateモジュール
ありがとうございました!