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
5k
初めての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
56
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
430
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
420
アプリ開発を目指した授業づくりについて
asial_corp
0
440
train20231223_mainslide.pdf
asial_corp
0
560
Monaca Education 活用事例セミナー:「Monacaでゲームプログラミング~作品制作事例~」
asial_corp
0
950
おみくじアプリのスライド_20230719版
asial_corp
0
410
2023年度第二弾無料導入説明会
asial_corp
0
440
Monaca Education_活用事例セミナー「Monacaで情報デザイン」
asial_corp
1
440
Other Decks in Technology
See All in Technology
Developing image pull secrets provisioner / Kubernetes Meetup Tokyo #65
pfn
PRO
2
240
actionlint の Linter 設計
rhysd
5
610
障害対応の人間的側面
katsuhisa91
PRO
2
520
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
2
990
株式会社EventHub・エンジニア採用資料
eventhub
0
2.3k
JAWS-UGの楽しみ方
schwrzktz
1
390
10分で完全に理解するGuardDutyのS3マルウェア保護
cmusudakeisuke
0
920
TypeScripterに送るIaCの世界への招待〜AWS CDKと共に〜/inviting-typescripters-to-the-world-of-iac-with-aws-cdk
tomoki10
0
430
「メタスキル」を意図的に使おう ~自律的なチームを育むマネージャーのセルフマネジメント~/Use Metaskills consciously
ohnoeight
1
490
VS CodeとVimが好きなエンジニアが考えた最強のエディタ
miura55
0
120
Monitoring user experience of Flutter apps with SLI/SLO (日本語)
ostk0069
0
160
BFが動くCPUを作りたい! @第3回CPUを語る会
chizuchizu
1
180
Featured
See All Featured
Facilitating Awesome Meetings
lara
44
5.7k
Building Adaptive Systems
keathley
33
2k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Producing Creativity
orderedlist
PRO
338
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
34
47k
The Cost Of JavaScript in 2023
addyosmani
24
4.1k
What's new in Ruby 2.0
geeforr
338
31k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Large-scale JavaScript Application Architecture
addyosmani
505
110k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Code Reviewing Like a Champion
maltzj
516
39k
GitHub's CSS Performance
jonrohan
1025
450k
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