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
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
2
320
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
920
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
240
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
2
130
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
780
制約理論(ToC)入門
recruitengineers
PRO
8
3.6k
TypeScript入門
recruitengineers
PRO
33
11k
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
68k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
670
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
120
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
110
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Embracing the Ebb and Flow
colly
87
4.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
It's Worth the Effort
3n
187
28k
Scaling GitHub
holman
463
140k
Why Our Code Smells
bkeepers
PRO
339
57k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
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 お待ちしてます!
終