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
54
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.8k
RESTful Firebase with Vue.js
gyarasu
1
430
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
2.9k
PWA基礎_1
gyarasu
0
300
PWA基礎_2
gyarasu
0
180
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.6k
Other Decks in Technology
See All in Technology
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
320
AIの電力問題を概観する
rmaruy
1
230
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
150
AIエージェント実践集中コース LT
okaru
1
160
CSSDay, Amsterdam
brucel
0
170
Kafka vs. Pulsar: Performance Evaluation by Petabyte-Scale Streaming Platform Providers
lycorptech_jp
PRO
0
120
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.3k
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
1
1k
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
390
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
750
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLとの向き合い方2022年版
quramy
46
14k
Fireside Chat
paigeccino
37
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Adopting Sorbet at Scale
ufuk
76
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Making Projects Easy
brettharned
116
6.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 お待ちしてます!
終