AngularでPWAやろうよ

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

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

AngularJSとAngularは別物です諸注意

とにかくフルスタック最低限必要ライブラリはだいたい公式によって⽤意されてる CLIがとっても便利半年に⼀回メジャーアップデートがあるよ*1 Component 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<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について

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

パフォーマンス向上 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: 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を使う

// 利⽤可能な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モジュール

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

AngularでPWAやろうよ

AngularでPWAやろうよ

nagimaru

More Decks by nagimaru

Other Decks in Programming

Featured

Transcript