Next.jsではじめるPWA

Slide 1

Slide 1 text

Next.jsではじめるPWA 2019/08/07 Sendai Frontend Meetup #1 吉次洋毅

Slide 2

Slide 2 text

誰？ ● 吉次洋毅（ヨシツグヒロキ） ● 1991年生まれ（27歳） ● 経歴 ○ 某レストラン検索サイトでバックエンドエンジニアなど ○ 某HR会社でエンジニアをしつつ ○ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い ● 趣味 ○ 一人旅 & 写真 & スーパー銭湯 ○ スマブラ（VIPボーダー周辺をウロウロ） ○ 筋トレ @gyarasu

Slide 3

Slide 3 text

今日はNext.jsとPWAのお話

Slide 4

Slide 4 text

話すこと ● ボイラープレートのご紹介 ● Next.jsでPWAをするためのはじめの一歩 ● Service Workerの導入でハマった話 ● Nuxt.js×PWAとの比較

Slide 5

Slide 5 text

ボイラープレートのご紹介 https://github.com/gyarasu/nextjs-ts-pwa

Slide 6

Slide 6 text

Next.js×PWAはじめの一歩まずは公式をチェック！　https://nextjs.org/features/progressive-web-apps

Slide 7

Slide 7 text

next-offline https://github.com/hanford/next-offline

Slide 8

Slide 8 text

next-offline https://github.com/hanford/next-offline 中身はおなじみworkbox

Slide 9

Slide 9 text

next-offlineの使い方例 nextの設定ファイルにworkboxのオプションを記述できる。（Runtime Cacheの例）

Slide 10

Slide 10 text

Next.js×PWAはじめの一歩まずは公式をチェック！　https://nextjs.org/features/progressive-web-apps これだけ！？

Slide 11

Slide 11 text

そうは問屋が卸さない

Slide 12

Slide 12 text

Service Worker導入で少しハマった。

Slide 13

Slide 13 text

結論 ● custom serverで/service-woker.jsをルーティングしてあげる必要がある（上の例はExpress.js） ● now v2(https://zeit.co/now, Lambdaに簡単にデプロイするためのツール)前提であれば特に何もしなくて良いとREADMEに書いてあるが、デプロイしてないと確認できない（少なくともローカルで動作確認できない）

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Service Workerのscopeと生成先のパスデフォルトでは /.next/service-worker に生成される

Slide 17

Slide 17 text

Custom Serverでルーティングせず/staticに置くと？ /static/service-worker.jsで参照することが可能　　　　　↓ しかし、SWがサイト全体をコントロールすることができない

Slide 18

Slide 18 text

Service Workerのscope ● 基本的にはサイト全体（/）をコントロールしたい →scopeを/にする ● 一方で、static配下に置いた場合のアクセスURLは /static/service-worker.js ● Service Workerは自身が参照されるURLよりも上位の階層をコントロールできない

Slide 19

Slide 19 text

Service Workerを使うには Custom Serverでルーティングを書く ※now v2う場合は不要 →https://github.com/hanford/next-offline#now-20

Slide 20

Slide 20 text

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出力先パス /static/sw.js /.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

Slide 21

Slide 21 text

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するためのスクリプトを記述