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