【完全保存版】thirdwebを使ってWeb3 PWAを作ってみよう！
０ はじめに
本日は、thirdwebのデモを使用して、「PWA」のデモを作ろうと思います。
PWAはProgressive Web Appの略です。
これにより、Webアプリを自分のデバイスにインストールすることができ、プッシュ通知などを行えるようになります。
１ やってみよう
では、実際に作ってみましょう。
１ git clone を行う
では、まず、git cloneを行い、ディレクトリを移動しましょう。
git clone https://github.com/thirdweb-example/pwa-demo
cd pwa-demo/ 
今回、こちらのGithubを使っています。
２ 依存関係をインストールする
次に、「yarn install」で依存関係をインストールします。
yarn install
３ 開発者モードで有効にする
次に、今回は「next.config.js」のこちらの部分をコメントアウトします。
開発者モードでも実行できるようにするためです。
４ クライアントIDを設定する
次に、「.env.example」をコピーして、「.env」ファイルを作成します。
そして、クライアントIDを貼り付けます。
「クライアントID」がご不明の場合は、こちらの記事から作ってみてください。
今回は「アクセス制御の設定」（Set Access Restrictions）で「localhost:3000」を使えるようにするのが重要です。
５ 立ち上げてみる
できましたら、「yarn dev」で立ち上げます。
yarn dev
このように立ち上がりました。
６ インストールを行う
では、こちらのボタンを押します。
アプリをインストールしてみましょう。
このように、アプリがインストールされました。
こちらをデスクトップに持っていくと、このように表示されました。
７ 表示の形式について
立ち上げると、このようにアプリっぽくなりました。
後で出てきますが、「standalone」という表示をさせています。
８ Googleログインについて
「Login」を押して、Googleログインを行います。
ちなみに、この辺りはすでにPWAの話ではありませんので、参考です。
任意のアカウントを選択します。
このようにログインが行われています。
少し時間がかかる旨が表示されています。
しばらくすると、このように表示がされました。
９ NFTの取得について
「Claim」から「Claim NFT」を押してみます。
しばらくすると、このようにNFTがクレーム（請求）できました。
１０ NFTの確認について
「NFTs」を見てみると、このようにNFTが入っていることが確認できます。
２ 設定ファイルの確認
では、ここからはコードを見てみましょう。
「next.config.js」を確認します。
１ JSDocコメントについて
/** ~ */ で囲まれているので、JSDocコメントであることが確認できました。
追加情報を提供しているようです。
２ checkJsについて
とはいえ、「tsconfig.json」を見てみると、「"checkJs": true」が存在していないので、特に型チェックは行っていなさそうです。
３ @typeアノテーションについて
そのため、強制はしていなさそうですが、@typeアノテーションを使って、「NextConfig」型と一致することを示唆しています。
４ next-pwaパッケージについて
次に、「next-pwa」パッケージを使用して、Next.jsアプリをPWAに変換するための設定を行なっています。
５ destについて
まずは、「dest」でファイルの出力先を「public」 フォルダに指定します。
６ registerについて
次に、「register」を「true」にして、Service Workerの登録を決定しています。
７ Service Workerについて
なお、「Service Worker」とは、ブラウザがバックグラウンドで実行するスクリプトです。
これにより、バックグラウンドでの実行やプッシュ通知ができるようになります。
ちなみに、出力先を「public」フォルダにしたので、このように、「Service Worker」のファイルがこちらにできています。
８ skipWaitingについて
次の「skipWaiting」では、新しい「Server Worker」がインストールされたときに、すぐにアクティブにするかを決定します。
９ disableについて
そして、「disable」の設定で、開発モードの時に、PWAを無効にしています。
今回は開発環境で行いたいので、コメントアウトしました。
１０ エクスポートについて
そして、「module.exports」でエクスポートを行なっています。
１１ basePathについて
ベースパスは特定のサブパスをアプリケーションのベースURLとして設定するためのオプションです。
ここでは、特に設定されていません。
１２ reactStrictModeについて
「reactStrictMode」は「true」に設定しています。
これにより、予期しないサイドエフェクトなどの潜在的な問題を警告やエラーとして検出できるようにしています。
１３ imageのunoptimizedについて
最後に、「image」の「unoptimized」を「true」にしているので、画像の最適化機能を無効にしています。
３ マニフェストファイルの設定内容について
では、マニフェストファイルを確認してみましょう。
WebアプリがPWAとしてどのように振る舞うかをブラウザに指示するためのものです。
１ 色の設定
まずこの辺りでは、色を設定しています。
２ 表示形式の設定
次に、「display」で表示を指定しています。
「standalone」を選択しているので、ブラウザのUIなどは表示されず、ネイティブアプリのように表示されます。
３ 範囲の設定
次に、「scope」で「Service Worker」が制御・キャッシュできるURLの範囲を定義しています。
ここでは、「"/"」としているので、すべてのページを制御・キャッシュできるようになっています。
４ スタートURLの設定
次に、「start_url」でアイコンから起動した時に、最初に表示されるURLを指定しています。
５ 名前の設定
こちらで、フルネームと省略名を指定します。
６ アイコンの設定
そして、サイズごとにアイコンを指定しています。
４ マニフェストの設定について
最後に、「Head」セクションで設定したマニフェストを設定しています。
これでマニフェストファイルを設定することができました。
今回は以上です。
いいなと思ったら応援しよう！
