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.6k
初めてのPWA開発.pdf
4月8日開催のアシアル技術セミナー Vo.2
Webフロントエンド開発最前線 ~SPAおよびPWA開発プロジェクトの現場から~
「はじめてのPWA開発」
アシアル株式会社
April 04, 2019
Tweet
Share
More Decks by アシアル株式会社
See All by アシアル株式会社
大学オリジナルのデジタル学生証アプリ「MyCampus」のご紹介資料
asial_corp
0
60
第2回全国商業高校Webアプリコンテスト説明会(2024年3月版)
asial_corp
0
210
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
600
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
530
アプリ開発を目指した授業づくりについて
asial_corp
0
540
train20231223_mainslide.pdf
asial_corp
0
640
Monaca Education 活用事例セミナー:「Monacaでゲームプログラミング~作品制作事例~」
asial_corp
0
1.4k
おみくじアプリのスライド_20230719版
asial_corp
0
700
2023年度第二弾無料導入説明会
asial_corp
0
530
Other Decks in Technology
See All in Technology
生成AIでwebアプリケーションを作ってみた
tajimon
2
140
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
980
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.4k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
110
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
Model Mondays S2E02: Model Context Protocol
nitya
0
220
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
950
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Designing for Performance
lara
609
69k
Unsuck your backbone
ammeep
671
58k
How STYLIGHT went responsive
nonsquared
100
5.6k
Site-Speed That Sticks
csswizardry
10
660
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Done Done
chrislema
184
16k
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