$30 off During Our Annual Pro Sale. View Details »

AngularでPWAやろうよ

nagimaru
August 21, 2019

 AngularでPWAやろうよ

#pwanight にAngularの話を持ち込む

nagimaru

August 21, 2019
Tweet

More Decks by nagimaru

Other Decks in Programming

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/[email protected]
    2017/02: @angular/[email protected]
    2018/03: @angular/[email protected]

    View Slide

  15. 2016/05: @angular/[email protected]
    2017/02: @angular/[email protected]
    2018/03: @angular/[email protected]
    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