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
190
AngularでPWAやろうよ
#pwanight にAngularの話を持ち込む
nagimaru
August 21, 2019
Tweet
Share
More Decks by nagimaru
See All by nagimaru
Elmが思ったより良かった話
leafia78
0
640
ElixirでWebフロントエンドは出来るのか
leafia78
1
440
Other Decks in Programming
See All in Programming
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
実践!難読化ガイド
mitchan
0
210
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
830
2024 컴포즈 정원사
jisungbin
0
150
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Prolog入門
qnighy
4
1k
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
A New Era of Testing
mannodermaus
2
510
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
How GitHub (no longer) Works
holman
310
140k
Thoughts on Productivity
jonyablonski
66
4.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
It's Worth the Effort
3n
182
27k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Debugging Ruby Performance
tmm1
72
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
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モジュール
ありがとうございました!