@vite-pwa/nuxt を用いた、PWA実装のリアル

Figma Prototype: https://www.figma.com/proto/PiEnGhpKfozrb4thQQ0a1J/vite-pwa-nuxt%E3%82%92%E7%94%A8%E3%81%84%E3%81%9F%E3%80%81PWA%E5%AE%9F%E8%A3%85%E3%81%AE%E3%83%AA%E3%82%A2%E3%83%AB?page-id=103%3A307&node-id=111-681&viewport=279%2C452%2C0.08&t=I4zsjKo1cFyLWjvP-1&scaling=contain&content-scaling=fixed

Transcript

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