Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularでPWAやろうよ
Search
nagimaru
August 21, 2019
Programming
0
200
AngularでPWAやろうよ
#pwanight にAngularの話を持ち込む
nagimaru
August 21, 2019
Tweet
Share
More Decks by nagimaru
See All by nagimaru
Elmが思ったより良かった話
leafia78
0
710
ElixirでWebフロントエンドは出来るのか
leafia78
1
450
Other Decks in Programming
See All in Programming
漸進。
ssssota
0
1.1k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
1
270
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6k
Perlで痩せる
yuukis
1
660
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
600
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
190
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Music & Morning Musume
bryan
47
6.6k
Balancing Empowerment & Direction
lara
1
84
YesSQL, Process and Tooling at Scale
rocio
172
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Building Adaptive Systems
keathley
41
2.6k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
How STYLIGHT went responsive
nonsquared
100
5.6k
Being A Developer After 40
akosma
91
590k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Transcript
AngularでPWAやろうよ PWA Night vol.7@Yahoo! Lodge
エンジニア,UIデザイナー@utsukeInc. Elixir,Elm,TypeScript,Expo 神社巡り,バスケ @ngmr_mo(nagimaru) About me Tomoya Ishizaka
AngularJSとAngularは別物です 諸注意
None
とにかくフルスタック 最低限必要ライブラリはだいたい公式によって⽤意されてる 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モジュール
ありがとうございました!