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. 誰? • 吉次洋毅(ヨシツグヒロキ) • 1991年生まれ(27歳) • 経歴 ◦ 某レストラン検索サイトでバックエンドエンジニアなど ◦

    某HR会社でエンジニアをしつつ ◦ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い • 趣味 ◦ 一人旅 & 写真 & スーパー銭湯 ◦ スマブラ(VIPボーダー周辺をウロウロ) ◦ 筋トレ @gyarasu
  2. 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
  3. 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するためのスクリプトを記 述