PWA化 - Githubissues

Next.jsでのPWA化

next-pwaを使用する

https://github.com/shadowwalker/next-pwa

インストールは下記コマンドを実行

yarn add next-pwa

Next.js のバージョンが9以上だと、service workerのファイルは自動で作成してくれる。

自動で作成するには、next.config.jsでwithPWAを指定する。

const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public'
  }
})

publicフォルダにservice worker関連のフォルダが作成される。

public
  |-- sw.js
  |-- sw.js.map
  |-- workbox-hogehoge.js
  `-- workbox.hogehoge.js.map

gitignoreに下記を追加しておく。

# PWA
public/sw.js*
public/workbox-*

Github Pagesで使用する上での注意点

Github Pagesはhttps://ユーザー名.github.io/リポジトリ名/の構成になっているので、そのままではうまく動かない。

サブドメイン設定を有効にする。

next.config.jsを下記のように記載する。

require('dotenv').config();
const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    subdomainPrefix: process.env.GITHUB_PAGES
      ? process.env.REPOSITORY_NAME
      : '',
  },
  basePath: process.env.GITHUB_PAGES ? process.env.REPOSITORY_NAME : '',
});

subdomainPrefixがサブドメインを有効にするかの設定。

https://qiita.com/ozaki25/items/fe9912fc41c3a5c5bfea を参考に、GithubPagesのときだけ、GITHUB_PAGESの環境変数を渡している。ついでREPOSITORY_NAMEも渡す。

GithubActions固有のGITHUB_REPOSITORY環境変数を使えばもう少しスマートにできそうだけどうまくできなかったので、今後見直す。

sakelog / nextjs_timer

PWA化 #1

Next.jsでのPWA化

Github Pagesで使用する上での注意点