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
660
ElixirでWebフロントエンドは出来るのか
leafia78
1
440
Other Decks in Programming
See All in Programming
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
KATA
mclloyd
29
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Being A Developer After 40
akosma
86
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Scaling GitHub
holman
458
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Building an army of robots
kneath
302
42k
Visualization
eitanlees
144
15k
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モジュール
ありがとうございました!