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.4k
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
27
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.1k
RESTful Firebase with Vue.js
gyarasu
1
370
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.5k
副業時代のプロジェクトマネジメント
gyarasu
3
2.7k
PWA基礎_1
gyarasu
0
280
PWA基礎_2
gyarasu
0
160
PWA基礎_3
gyarasu
0
150
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.5k
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
地理情報とAPIのトレンド
nagix
0
160
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
AOAI Dev Day - Opening Session
yoshidashingo
2
430
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
エンジニア向け会社紹介資料
caddi_eng
14
220k
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Classmethod Odyssey 登壇資料
yamahiro
0
390
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
How to train your dragon (web standard)
notwaldorf
79
5.5k
The Invisible Customer
myddelton
117
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Writing Fast Ruby
sferik
623
60k
A Philosophy of Restraint
colly
200
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Navigating Team Friction
lara
181
13k
For a Future-Friendly Web
brad_frost
173
9.2k
Why Our Code Smells
bkeepers
PRO
332
56k
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 お待ちしてます!
終