AngularでPWAやろうよ

#pwanight にAngularの話を持ち込む

Transcript

1. AngularでPWAやろうよ
   PWA Night vol.7@Yahoo! Lodge
   

   View Slide

2. エンジニア,UIデザイナー@utsukeInc.
   Elixir,Elm,TypeScript,Expo
   神社巡り,バスケ
   @ngmr_mo(nagimaru)
   About me
   Tomoya Ishizaka
   

   View Slide

3. AngularJSとAngularは別物です
   諸注意
   

   View Slide

4. View Slide

5. とにかくフルスタック
   最低限必要ライブラリはだいたい公式によって⽤意されてる
   CLIがとっても便利
   半年に⼀回メジャーアップデートがあるよ*1
   Component Dev Kitが便利
   RxJS + TypeScriptが前提
   *1 古いバージョンも18ヶ⽉サポートされる
   Angularの魅⼒
   

   View Slide

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公式が提供するパッケージ
   

   View Slide

7. nggeneratecomponenthoge でコンポーネントの雛壇が吐き出せる
   ngupdate だけでメジャーアップデートに対応
   ngxi18n で多⾔語対応
   @angular-devkit/schematicsを使うと⾃分でSchematicsを作れる*1
   他にもたくさんのコマンドが⽤意されているよ
   *1 2年前Pug+Stylusに対応したコンポーネントを吐き出すng generateを作ったら便利だった
   Angular CLIが便利
   

   View Slide

8. Component Dev Kit (@angular/cdk) は
   コンポーネントを開発する際にありがちな機能を
   基盤としてまとめたパッケージ
   Component Dev Kitについて
   

   View Slide

9. 例えば地味にめんどくさいDrag & Drop
   (D&Dで並び替えられるリストを作る例)
   Component Dev Kitについて
   

   View Slide

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): void {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex)
    }
    }
    
    [cdkDropListData]="items"
    (cdkDropListDropped)="drop($event)" >
    {{item}}
    
    
    Component Dev Kitについて
    

    View Slide

11. 以上のように、多くの部分を優しく包み込んでくれる
    フレームワークです
    

    View Slide

12. パフォーマンス向上
    CDKにVirtual ScrollingとDrag and Dropの追加
    Custom Elementsのサポートを開始
    Web Workerのサポートを開始
    Ivyが実験的に搭載され、 enableIvyするとテンプレートの型チェックが実現
    Differential Loadingが導⼊され、モダンブラウザ向けレガシーブラウザ向け
    両⽅のコードが吐き出され、実⾏ブラウザによってロードするコードを変える
    ここ1年のAngularの進化(v7, v8)
    

    View Slide

13. AngularでのPWAへの取り組み
    

    View Slide

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
    

    View Slide

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をサポートするより遠く昔からガッツリ
    

    View Slide

16. manifest.webmanifestの追加
    アイコンなどのアセット追加
    @angular/pwaと@angular/service-workerがpackage.jsonに追加される
    nggapp-shell でApp Shellが⽣産できるように
    ng add @angular/pwa すると
    

    View Slide

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を使う
    

    View Slide

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モジュール
    

    View Slide

19. ありがとうございました！
    

    View Slide