Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.jsではじめるPWA
Search
gyarasu
August 07, 2019
Technology
2
1.6k
Next.jsではじめるPWA
2019.08.07
『Sendai Frontend Meetup #1』の登壇資料です。
https://sfeug.connpass.com/event/137013/
gyarasu
August 07, 2019
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
59
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.9k
RESTful Firebase with Vue.js
gyarasu
1
440
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
3k
PWA基礎_1
gyarasu
0
300
PWA基礎_2
gyarasu
0
180
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
人工衛星のファームウェアをRustで書く理由
koba789
15
8.3k
いま注目のAIエージェントを作ってみよう
supermarimobros
0
350
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
230
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
130
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
「Linux」という言葉が指すもの
sat
PRO
4
140
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Navigating Team Friction
lara
189
15k
Git: the NoSQL Database
bkeepers
PRO
431
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Site-Speed That Sticks
csswizardry
10
820
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Making Projects Easy
brettharned
117
6.4k
Become a Pro
speakerdeck
PRO
29
5.5k
RailsConf 2023
tenderlove
30
1.2k
Transcript
Next.jsではじめるPWA 2019/08/07 Sendai Frontend Meetup #1 吉次 洋毅
誰? • 吉次洋毅(ヨシツグヒロキ) • 1991年生まれ(27歳) • 経歴 ◦ 某レストラン検索サイトでバックエンドエンジニアなど ◦
某HR会社でエンジニアをしつつ ◦ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い • 趣味 ◦ 一人旅 & 写真 & スーパー銭湯 ◦ スマブラ(VIPボーダー周辺をウロウロ) ◦ 筋トレ @gyarasu
今日はNext.jsとPWAのお話
話すこと • ボイラープレートのご紹介 • Next.jsでPWAをするためのはじめの一歩 • Service Workerの導入でハマった話 • Nuxt.js×PWAとの比較
ボイラープレートのご紹介 https://github.com/gyarasu/nextjs-ts-pwa
Next.js×PWAはじめの一歩 まずは公式をチェック! https://nextjs.org/features/progressive-web-apps
next-offline https://github.com/hanford/next-offline
next-offline https://github.com/hanford/next-offline 中身はおなじみworkbox
next-offlineの使い方例 nextの設定ファイルにworkboxの オプションを記述できる。 (Runtime Cacheの例)
Next.js×PWAはじめの一歩 まずは公式をチェック! https://nextjs.org/features/progressive-web-apps これだけ!?
そうは問屋が卸さない
Service Worker導入で 少しハマった。
結論 • custom serverで/service-woker.jsをルーティングしてあげる必要があ る(上の例はExpress.js) • now v2(https://zeit.co/now, Lambdaに簡単にデプロイするための ツール)前提であれば特に何もしなくて良いとREADMEに書いてある
が、デプロイしてないと確認できない(少なくともローカルで動作確認で きない)
結論 • custom serverで/service-woker.jsをルーティングしてあげる必要があ る(上の例はExpress.js) • now v2(https://zeit.co/now, Lambdaに簡単にデプロイするための ツール)前提であれば特に何もしなくて良いとREADMEに書いてある
が、デプロイしてないと確認できない(少なくともローカルで動作確認で きない) アクセスURL 実際のファイルパス
結論 • custom serverで/service-woker.jsをルーティングしてあげる必要があ る(上の例はExpress.js) • now v2(https://zeit.co/now, Lambdaに簡単にデプロイするための ツール)前提であれば特に何もしなくて良いとREADMEに書いてある
が、デプロイしてないと確認できない(少なくともローカルで動作確認で きない) これをもうちょい掘り下げて Service Workerを理解する
Service Workerのscopeと生成先のパス デフォルトでは <project>/.next/service-worker に生成される
Custom Serverでルーティングせず/staticに置くと? /static/service-worker.jsで参照す ることが可能 ↓ しかし、SWがサイト全体をコント ロールすることができない
Service Workerのscope • 基本的にはサイト全体(/)をコントロールしたい →scopeを/にする • 一方で、static配下に置いた場合のアクセスURLは /static/service-worker.js • Service
Workerは自身が参照されるURLよりも上位の階層を コントロールできない
Service Workerを使うには Custom Serverで ルーティングを書く ※now v2う場合は不要 →https://github.com/hanford/next-offline#now-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
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するためのスクリプトを記 述
ボイラープレートでゆっくり見てください!
Pull Request お待ちしてます!
終