WordPressをNuxt.js使ってPWA化しました

Nuxt.jsとaxios/proxyを駆使してホームページをPWA化しました。
（2021年4月追記　文末にまとめましたが、現在中止しています）
PWA化すると通知が飛ばせたり、オフラインで使えたり、高速化できたりとメリットだらけです。
デメリットはIE。。。いまどきIEなんて使ってる人はセキュリティ的に危ないのであえて非対応のほうが世の中のためになると思いたい・・・

似たような構成で作りたいなどあればCONTACTかFacebookに、お気軽にご相談いただければと思います。

PWAとは

Progressive Web Appsの略でスマホアプリのようにWebサイトをインストールして使うことができるようにする仕組みのことです。スマホアプリと違って、iOSとAndroidでそれぞれ対応したり、面倒な審査が必要ないのと、バージョンアップによるメンテナンスコストが低いのがメリットなんじゃないかと思います。特に会員限定アプリみたいなのはリジェクトされる確率が高いので、PWAで十分ではないかと。
PWAの成功事例は↓の方が詳しくまとめてます。

【2020年版】PWA対応サイト事例！アプリとの違いとは？ | 株式会社パンタグラフ

この記事では、2020年版PWAサイト事例として、国内・海外のPWA対応サイトとその特徴、アプリとの違い、画面デザインや機能、効果などを紹介します。PWAとは、ウェブサイトをあたかもネイティブアプリのように利用できる技術です。導入をお考えの...

pantograph.co.jp

↓ちなみにNuxt PWAの公式

Introduction

Supercharge Nuxt with a heavily tested, updated and stable PWA solution

pwa.nuxtjs.org

アーキテクチャ

インフラとアプリケーションはざっくりこんな感じになってます。BLOG部分はWordpressを無理やりラップしました。分かりづらいですがnuxt側にproxyの設定をいれてWPにデータ取りに行くようにしてます。WPのAPIを使ってちまちまデータとってvueで表示みたいなのも作れますが、デザインなおしたりSEO対策だったりサイドメニューだったりを１から作るのは、とても工数がかかるので、シンプルにHTMLを解析して必要なものだけasyncDataで取り込んでます。

費用感

↑のGCP構成だとサーバ利用料は月6千円ぐらいです。さくらのVPSとかで１年で１万円ぐらいの低スペックサーバでも十分動くと思います。
サイト作成は規模によりますが30万円〜になります。