この記事はトレタ Advent Calendar 2017の11日目の記事です。 dev.toで最近話題になったPWA実装ですが、今日はそのPWA設計パターンの1つであるPRPLを実践するために必要な技術スタックとその実装方法についてまとめました。 PRPLパターンとは Googleが提唱するPWAの設計パターンの1つです。 PRPL パターン | Web | Google Developers (P)ush: HTTP/2 Pushを用いて初期表示に必要なリソースを配信します (R)ender: 最小限の初期描画を行い、インタラクティブな状態にします (P)re-cache: ServiceWorkerを用いて事前に他のルートのリソースをキャッシュします (L)azy-load: ユーザー操作に合わせてオンデマンドにリソースの配信と生成を行います これらの頭文字をとってPRPLと