AngularでPWAやろうよ

#pwanight にAngularの話を持ち込む

Transcript

1. AngularでPWAやろうよ PWA Night vol.7@Yahoo! Lodge
2. 
   エンジニア,
   UIデザイナー
   @
   utsuke
   Inc.
   Elixir,
   Elm,
   TypeScript,
   Expo
   神社巡り,
   バスケ
   @ngmr_mo
   (nagimaru) About me Tomoya Ishizaka
3. AngularJSとAngularは別物です 諸注意
5. とにかくフルスタック 最低限必要ライブラリはだいたい公式によって⽤意されてる CLIがとっても便利 半年に⼀回メジャーアップデートがあるよ*1 Component Dev Kitが便利 RxJS + TypeScriptが前提 *1 古いバージョンも18ヶ⽉サポートされる Angularの魅⼒
6. @angular/material @angular/common/http @angular/router @angular/pwa @angular/animations @angular/fire @angular/forms @angular/cdk @angular/service-worker @angular/platform-webworker などなど... Angular公式が提供するパッケージ
7. ng
   generate
   component
   hoge でコンポーネントの雛壇が吐き出せる ng
   update だけでメジャーアップデートに対応 ng
   xi18n で多⾔語対応 @angular-devkit/schematicsを使うと⾃分でSchematicsを作れる*1 他にもたくさんのコマンドが⽤意されているよ *1 2年前Pug+Stylusに対応したコンポーネントを吐き出すng generateを作ったら便利だった Angular CLIが便利
8. Component Dev Kit (@angular/cdk) は コンポーネントを開発する際にありがちな機能を 基盤としてまとめたパッケージ Component Dev Kitについて
9. 例えば地味にめんどくさいDrag & Drop (D&Dで並び替えられるリストを作る例) Component Dev Kitについて
10. 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<string[]>): void { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex) } } <section class="container"> <ul cdkDropList [cdkDropListData]="items" (cdkDropListDropped)="drop($event)" > <li draggable="true" class="item" *ngFor="let item of items" cdkDrag>{{item}}</li> </ul> </section> Component Dev Kitについて
11. 以上のように、多くの部分を優しく包み込んでくれる フレームワークです
12. パフォーマンス向上 CDKにVirtual ScrollingとDrag and Dropの追加 Custom Elementsのサポートを開始 Web Workerのサポートを開始 Ivyが実験的に搭載され、 enableIvyするとテンプレートの型チェックが実現 Differential Loadingが導⼊され、モダンブラウザ向けレガシーブラウザ向け 両⽅のコードが吐き出され、実⾏ブラウザによってロードするコードを変える ここ1年のAngularの進化(v7, v8)
13. AngularでのPWAへの取り組み
14. 2016/05: @angular/service-worker@0.1.13 2017/02: @angular/service-worker@1.0.0-beta.1 2018/03: @angular/pwa@0.0.1
15. 2016/05: @angular/service-worker@0.1.13 2017/02: @angular/service-worker@1.0.0-beta.1 2018/03: @angular/pwa@0.0.1 iOS SafariがSWをサポートするより遠く昔からガッツリ
16. manifest.webmanifestの追加 アイコンなどのアセット追加 @angular/pwaと@angular/service-workerがpackage.jsonに追加される ng
    g
    app-shell でApp Shellが⽣産できるように ng add @angular/pwa すると
17. ngsw-config.jsonを元にngsw-worker.jsを⽣産する 以下の2つのインターフェースに沿ってキャッシュルールを記述できる // 画像アセットなど向け interface AssetGroup { name: string installMode?: 'prefetch' | 'lazy' updateMode?: 'prefetch' | 'lazy' resources: { files?: string[] urls?: string[] } } // 外部API などのデータ向け export interface DataGroup { name: string urls: string[] version?: number cacheConfig: { maxSize: number maxAge: string timeout?: string strategy?: 'freshness' | 'performance' } } @angular/service-workerを使う
18. // 利⽤可能な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モジュール
19. ありがとうございました！