僕が考える最強のPWAボイラープレートを作る（未完成）

概要

俺が考える最強のPWAボイラープレートを作る。
俺が考える最強のPWAボイラープレートの構成は以下の通りだ。
next.jsもworkboxもあんまり触ったこと無いので、さぐりさぐりやっていく。

構成

以下の2つでアプリケーションを構築する。

next.js

• https://nextjs.org/
• SSR/SPA用

普段よく触っているのがReactなので、ReactのIsomorphic JavaScriptフレームワークを使う。

workbox

• https://developers.google.com/web/tools/workbox/
• Service Workerライブラリ

Service Workerを作るライブラリとしてはworkboxが一強っぽいのでworkboxを使ってみる。

firebase

• https://firebase.google.com/
• 主に使うのは以下の3つ
  • hosting
  • functios
  • FireStore

プラットフォームは一番手軽でタダのfirebaseを使う。

next.js/firebaseのセットアップ

理解するためにもcreate-next-appは使わずに作り込んでいく。
→ なんかめんどくさそうなのでcreate-next-app使うことにした。

create-next-appのインストール

npm i -g create-next-app

nextjsのproject作成

create-next-app --example with-firebase-hosting-and-typescript pwa-boilerplate

firebaseのproject作成

https://console.firebase.google.com/
※ 詳しくは https://qiita.com/Miracle-T-Shirt09/items/8ac43ab7a18b3001dda0 とか見て

.firebasercの編集

{
  "projects": {
    "default": "<firebase projectId>"
  }
}

動作確認

yarn run deploy

https://{projectId}.firebaseapp.com/

〜つづく〜