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
6k
ゼロから始めるPWA入門
syumai
April 06, 2018
Tweet
Share
More Decks by syumai
See All by syumai
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
250
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
360
初めてDefinitelyTypedにPRを出した話
syumai
1
580
利用者視点で考える、イテレータとの上手な付き合い方
syumai
5
690
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
7
3.5k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
7
970
Goのmultiple errorsについて (2024年4月版)
syumai
5
9.1k
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
7
960
Go言語で始めるCloudflare Workers
syumai
9
2.8k
Other Decks in Programming
See All in Programming
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
1
250
DROBEの生成AI活用事例 with AWS
ippey
0
140
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
210
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
230
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
Introduction to kotlinx.rpc
arawn
0
750
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
13
4.5k
Ruby on cygwin 2025-02
fd0
0
170
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
190
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
Gamification - CAS2011
davidbonilla
80
5.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Fireside Chat
paigeccino
34
3.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Site-Speed That Sticks
csswizardry
4
400
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
500
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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を一緒にやりたい人を 募集中です!