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
720
ElixirでWebフロントエンドは出来るのか
leafia78
1
460
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
470
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
670
開発生産性を上げるための生成AI活用術
starfish719
3
440
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.9k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
Catch Up: Go Style Guide Update
andpad
0
220
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
30k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
530
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Speed Design
sergeychernyshev
32
1.2k
How to Ace a Technical Interview
jacobian
280
24k
Gamification - CAS2011
davidbonilla
81
5.5k
Fireside Chat
paigeccino
40
3.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Making Projects Easy
brettharned
119
6.4k
BBQ
matthewcrist
89
9.8k
Code Review Best Practice
trishagee
72
19k
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モジュール
ありがとうございました!