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
5.8k
ゼロから始めるPWA入門
syumai
April 06, 2018
Tweet
Share
More Decks by syumai
See All by syumai
Goのmultiple errorsについて (2024年4月版)
syumai
4
990
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
5
520
Go言語で始めるCloudflare Workers
syumai
4
1.3k
Goのジェネリクスを活用する
syumai
2
2.6k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
4.5k
What's new in Go 1.20?
syumai
2
1.7k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
1.1k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
660
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
470
Other Decks in Programming
See All in Programming
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Netty Chicago Java User Group 2024-04-17
sullis
0
180
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
880
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
PHPはいつから死んでいるかの調査
chiroruxx
1
400
見た目から始める生産性向上
ikumatadokoro
8
970
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
840
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Music & Morning Musume
bryan
41
5.6k
The Cult of Friendly URLs
andyhume
74
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
KATA
mclloyd
15
12k
GraphQLとの向き合い方2022年版
quramy
32
12k
Documentation Writing (for coders)
carmenintech
60
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Designing the Hi-DPI Web
ddemaree
276
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Code Reviewing Like a Champion
maltzj
514
39k
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を一緒にやりたい人を 募集中です!