なぜやるか
- 普通にやってても満点は難しい。まずは無で100点を目指す。
- Google が Mobile First Index やりだしたら多分 lighthouse のスコアも使うだろうという予想
- next.js というある程度現実的なフレームワークを使うことで適度に YakShaving もこなせるだろうという予想
使ったもの
- next.js: export mode
- workbox
結果
コード
https://github.com/mizchi/next-pwa-boilerplate
デプロイ先(netlify)
https://eloquent-spence-e8f2bb.netlify.com/
PWA 91点は、 netlify 使っている制限で、HTTP to HTTPS のリダイレクトを設定するにはカスタムドメインを設定する必要があり、金を払いたくないので諦めた。設定すれば 98 点ぐらいになるとは思う。
制約
next.js の静的ファイル書き出しモードで実行してるので、動的なURLはクエリパラメータで受け取るか、事前にexport設定を指定してビルドする必要があり、URLの自由度がちょっと低くなってしまった。ただ、これは他の静的PWAでも事前に <pathname>/index.html を吐き出す必要があるので、静的サイトの制約。
完全に自由なURL表現をしたい場合、 next.js を node としてデプロイすることで実現可能だが、 そうなると自然に pm2 とか付いてくるんで面倒。
個人の意見としては、日本のWebはユニコードの言語制約で英語のリーダブルなURLを使わない(使えない)傾向があるので、 一旦は
/pages?id=1111 みたいなクエリパラメータでやっておいて、どうしてもかっこいいURLが必要ならやる、という感じでいいと思う。
URLパラメータを用いる際のSEO上の注意点 | SEO研究所サクラサクラボ