今回はウェブサイトのUX向上を目指して、PWA（Progressive web apps）に対応したサイトをNuxt.jsで作成してみたいと思います。PWAはプログレッシブウェブアプリというもので、アプリケーションで使われる機能を搭載したウェブサイトのことで、特にスマートフォンなどのモバイルデバイスと相性が良いとされています。ウェブサイトをPWAに対応させることでアプリのような操作感や、ホーム画面へのショートカット、プッシュ通知、ネイティブの機能との連携など、UXの向上が期待できる技術になります。ここでは、JavaScriptのフレームワークであるNuxt.jsを使ってウェブサイトをPWAに対応させるまでの流れをまとめてみました。   Nuxt.jsでPWAに対応させる場合には専用のモジュールである「@nuxtjs/pwa」を使うと便利です。必要なリソースを作成し設定ファイルへの記述だけで手軽にPWAを試してみることができます。まずはnuxtのプロジェクト内にて下記のコマンドでモジュールをインストールしていきます。

$ yarn add @nuxtjs/pwa

  モジュールのインストールが完了すると続いてNuxt.jsの設定ファイルにてモジュールの指定を行います。これでNuxt.jsでPWAを導入する準備ができました。 【nuxt.config.js】

export default {
  .....
  buildModules: [
    '@nuxtjs/pwa',
    .....
  ]
  .....
}

  続けて、PWA用のアイコン画像を作成していきます。アイコンにはいろんなサイズがありますが、大きいサイズで1つ作成しておけば残りは自動的に生成されますので、まずは幅512px、高さ512pxのサイズでアイコンを作成しておきましょう。アイコンを作成する際には、端末によって円形にマスクされることも考慮したデザインにしておきます。もちろん背景透過も可能です。   アイコンが作成できたら、下記のようにNuxt.jsの設定ファイルにて「pwa」のキー内でアイコンの設定を行います。「source」には対象となるアイコン画像のパスを、「fileName」にはアイコン画像のファイル名を指定します。デフォルトではソースディレクトリ直下のstaticディレクトリ内にicon.pngというファイル名で入れる必要があるのですが、こちらで設定するとそれを上書きすることができます。 【nuxt.config.js】

export default {
  .....
  pwa: {
    icon: {
      source: 'SRC_DIR/static/*****/icon_pwa.png',
      fileName: 'icon_pwa.png'
    }
  }
  .....
}

  アイコンの次はアプリ起動時に表示されるスプラッシュスクリーン画像を作成していきます。ここではiOS用のものを例として紹介しています。各デバイスごとにサイズが異なるのでそれぞれ必要となりますが。専用のジェネレーター（https://appsco.pe/developer/splash-screens）で一括で作成すると楽ですのでオススメです。画像作成が終わるとNuxtの設定ファイルのmeta要素に下記のようにスプラッシュスクリーンの指定を追加していきます。 【nuxt.config.js】

export default {
  .....
  head: {
    meta: {
      link: [
        { rel: 'apple-touch-startup-image', media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens_iphone5_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens/splashscreens_iphone6_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)', href: 'PATH/splashscreens/splashscreens_iphoneplus_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)', href: 'PATH/splashscreens/splashscreens_iphonex_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens/splashscreens_iphonexr_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)', href: 'PATH/splashscreens/splashscreens_iphonexsmax_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens/splashscreens_ipad_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens/splashscreens_ipadpro1_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens/splashscreens_ipadpro3_splash.png' },
        { rel: 'apple-touch-startup-image', media: '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)', href: 'PATH/splashscreens/splashscreens_ipadpro2_splash.png' }
      ]
    }
  }
  .....
}

  そして、続いてはPWA用のmeta要素を指定していきます。NuxtのPWAもモジュールを使う場合、headのmeta要素指定の他にもPWA専用の設定の中でもmeta要素の指定ができるようになります。どちらでも大丈夫のようですね。 【nuxt.config.js】

export default {
  .....
  head: {
    meta: {
      { name: 'mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
      { name: 'apple-mobile-web-app-title', content: 'APP_TITLE' },
    }
    .....
  }
  // もしくは
  pwa: {
    meta: {
      mobileApp: true,
      mobileAppIOS: true,
      appleStatusBarStyle: 'black',
      ......
    }
    .....
  }
  .....
}

  次はPWAのmanifestファイルの設定を行います。ここで設定した内容で「manifest.json」がビルド時に自動的に生成されます。下記のように「pwa」内の「manifest」のキーで各種設定していきます。 【nuxt.config.js】

export default {
  pwa: {
    manifest: {
      lang: 'ja',
      name: 'APP_NAME',
      short_name: 'APP_SHORT_NAME',
      description: 'APP_DESCRIPTION',
      display: 'standalone',
      theme_color: '#000',
      background_color: '#fff',
      orientation: 'portrait',
      scope: '/',
      start_url: '/',
      icons: [
        {
          src: 'SRC_DIR/static/*****/icon_pwa.png',
          sizes: '512x512',
          type: 'image/png'
        }
      ]
    }
    .....
  }
}

  最後にPWAのキャッシュ設定を行います。PWAではキャッシュデータを用いることでオフラインでもサイト内でページの表示や遷移ができるようになります。ここではCDNで読み込んでいるファイルやスクリプト、また自サイトで使われている静的アセットなどをキャッシュ対象としています。 【nuxt.config.js】

export default {
  pwa: {
    workbox: {
      runtimeCaching: [
        {
          urlPattern: '^https://polyfill.io/.*',
          handler: 'cacheFirst'
        },
        {
          urlPattern: `${SITE_URL}.*`,
          handler: 'staleWhileRevalidate',
          strategyOptions: {
            cacheName: 'site-cache',
          },
          strategyPlugins: [
            {
              use: 'Expiration',
              config: {
                maxAgeSeconds: 24 * 60 * 60 * 30
              }
            }
          ]
        }
      ]
    }
    .....
  }
}

  ここまで出来ればあとはビルドしてサイトを生成していきます。今回はgenerateでの完全な静的サイトですが、SSRでも基本的には同じようになります。ビルドを行うと「manifest.json」とServiceWorker用のスクリプトファイルである「sw.js」が生成されます。このスクリプトファイルはGitで追跡対象外にされることが多いようですね。

$ nuxt generate
$ nuxt start

  デベロッパーツールで確認してみます、アプリケーションのタブとLighthouseでもPWAが機能していることが確認できますね。   それでは実際に端末で試してみたいと思います。今回はAndroidは実機で、iOSはエミュレーターで確認しています。まずはブラウザでウェブサイトにアクセスします。いつも通りアドレスバーも表示されており、一見するとPWA対応前と変わらない見た目ですね。ただ、Androidでは画面下部にホーム画面用のショートカット設定のダイアログが表示されています。iOSの方では下部のメニューからショートカットを設定していきます。   それぞれホーム画面に追加していきます。この辺りは通常のブラウザでウェブサイトリンクのショートカットを設定するのとあまり変わらないですね。ただ、アプリとして端末にはインストールされる形になります。   インストールが完了するとこんな感じでホーム画面にアイコンが追加されました。アプリっぽい感じになってきましたね。   アイコンをタップして起動してみますと、このようにスプラッシュスクリーンの画面が表示されます。ここがサイトのショートカットと大きく異なる点ですね。iOSの方はスプラッシュスクリーンを作成していましたが、Androidではまた個別に作成する必要がありそうですね、、デフォルトでは設定した背景色とアイコンで表現されるようです。   アプリが立ち上がるとこんな感じでアドレスバーがなくなり全画面表示になっていることがわかります。とても広々とした印象ですね。特に大画面の端末だと違いがわかりやすいのではないでしょうか。スクロールの状況によってアドレスバーが出たり隠れたりするのも、サイト閲覧上少し気になりますので、かなり使いやすいのではないでしょうか。   またデスクトップPCの場合でもブラウザからアプリとしてインストールすることができます。Google Chromeの場合ですとアドレスバーの右端にアイコンが表示され、そこからアプリをインストールすることができます。   実際に起動してみると、モバイル端末同様、全画面でサイトが表示されるウェブビューのようなアプリが起動します。心なしか動きもスムーズになっている印象がありました。ウェブサイトを快適に閲覧できるようになりますね。   またPWAを導入することで、キャッシュデータを活用できるようになるためオフライン時でも訪問済みのページはいつでも閲覧することができます。実際に電波がない状態でもサイトを閲覧することが確認できました。さらにページ表示も高速化されるメリットもあります。  

---

  今回はPWAの基本的な部分の導入のみとなりましたが、これだけでもウェブサイトを快適に閲覧できるようになったというのが実感できました。コンバージョンが関係してくるサイトの場合、大きなメリットになるのではないでしょうか。そのほかにもプッシュ通知などスマートフォンのネイティブの機能を活用した実装も可能なようで、とても期待できる技術になりますね。Nuxt.jsのフレームワークを使うことでPWA導入のハードルも下がると思いますので、ぜひ色々と試してみたいですね！   （参考にさせて頂いたサイト） nuxt/pwa Introduction Nuxt.js で作った静的サイトを PWA 化する