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
ゼロから始めるPWA入門
Search
syumai
April 06, 2018
Programming
6
6.1k
ゼロから始めるPWA入門
syumai
April 06, 2018
Tweet
Share
More Decks by syumai
See All by syumai
GoのGenericsによるslice操作との付き合い方
syumai
3
740
GoのWebAssembly活用パターン紹介
syumai
3
11k
Cloudflare Workersで進めるリモートMCP活用
syumai
13
2.3k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
510
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
440
初めてDefinitelyTypedにPRを出した話
syumai
1
700
利用者視点で考える、イテレータとの上手な付き合い方
syumai
7
870
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
9
4k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
7
1.1k
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Team operations that are not burdened by SRE
kazatohiei
1
310
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
Visualization
eitanlees
146
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Embracing the Ebb and Flow
colly
86
4.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Music & Morning Musume
bryan
46
6.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Adaptive Systems
keathley
43
2.7k
Transcript
ゼロから始めるPWA入門 @__syumai 2018.4.6 Webエンジニア勉強会 #06
自己紹介 しゅーまい ダックリングズ株式会社 フロントエンド / サーバーサイド 担当 VR / ウェディング関連のサービスをやってるベンチャー
エンジニアは2名 4月で新卒3年目 最近はReact Native / Rails / Vue.jsをやってます Twitter: @__syumai(アンダーバー2 つ) GitHub: syumai
入門と言うより、勉強の記録です…汗 => github.com/syumai/sw-playground
目次 1. Progressive Web App (PWA) とは 2. PWAの構成要素 3.
開発ツールについて 4. Service Workerで遊んでみた 5. 次に試したい事
Progressive Web Appとは
『はじめてのプログレッシブウェブアプリ | Web | Google Developers』 https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
ウェブとアプリの両方の利点
ウェブの利点 • 手軽 • 更新が楽 • データが軽い
アプリの利点 • オフライン利用可 • Push通知 • 動作が軽い
アプリの利点 • オフライン利用可 • Push通知 • 動作が軽い ↑PWAなら実現できる!
利用事例 • Twitter Lite ◦ データセーバー機能あり、省データに特化 • Instagram ◦ 画像フィルタも使える
None
初回ダウンロード => 4.1MB アプリ => 約35MB Twitter Lite
初回ダウンロード => 47.8KB アプリ => 約34MB Instagram
PWAの構成要素
主要なPWAの構成要素 • Service Worker (一番大事!) • Cache Storage • Web
App Manifest
今回紹介しないもの • Web Push API / Web Notification API ◦
昔はGCMとか必要で設定めっちゃ大変だった • IndexedDB ◦ SWから非同期的に扱えるNoSQL DB 他にもいろいろあります
Service Worker
Service Worker • Webページのバックグラウンドで走るスクリプト • 別のスクリプトからインストールする • 閲覧中のページのDOM操作などは行わない • ブラウザを閉じても、通知の待ち受けなどに使える
• Webのリクエストに介入できる
Service Worker • Webページのバックグラウンドで走るスクリプト • 別のスクリプトからインストールする • 閲覧中のページのDOM操作などは行わない • ブラウザを閉じても、通知の待ち受けなどに使える
• Webのリクエストに介入できる ↑リクエストを捕まえて、任意のレスポンスを返せる!
Service Worker • かなり強力な機能のため、SSL環境 or localhostでしか動きません
Cache Storage
Cache Storage • 開発者が完全にコントロール出来るキャッシュストレージ • html, css, js, 画像など、Webサイト上の任意のファイルを保存出来る •
ドメインごとに保存される • ネームスペースが切れる (v1など) • 明示的に削除しない限りクリアされない
Cache Storageから取り出して Service Workerから返す ↓ オフラインで完全に動作する Webサイトが作れる!
Web App Manifest
Web App Manifest • Webサイトのアプリとしての振る舞いを定義する • アイコン • アプリ名 •
テーマカラー (AndroidのChrome等で有効) • ホームURL • デバイスの向き • フルスクリーンかどうか など
None
インストールしたアプリと同じように、 ホームから開けるようになる!
開発ツールについて
Chrome Dev Toolsが最強
これ!
Chrome Dev Tools • Service Workerのデバッグが簡単 • バックグラウンドで動いていても、ブレークポイント置いたり出来る • オフライン環境の再現もチェック一つで
• リロードでService Workerをアップデートできるオプションも
Chrome Dev Tools • Cache Storageの中身を簡単に見れる • 即座に削除も可能
開発ツールの詳細は、 Totally Tooling Tips (S3) をYouTubeで! https://www.youtube.com/playlist?list=PLNYkxOF6rcIB3ci 6nwNyLYNU6RDOU3YyL
Lighthouse
Google公式のPWA監査ツール
Lighthouse • PWAのパフォーマンスをチェックしてレポートを作ってくれる • Chrome拡張で簡単に入る
Service Workerで遊んでみた
Service Worker • リクエストに介入できる • => fetchのイベントを捕まえて、別のレスポンスを返せる
普通の使い方
インストール時にキャッシュ https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
リクエストを捕まえて、キャッシュからレスポンスを返す https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
今回やってみた事 => 存在しないページを返す
Dummy Router • ページをめくってpagesディレクトリ配下のHTMLをガンガン読む
pages/x.htmlと言うファイルは無い
テンプレートのHTMLをコード内に用意 https://github.com/syumai/sw-playground/blob/master/dummy-router/sw.js
テンプレートからHTMLを生成して返す https://github.com/syumai/sw-playground/blob/master/dummy-router/sw.js
デモ https://syumai.github.io/sw-playground/dummy-router/
次にやった事
キャッシュしたテンプレート +JSONからレスポンス生成!
デモ https://syumai.github.io/sw-playground/basic-progressive-blog/
レスポンスの軽量化! • HTMLはあるけど、取りに行かず、ServiceWorkerで生成! • HTML => 28KB • SW +
JSON => 8KB
大変だったこと • 任意のファイルをキャッシュから取り出す作業 • 任意のレスポンスで e.respondWith => Responseオブジェクトを返すasync functionを書いて頑張った
次にやりたい事 • Nuxt.jsのPWAモジュール • APIサーバーとの連携
ダックリングズでは React Nativeを一緒にやりたい人を 募集中です!