Zenn
🐙

Next.js環境でのPWA(Progressive Web App)の導入手順

2022/03/24に公開6件
Next.js
PWA
React
TypeScript
tech

PWA(Progressive Web App)とは？

PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

簡単に言ってしまうと、ウェブアプリでありながらネイティブアプリのように使用できるようにする機能です。

PWAは、通常のウェブアプリのように、HTML、CSS、Javascript等で構成されます。
また、下記のようなメリットがあります。

  • 通常のウェブアプリよりも高速
  • インストール可能
  • どのブラウザでも動く
  • オフラインでも閲覧可能
  • プッシュ通知を送れる・受け取れる

これを用いられているウェブアプリを例としてご紹介すると、Twitterです。
PCのChrome上では検索ボックスの右側にPCに下矢印のマークが表示されます。

これをクリックすると、ポップアップが表示され、「インストール」を押下するとアプリがインストールされます。

Next.js環境でのPWA(Progressive Web App)の導入手順

今回は、Next.jsでのPWAの導入手順をご紹介します。

Next.js環境の構築

Next.jsをインストールされていない方は下記でNext.jsをインストール出来ます。

npx create-next-app アプリケーション名

もしくは、Docker環境でNext.jsをインストールされたい方は下記を参照して見て下さい。

https://zenn.dev/ttani/articles/wsl2-docker-next-setup

next-pwaのインストール

下記のいずれかを使用し、next-pwaをインストールします。

npmやyarnで直接インストールする方法

npm install next-pwa

yarn add next-pwa

Dockerコンテナの場合

docker-compose run -w /usr/app --rm app yarn add next-pwa

manifestの生成

手動で作成する方法もあるのですが、今回はSimicartを使用して、manifestを生成します。
Displayでは、Standaloneを選択し、それ以外の項目は任意の値を入力し、GENERATE MANIFESTボタンを押下してください。

https://www.simicart.com/manifest-generator.html

入力値イメージ

manifestのzipがダウンロードされ、下記のようなmanifestとイメージが生成されます。

{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "next sample pwa",
    "short_name": "pwa",
    "description": "This is a demo to create PWA with next",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

それを展開し、中身をpublicフォルダ内に移動させます。
また、manifest.webmanifestをmanifest.jsonに名称の変更をします。

publicフォルダ内配置イメージ

  • favicon.ico
  • icon-192x192.png (manifestから移動)
  • icon-256x256.png (manifestから移動)
  • icon-384x384.png (manifestから移動)
  • icon-512x512.png (manifestから移動)
  • manifest.json (manifestから移動)

_document.tsxファイルを作成する

pagesフォルダ内に_document.tsx(拡張子はご自身の他のファイルに併せて大丈夫です。)を作成し、下記を貼り付けます。

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/icon.png"></link>
          <meta name="theme-color" content="#fff" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

next.config.js

next.config.jsファイルを開き、下記のように設定します。

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
  },
  reactStrinctMode: true,
});

そして、起動し、localhostを表示させます。

このように表示がされれば成功です。

インストール用のアイコンを押下し、インストールを押下します。
インストールが完了するとこのように表示がされるはずです。

これでPWAを導入できました。

補足

.gitignoreの設定

PWAの起動が成功すると、

  • sw.js
  • sw.js.map
  • vercel.svg
  • workbox***.js
  • workbox***.js.map
    の5つがpublicフォルダ内に生成されると思います。
    これらのファイルは恒久的に更新がされてしまう為、GitHubへは必要がないので、取り除くようにしましょう。

.gitignore内に下記を追加する。

# PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map

developmentでPWAを無効にする

開発環境ではPWAを無効にしたいと思う場合があるかと思いますので、その場合は、next.config.jsにdisableを追加しましょう。

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
　　disable: process.env.NODE_ENV === "development",
  },
  reactStrinctMode: true,
});

これで開発環境でのPWAを無効に出来たかと思います。

まとめ

今回はNext.js環境へのPWA(Progressive Web App)の導入手順を1から順を追って説明しました。
非常に簡単にPWAの導入が出来るようになったと思うので、今後より多くのウェブアプリでPWAが導入されることになるかもしれませんね。
この記事が参考になれば幸いです。
ここまでお読みいただきありがとうございました。

参考にしたサイト

https://dev.to/byteslash/how-to-create-a-pwa-with-next-js-4dbm

Discussion

kona(coffee)kona(coffee)

有意義な投稿有難うございます。
NextのPWA化で悩んでいた処、こちらを拝見しました。

本記事のお陰でPWA化が完了しました。
ありがとうございました。

ywzxywzx

最新バージョンだとimportの仕方が変わっているので参考までに！

const withPWA = require("next-pwa")({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NEXT_PUBLIC_NODE_ENV === "development",
});

const nextConfig = withPWA({
  ...
});
himurahimura

http://kr12.opsarang1.com/ Pool salon, office, rest hotel, Gangnam pool salon, Gangnam office, Gangnam rest hotel,
Gangnam gunma, Gangnam massage, Gangnam business trip, Gangnam kiss room, Gangnam cafe

himurahimura

https://오피사랑.com/ Pool salon, office, rest hotel, Gangnam pool salon, Gangnam office, Gangnam rest hotel,
Gangnam gunma, Gangnam massage, Gangnam business trip, Gangnam kiss room, Gangnam cafe

himurahimura

https://opsarang.com/ Pool salon, office, rest hotel, Gangnam pool salon, Gangnam office, Gangnam rest hotel,
Gangnam gunma, Gangnam massage, Gangnam business trip, Gangnam kiss room, Gangnam cafe

ログインするとコメントできます