Next.jsではじめるPWA

2019.08.07
『Sendai Frontend Meetup #1』の登壇資料です。
https://sfeug.connpass.com/event/137013/

Transcript

1. Next.jsではじめるPWA 2019/08/07 Sendai Frontend Meetup #1 吉次 洋毅
2. 誰？ • 吉次洋毅（ヨシツグヒロキ） • 1991年生まれ（27歳） • 経歴 ◦ 某レストラン検索サイトでバックエンドエンジニアなど ◦ 某HR会社でエンジニアをしつつ ◦ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い • 趣味 ◦ 一人旅 & 写真 & スーパー銭湯 ◦ スマブラ（VIPボーダー周辺をウロウロ） ◦ 筋トレ @gyarasu
3. 今日はNext.jsとPWAのお話
4. 話すこと • ボイラープレートのご紹介 • Next.jsでPWAをするためのはじめの一歩 • Service Workerの導入でハマった話 • Nuxt.js×PWAとの比較
5. ボイラープレートのご紹介 https://github.com/gyarasu/nextjs-ts-pwa
6. Next.js×PWAはじめの一歩 まずは公式をチェック！ 　https://nextjs.org/features/progressive-web-apps
7. next-offline https://github.com/hanford/next-offline
8. next-offline https://github.com/hanford/next-offline 中身はおなじみworkbox
9. next-offlineの使い方例 nextの設定ファイルにworkboxの オプションを記述できる。 （Runtime Cacheの例）
10. Next.js×PWAはじめの一歩 まずは公式をチェック！ 　https://nextjs.org/features/progressive-web-apps これだけ！？
11. そうは問屋が卸さない
12. Service Worker導入で 少しハマった。
13. 結論 • custom serverで/service-woker.jsをルーティングしてあげる必要があ る（上の例はExpress.js） • now v2(https://zeit.co/now, Lambdaに簡単にデプロイするための ツール)前提であれば特に何もしなくて良いとREADMEに書いてある が、デプロイしてないと確認できない（少なくともローカルで動作確認で きない）
14. 結論 • custom serverで/service-woker.jsをルーティングしてあげる必要があ る（上の例はExpress.js） • now v2(https://zeit.co/now, Lambdaに簡単にデプロイするための ツール)前提であれば特に何もしなくて良いとREADMEに書いてある が、デプロイしてないと確認できない（少なくともローカルで動作確認で きない） アクセスURL 実際のファイルパス
15. 結論 • custom serverで/service-woker.jsをルーティングしてあげる必要があ る（上の例はExpress.js） • now v2(https://zeit.co/now, Lambdaに簡単にデプロイするための ツール)前提であれば特に何もしなくて良いとREADMEに書いてある が、デプロイしてないと確認できない（少なくともローカルで動作確認で きない） これをもうちょい掘り下げて Service Workerを理解する
16. Service Workerのscopeと生成先のパス デフォルトでは <project>/.next/service-worker に生成される
17. Custom Serverでルーティングせず/staticに置くと？ /static/service-worker.jsで参照す ることが可能 　　　　　↓ しかし、SWがサイト全体をコント ロールすることができない
18. Service Workerのscope • 基本的にはサイト全体（/）をコントロールしたい →scopeを/にする • 一方で、static配下に置いた場合のアクセスURLは /static/service-worker.js • Service Workerは自身が参照されるURLよりも上位の階層を コントロールできない
19. Service Workerを使うには Custom Serverで ルーティングを書く ※now v2う場合は不要 →https://github.com/hanford/next-offline#now-20
20. Nuxt.jsとの比較（Service Worker） Nuxtでは、@nuxt/pwaを使って簡単にPWA化できる https://pwa.nuxtjs.org Nuxt.js × @nuxt/pwa Next.js × next-offline static/hoge.jsへの URL /hoge.js /static/hoge.js PWAモジュールを導入 した際のデフォルトの SW出力先パス <project>/static/sw.js <project>/.next/service-w orker.js SWのデフォルトscope / / 『Nuxt.jsとNext.jsの静的アセット、Next.jsにおけるService Worker導入』 https://scrapbox.io/gyarasu/Nuxt.js%E3%81%A8Next.js%E3%81%AE%E9%9D%99%E7%9A%8 4%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%80%81Next.js%E3%81%AB%E3 %81%8A%E3%81%91%E3%82%8BService_Worker%E5%B0%8E%E5%85%A5
21. Nuxt.jsとの比較（その他） Nuxt.js × @nuxt/pwa Next.js × next-offline manifest.json manifest moduleが含まれてい て、nuxt.config.jsに記述する manifest.json手作りして /staticに配置 →/pages/_document.jsxに参 照するためのlinkタグを追加 icon icon moduleが含まれていて 512x512の画像を用意し、必要 なサイズをnuxt.config.jsに記述 するとビルド時に生成してくれる 各サイズを自前で用意 push通知 one signal moduleが含まれて いる swのimport scriptを作成して pushするためのスクリプトを記 述
22. ボイラープレートでゆっくり見てください！
23. Pull Request お待ちしてます！
24. 終