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開発.pdf
Search
アシアル株式会社
April 04, 2019
Technology
1
5.2k
初めてのPWA開発.pdf
4月8日開催のアシアル技術セミナー Vo.2
Webフロントエンド開発最前線 ~SPAおよびPWA開発プロジェクトの現場から~
「はじめてのPWA開発」
アシアル株式会社
April 04, 2019
Tweet
Share
More Decks by アシアル株式会社
See All by アシアル株式会社
第2回全国商業高校Webアプリコンテスト説明会(2024年3月版)
asial_corp
0
110
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
490
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
450
アプリ開発を目指した授業づくりについて
asial_corp
0
480
train20231223_mainslide.pdf
asial_corp
0
590
Monaca Education 活用事例セミナー:「Monacaでゲームプログラミング~作品制作事例~」
asial_corp
0
1.1k
おみくじアプリのスライド_20230719版
asial_corp
0
540
2023年度第二弾無料導入説明会
asial_corp
0
480
Monaca Education_活用事例セミナー「Monacaで情報デザイン」
asial_corp
1
500
Other Decks in Technology
See All in Technology
SOLID - Architecture and Architectural Decisions - Devfest Goa 2024
rivuchk
0
160
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
340
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
14k
まだ間に合う! 生成AIトレンド一挙おさらい & AWSのBedrockに入門しよう
minorun365
PRO
4
310
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
1.4k
実は仲良し?Amplify Gen2と生成AI
mkdev10
0
150
AWS Step Functionsのタスク入出力に秩序を与えよう
y_kotani
0
110
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
100
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
140
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1
bengo4com
8
4.5k
Oracle Cloud Infrastructure:2024年10月度サービス・アップデート
oracle4engineer
PRO
0
190
生成AIの活用パターンと継続的評価
asei
3
270
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Navigating Team Friction
lara
183
14k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
Bash Introduction
62gerente
608
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building an army of robots
kneath
302
42k
Designing for humans not robots
tammielis
249
25k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Transcript
初めての あなたのWebサイトがPWAになるまで 小椋 陽太 <
[email protected]
> アシアル株式会社 開発 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