Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.jsではじめるPWA

gyarasu
August 07, 2019

 Next.jsではじめるPWA

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

gyarasu

August 07, 2019
Tweet

More Decks by gyarasu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 今日はNext.jsとPWAのお話

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. そうは問屋が卸さない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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出力先パス
    /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

    View full-size slide

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

    View full-size slide

  22. ボイラープレートでゆっくり見てください!

    View full-size slide

  23. Pull Request
    お待ちしてます!

    View full-size slide