Share
Embed
Slide 1
Slide 1 text
@vite-pwa/nuxt を用いた、PWA実装のリアル
@kspace_trk
Slide 2
Slide 2 text
keigo
合同会社Steg 代表, Vue.js-jp メンバー
写真・映像
作曲
Webアプリケーション開発・デザイン
Works
@kspace_trk
@kspace_trk
Slide 3
Slide 3 text
@kspace_trk
弊社の開発実績
Slide 4
Slide 4 text
@kspace_trk
モバイルアプリ / Push通知 / オフライン対応 / 複数管理者が利用する管理画面 etc...
Slide 5
Slide 5 text
@kspace_trk
さまざまな要件がある中、どのように実現したかを紹介
Slide 6
Slide 6 text
@kspace_trk
フル Nuxt 構成で実現
Slide 7
Slide 7 text
@kspace_trk
フル Nuxt 構成で実現
共通構成
フロントエンド
バックエンド
DB Connection, ORM
Nuxt ( Vue )
Nuxt ( Nitro )
Drizzle
Slide 8
Slide 8 text
@kspace_trk
管理画面
Nuxt UI / Nuxt UI Pro
Slide 9
Slide 9 text
@kspace_trk
モバイルアプリ
@vite-pwa/nuxt
Slide 10
Slide 10 text
@kspace_trk
モバイルアプリ
モバイルアプリは、特に考慮事項が多かった。
@vite-pwa/nuxt
Slide 11
Slide 11 text
@kspace_trk
モバイルアプリ
緊急時の利用シーンも想定されている。
@vite-pwa/nuxt
Slide 12
Slide 12 text
@kspace_trk
モバイルアプリ
オフライン環境でも情報が閲覧できることが求められる。
@vite-pwa/nuxt
Slide 13
Slide 13 text
PWA
@kspace_trk
@vite-pwa/nuxt を用いた、キャッシュ・ネットワーク戦略
Slide 14
Slide 14 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
そもそもなにをしたらPWAになるのか
Slide 15
Slide 15 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
そもそもなにをしたらPWAになるのか
Web app manifest + Service Worker
Hosted on HTTPS
Slide 16
Slide 16 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
そもそもなにをしたらPWAになるのか
manifest.json
sw.js
Slide 17
Slide 17 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
そもそもなにをしたらPWAになるのか
manifest.json
ネットワーク戦略やbg処理の設定が可能。
自力でコードを書くと少し複雑という問題も
sw.js
Slide 18
Slide 18 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
そもそもなにをしたらPWAになるのか
manifest.json
抽象化してくれる Workbox
というライブラリ群が存在
sw.js
Slide 19
Slide 19 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
nuxt.config.ts から sw.js になるまで
nuxt.config.ts
nuxt.config.ts で、workbox の設定が記述可能
sw.js
workbox
@vite-pwa/nuxt
Slide 20
Slide 20 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
nuxt.config.ts から sw.js になるまで
nuxt.config.ts @vite-pwa/nuxt
これによって、シンプルな設定でオフライン対応が実現
sw.js
workbox
Slide 21
Slide 21 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.globPatterns を用いた プリキャッシュ
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
: {
: {
: [ ]
}
}
'**/*.html'
Slide 22
Slide 22 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.globPatterns を用いた プリキャッシュ
初回アクセス時、html ファイルがキャッシュされるようになる
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
: {
: {
: [ ]
}
}
'**/*.html'
Slide 23
Slide 23 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.globPatterns を用いた プリキャッシュ
プリキャッシュしたいファイルの拡張子を指定
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
: {
: {
: [ ]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
Slide 24
Slide 24 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.globPatterns を用いた プリキャッシュ
一方で、最新情報が常に表示されない問題が発生。
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
: {
: {
: [ ]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
Slide 25
Slide 25 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
Service Worker には、いくつかのネットワーク戦略が存在
Slide 26
Slide 26 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
Service Worker には、いくつかのネットワーク戦略が存在
and more...
Cache First:
キャッシュ優先。なければネットワークから取得。
Network First:
ネットワーク優先。なければキャッシュから取得。
Stale While Revalidate:
まずはキャッシュを返すが、同時にネットワークからも取得して更新。
Slide 27
Slide 27 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
Service Worker には、いくつかのネットワーク戦略が存在
Cache First:
キャッシュ優先。なければネットワークから取得。
Network First:
ネットワーク優先。なければキャッシュから取得。
Stale While Revalidate:
まずはキャッシュを返すが、同時にネットワークからも取得して更新。
Slide 28
Slide 28 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.runtimeCaching を用いたネットワーク戦略
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
: {
: {
: [ ]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
Slide 29
Slide 29 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.runtimeCaching を用いたネットワーク戦略
+
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
runtimeCaching
: {
: {
: [ ],
: []
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
Slide 30
Slide 30 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.runtimeCaching を用いたネットワーク戦略
+
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
runtimeCaching
urlPattern startsWith
handler
: {
: {
: [ ],
: [{
: ({ }) => ( ),
:
}]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
.pathname. '/api/'
'NetworkFirst'
url url
Slide 31
Slide 31 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.runtimeCaching を用いたネットワーク戦略
プリキャッシュも、ネットワーク戦略も完了！PWA余裕じゃん！
+
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
runtimeCaching
urlPattern startsWith
handler
: {
: {
: [ ],
: [{
: ({ }) => ( ),
:
}]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
.pathname. '/api/'
'NetworkFirst'
url url
Slide 32
Slide 32 text
PWA
@kspace_trk
@vite-pwa/nuxt における キャッシュ・ネットワーク戦略
workbox.runtimeCaching を用いたネットワーク戦略
そう思っていた時期が私にもありました。
+
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
runtimeCaching
urlPattern startsWith
handler
: {
: {
: [ ],
: [{
: ({ }) => ( ),
:
}]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
.pathname. '/api/'
'NetworkFirst'
url url
Slide 33
Slide 33 text
PWA
@kspace_trk
@vite-pwa/nuxt における Push 通知対応
Push通知要件「こんにちは＾＾」
Slide 34
Slide 34 text
PWA
@kspace_trk
Workbox では、Push通知に関する設定ができなかった......
@vite-pwa/nuxt における Push 通知対応
Slide 35
Slide 35 text
PWA
@kspace_trk
Push通知に関する設定は sw.js に実装すべきだが、
sw.js は Workbox が生成してしまう。
@vite-pwa/nuxt における Push 通知対応
Slide 36
Slide 36 text
PWA
@kspace_trk
え、じゃあ @vite-pwa/nuxt 使えないってコト！？
@vite-pwa/nuxt における Push 通知対応
Slide 37
Slide 37 text
PWA
@kspace_trk
そんなことはない
@vite-pwa/nuxt における Push 通知対応
Slide 38
Slide 38 text
PWA
@kspace_trk
Push通知に関する設定は sw.js に実装すべきだが、
sw.js は Workbox が生成してしまう。
@vite-pwa/nuxt における Push 通知対応
Slide 39
Slide 39 text
PWA
@kspace_trk
Push通知に関する設定は sw.js に実装すべきだが、
sw.js は Workbox が生成してしまう。
→ デフォルトで generateSW が有効になっているから
@vite-pwa/nuxt における Push 通知対応
Slide 40
Slide 40 text
PWA
@kspace_trk
Push通知に関する設定は sw.js に実装すべきだが、
sw.js は Workbox が生成してしまう。
→ injectManifest にすることで、Service Worker を独自実装可能。
@vite-pwa/nuxt における Push 通知対応
Slide 41
Slide 41 text
PWA
@kspace_trk
→ injectManifest にすることで、Service Worker を独自実装可能。
しかも、sw.js ではなく sw.ts で実装できる
Push通知に関する設定は sw.js に実装すべきだが、
sw.js は Workbox が生成してしまう。
@vite-pwa/nuxt における Push 通知対応
Slide 42
Slide 42 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
先ほどの設定コード
@vite-pwa/nuxt における Push 通知対応
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
runtimeCaching
urlPattern startsWith
handler
: {
: {
: [ ],
: [{
: ({ }) => ( ),
:
}]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
.pathname. '/api/'
'NetworkFirst'
url url
Slide 43
Slide 43 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
先ほどの設定コード
-
// nuxt.config.ts
~~
~~
~~
pwa
workbox
globPatterns
runtimeCaching
urlPattern startsWith
handler
: {
: {
: [ ],
: [{
: ({ }) => ( ),
:
}]
}
}
'**/*.{js,css,html,png,svg,ico,webp,json}'
.pathname. '/api/'
'NetworkFirst'
url url
@vite-pwa/nuxt における Push 通知対応
Slide 44
Slide 44 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// nuxt.config.ts
~~
~~
~~
pwa: {
}
先ほどの設定コード
@vite-pwa/nuxt における Push 通知対応
Slide 45
Slide 45 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// nuxt.config.ts
~~
~~
~~
pwa
strategies
: {
: ,
}
'injectManifest'
injectManifest を有効
@vite-pwa/nuxt における Push 通知対応
Slide 46
Slide 46 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// nuxt.config.ts
~~
~~
~~
pwa
strategies
globPatterns
: {
: ,
: [ ],
}
'injectManifest'
'**/*.{js,css,html,png,svg,ico,webp,json}'
キャッシュファイルは nuxt.config.ts で指定可能
@vite-pwa/nuxt における Push 通知対応
Slide 47
Slide 47 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// nuxt.config.ts
~~
~~
~~
pwa
strategies
globPatterns
srcDir
filename
: {
: ,
: [ ],
: ,
: ,
}
'injectManifest'
'**/*.{js,css,html,png,svg,ico,webp,json}'
'./sw'
'sw.ts'
カスタム sw.ts の path や ファイル名を指定
@vite-pwa/nuxt における Push 通知対応
Slide 48
Slide 48 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
sw.ts にはどう実装すればいい？
@vite-pwa/nuxt における Push 通知対応
Slide 49
Slide 49 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
ネットワーク戦略
Push通知
sw.ts に実装したもの
@vite-pwa/nuxt における Push 通知対応
Slide 50
Slide 50 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
@vite-pwa/nuxt における Push 通知対応
ネットワーク戦略
Push通知
workbox ライブラリを使用
@firebase/messaging/sw を使用
sw.ts に実装したもの
Slide 51
Slide 51 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
{ }
{ }
{ }
import from
import from
import from
precacheAndRoute, cleanupOutdatedCaches ;
registerRoute ;
NetworkFirst ;
'workbox-precaching'
'workbox-routing'
'workbox-strategies'
workbox ライブラリ群から import
※ 説明を簡単にするために、省略している箇所があります
@vite-pwa/nuxt における Push 通知対応
Slide 52
Slide 52 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
{ }
{ }
{ }
~~
// nuxt.config.ts に記載されている Precache 設定を反映させる
import from
import from
import from
precacheAndRoute, cleanupOutdatedCaches ;
registerRoute ;
NetworkFirst ;
( . );
'workbox-precaching'
'workbox-routing'
'workbox-strategies'
__WB_MANIFEST
precacheAndRoute self
precacheAndRoute で、nuxt.config.ts に記述したキャッシュ設定を反映
@vite-pwa/nuxt における Push 通知対応
※ 説明を簡単にするために、省略している箇所があります
Slide 53
Slide 53 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
{ }
{ }
{ }
~~
// nuxt.config.ts に記載されている Precache 設定を反映させる
// NetworkFirst戦略を適用
import from
import from
import from
precacheAndRoute, cleanupOutdatedCaches ;
registerRoute ;
NetworkFirst ;
( . );
(
({ }) => . . ( ),
(),
);
'workbox-precaching'
'workbox-routing'
'workbox-strategies'
__WB_MANIFEST
pathname '/api/'
NetworkFirst
precacheAndRoute self
registerRoute
url url startsWith
new
@vite-pwa/nuxt における Push 通知対応
registerRoute で、ネットワーク戦略を適用
※ 説明を簡単にするために、省略している箇所があります
Slide 54
Slide 54 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
~~
@vite-pwa/nuxt における Push 通知対応
※ 説明を簡単にするために、省略している箇所があります
Push通知設定について
Slide 55
Slide 55 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
~~
{ }
{ }
import from
import from
initializeApp ;
getMessaging, onBackgroundMessage ;
'firebase/app'
'firebase/messaging/sw'
@vite-pwa/nuxt における Push 通知対応
※ 説明を簡単にするために、省略している箇所があります
Firebase Cloud Messaging を利用する場合
Slide 56
Slide 56 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
~~
{ }
{ }
import from
import from
initializeApp ;
getMessaging, onBackgroundMessage ;
const = ( );
const = ( );
'firebase/app'
'firebase/messaging/sw'
firebaseConfig
app
app initializeApp
messaging getMessaging
@vite-pwa/nuxt における Push 通知対応
※ 説明を簡単にするために、省略している箇所があります
Firebase Cloud Messaging を利用する場合
Slide 57
Slide 57 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
// sw/sw.ts
~~
{ }
{ }
~~
import from
import from
initializeApp ;
getMessaging, onBackgroundMessage ;
const = ( );
const = ( );
( , ({ }) => {
. . ( . , { , });
});
'firebase/app'
'firebase/messaging/sw'
firebaseConfig
app
registration title
app initializeApp
messaging getMessaging
onBackgroundMessage messaging data
self showNotification data body data
@vite-pwa/nuxt における Push 通知対応
※ 説明を簡単にするために、省略している箇所があります
onBackgroundMessage と showNotification を使用して、Push通知を実現
Slide 58
Slide 58 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
@vite-pwa/nuxt における Push 通知対応
プリキャッシュ
ネットワーク戦略
Push通知
Slide 59
Slide 59 text
PWA
@kspace_trk
injectManifest を用いた、カスタムsw実装
@vite-pwa/nuxt における Push 通知対応
プリキャッシュ
ネットワーク戦略
Push通知
Slide 60
Slide 60 text
PWA
@kspace_trk
まとめ
@vite-pwa/nuxt を使用して、PWA 実装が可能
オフライン対応・Push通知も実現可能
しかし、generateSW ではなく injectManifest を使用する必要がある。
Slide 61
Slide 61 text
@vite-pwa/nuxt を用いた、PWA実装のリアル
@kspace_trk