Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
初めてのPWA開発.pdf
アシアル株式会社
April 04, 2019
Technology
1
4.2k
初めてのPWA開発.pdf
4月8日開催のアシアル技術セミナー Vo.2
Webフロントエンド開発最前線 ~SPAおよびPWA開発プロジェクトの現場から~
「はじめてのPWA開発」
アシアル株式会社
April 04, 2019
Tweet
Share
More Decks by アシアル株式会社
See All by アシアル株式会社
アプリ開発の新たな選択肢が登場!Google社製Flutterのご紹介
asial_corp
0
420
モバイルUIアニメーション入門
asial_corp
0
420
Vue.jsでのSPA開発の実際
asial_corp
1
1.5k
20190131_1
asial_corp
1
2.5k
20190131_2
asial_corp
1
2.5k
HTML5モバイルアプリ開発講座(Onsen UI入門編)
asial_corp
0
4k
HTML5モバイルアプリ開発講座(サーバー接続編)
asial_corp
0
870
HTML5モバイルアプリ開発講座(Monaca入門編)
asial_corp
0
5.4k
Other Decks in Technology
See All in Technology
Unity Package Managerで自作パッケージを配布する方法
yunoda
0
270
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
220
testing journey / テストが嫌いでIT業界を離れるはずだったのに〜テスト嫌いが現場で品質改善を実施するまでの物語〜
aki_moon
1
450
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
1k
LINE WORKS API 2.0について
mmclsntr
0
150
A1A会社紹介資料-2022-05-20
a1a
2
1.1k
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
2.2k
Embedded SRE at Mercari
tcnksm
0
870
⚡Lightdashを試してみた
k_data_analyst
0
220
[SRE NEXT 2022]メルカリグループにおけるSREs
srenext
0
630
srenext2022-skaru
mixi_engineers
PRO
1
1.1k
失敗から学ぶAWSコスト管理入門 ~想定の50倍以上の請求がきた話~
msato
0
470
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
324
54k
Code Reviewing Like a Champion
maltzj
506
37k
Music & Morning Musume
bryan
35
4.2k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
YesSQL, Process and Tooling at Scale
rocio
157
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
35k
Web Components: a chance to create the future
zenorocha
303
40k
What the flash - Photography Introduction
edds
61
10k
Bash Introduction
62gerente
596
210k
Scaling GitHub
holman
451
140k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Transcript
初めての あなたのWebサイトがPWAになるまで 小椋 陽太 <youta@asial.co.jp> アシアル株式会社 開発 1 Youta OGURA
PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 2
PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 PWAとは PWAが実現すること 3
PWAの基礎知識を知る > PWAとは • Reliable • Fast • Engaging 低速なネットワークや無線状態でも利用できる
コンテンツやアニメーションを高速で描画できる ネイティブアプリのように直感的に操作ができる = 4 Googleが推進する先進的な モバイルウェブのユーザー体験の指針
段階的 レスポンシブ ネットワーク 接続に 依存しない アプリ 感覚 常に 最新 安全
再エンゲージ メント可能 リンク 可能 PWAの基礎知識を知る > PWAが実現すること インストール 可能 発見 しやすい 5
段階的 レスポンシブ ネットワーク 接続に 依存しない アプリ 感覚 常に 最新 安全
再エンゲージ メント可能 リンク 可能 PWAの基礎知識を知る > PWAが実現すること インストール 可能 発見 しやすい 6
オフラインでも、遅いネットワーク環境でも 高速で動作 面倒な再インストールなしで 自動アップデート ネイティブアプリのように端末に インストール 常に 最新 PWAの基礎知識を知る >
PWAが実現すること 7 ネットワーク 接続に 依存しない インストール 可能
そこで重要なのが Service Worker 8
PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 Service Workerとは Service Workerを利用した PWAの基本構造
Service Workerの ライフサイクル 9
• アプリとサーバとの間でネットワークリクエストを監視 • アプリに必要なリソースをキャッシュストレージから提供 • キャッシュストレージを最新に維持 Service Worker = Service
Workerを知る > Service Workerとは 10 アプリごとにブラウザに登録され、 バックグラウンドで動くスクリプト
Service Worker のイベント 11 Service Workerを知る > Service Workerを利用したPWAの基本構造 Uninstall
Activate Install Wait ブラウザへ登録される 更新の登録待ちをする ブラウザへの登録を解除される アプリを制御できる状態になる
Server Client Application Service Worker & Cache Storage 12 Activate
Service Workerを利用したPWAの基本構造 - アクティベートされている場合
Server Client Application Service Worker & Cache Storage 13 Install
Service Workerを利用したPWAの基本構造 - 初めて登録される場合
Client Application Service Worker & Cache Storage 14 Server Uninstall
Wait Service Workerを利用したPWAの基本構造 - 更新された場合
wait 初回 2回目以降 更新あり uninstall 起動 状態遷移 install activate activate
install ・アセットをキャッシュ ・リクエストを監視 ・データをキャッシュ ・アセットを再キャッシュ ・リクエストを監視 ・データをキャッシュ 15 処理内容 Service Workerを知る > Service Workerのライフサイクル OLD NEW
PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 PWA化の必要要件 Service Worker を作成する ウェブアプリマニフェストを作成する
16
ネットワーク 接続に 依存しない 常に最新 インストール 可能 17 PWAを実装する > PWAの必要要件
の必要要件
ネットワーク 接続に 依存しない 常に最新 インストール 可能 18 の必要要件 PWAを実装する >
Service Workerを作成する
インストール時にアセットをキャッシュする アセットのリクエストを検知する データのリクエストを検知する アセットの更新時に古いキャッシュを削除する STEP 1 STEP 2 STEP 3
STEP 4 Service Worker を作成する 19 PWAを実装する > Service Workerを作成する
<script> if ('serviceWorker' in navigator) { // 対応しているブラウザでService Worker登録 navigator.serviceWorker
.register('/service-worker.js') } </script> 20 index.html PWAを実装する > Service Workerを作成する service-worker.js を新規作成 STEP 0 HTMLに登録処理を実装 Service Worker 登録処理
var filesToCache = [ '/', // index.html '/app.js', '/manifest.json', '/style.css',
'/jquery-3.3.1.min.js', ] self.addEventListener('install', function(e) { e.waitUntil( // cacheNameをキーにキャッシュ保存 caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); // or cache.add }) ) }) STEP 1 21 PWAを実装する > Service Workerを作成する service-worker.js インストール時にアセットをキャッシュする インストールを検知 アセットをキャッシュ
STEP 2 self.addEventListener('fetch', function(e) { // 一致するものがあればキャッシュを返し // なければサーバーにリクエストする e.respondWith(
caches.match(e.request) .then(function(response) { return response || fetch(e.request) }) ) }) 22 PWAを実装する > Service Workerを作成する アセットのリクエストを検知する service-worker.js アセットのリクエスト検知 キャッシュからレスポンス返却
STEP 3-1 self.addEventListener('fetch', function(e) { var dataUrl = 'https://api...get.php' if
(!e.request.url.indexOf(dataUrl)) { // データ取得URLの場合常にキャッシュを最新化 e.respondWith( fetch(e.request).then(function(response) { return caches.open(dataCacheName) .then(function(cache) { cache.put(e.request.url, response.clone()) return response }) }) ) // 以下省略 23 PWAを実装する > Service Workerを作成する データのリクエストを検知する service-worker.js データのリクエスト検知 Service Workerの処理
STEP 3-2 const dataUrl = 'https://api.../get.php' let dataset = []
if ('caches' in window) { // まずキャッシュからデータを取得 caches.match(dataUrl).then(function (res) { dataset = res || [] }) } $.get(dataUrl, {fmt: 'json'}, function (res) { // 後からサーバーからデータを取得 dataset = res || [] }) 24 app.js PWAを実装する > Service Workerを作成する データのリクエストを検知する キャッシュからデータを取得 サーバーからデータを取得
self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keys) { return Promise.all(keys.map(function(key) { if
(key !== cacheName) { // キーが違う場合古いものを削除 return caches.delete(key) } })) }) ) }) 25 STEP 4 PWAを実装する > Service Workerを作成する アセットの更新時に古いキャッシュを削除する service-worker.js Service Workerの差分を確認 キャッシュのキーが違う場合 古いキャッシュを削除
ネットワーク 接続に 依存しない 常に最新 インストール 可能 26 の必要要件 PWAを実装する >
ウェブアプリマニフェストを作成する
ウェブアプリマニフェストを作成する 27 マニフェストファイルを定義する HTMLから参照する STEP 1 STEP 2 PWAを実装する >
ウェブアプリマニフェストを作成する
28 ウェブアプリ マニフェスト = • アイコン • テーマカラー • アプリ名
・・・etc PWAを実装する > ウェブアプリマニフェストを作成する アプリをインストールするための メタデータを定義するjsonファイル
29 { "icons": [{ "src": "/icon_512x512.png", "sizes": "512x512", "type": "image/png"
}], "name": "My Progressive Web App", "short_name": "MyPWA", "display": "standalone", "start_url": ".", "description": "My awesome Progressive Web App!", "background_color": "#ffffff" } manifest.json STEP 1 マニフェストファイルを定義する PWAを実装する > ウェブアプリマニフェストを作成する manifest.json を新規作成 JSON形式でメタデータを定義
30 <!DOCTYPE html> <html> <head> <!-- 省略 --> <link rel="manifest"
href="/manifest.json"> <!-- 省略 --> </head> <!-- 省略 --> index.html STEP 2 <link> タグを設定する HTMLから参照する PWAを実装する > ウェブアプリマニフェストを作成する
ネットワーク 接続に 依存しない 常に最新 インストール 可能 31 PWAを実装する の必要要件
PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 32 さらにProgressiveに 参考サイト
33 UI/UX さらにProgressiveに レスポンシブデザイン クロスブラウザ対応 アニメーション SNSシェア対応 Performance 初回ロードの高速化 キャッシュ戦略の最適化
アップデートの効率化 Others SEO対策 PUSH通知 オフライン状態通知
34 参考サイト • はじめてのプログレッシブ ウェブアプリ - Google Developers ◦ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
• Service Worker の紹介 - Google Developers ◦ https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja • Progressive Web App Checklist - Google Developers ◦ https://developers.google.com/web/progressive-web-apps/checklist • PRPLパターン - Google Developers ◦ https://developers.google.com/web/fundamentals/performance/prpl-pattern/ • Caching best practices & max-age gotchas - Jake Archibald ◦ https://jakearchibald.com/2016/caching-best-practices/ • What, Exactly, Makes Something A Progressive Web App? - Infrequently ◦ https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/ • ウェブアプリマニフェスト - MDN web docs ◦ https://developer.mozilla.org/ja/docs/Web/Manifest
35