今回、ブログとポータルサイトをPWA化しました。
PCだとアドレスバー、スマホだとホーム画面に追加から、Webアプリとして実行できるあれです。

そんなPWAを導入するにあたって、色々と覚え書きを書いておきます。

NuxtjsでのPWAの導入

導入はクソほど簡単。最初の

yarn create nuxt-app <project-name>

の中でPWAの選択項目があるので、それを選択して入れればとりあえずOK。
モジュールが入ったら、nuxt.config.js に色々書き加えます。
正直何が必須で何が任意かよくわからなかったので、適当に書きました。

  pwa: {
    manifest: {
      name: 'ねころぐ',
      lang: 'ja',
      short_name: 'ねころぐ',
      description: 'ねこづきあゆむの過去ログ倉庫です。',
      display: 'standalone',
      start_url: '/',
      theme_color: '#7f7fff',
      background_color: '#EFEFFF',
    },
    icon: {
      source: '/static/icon.png',
      fileName: 'icon.png'
    }
  },

上から順に

manifest
- name: サイトの名前
- lang: 言語
- short_name: アプリの短縮名（ホーム画面に出てくる簡略化した名称）
- description: 概要文
- display: 実行モード（いろいろあるらしい）
- start_url: アプリのメインURL
- theme_color: テーマカラー
- background_color: 背景色
icon
- source: アイコンの位置
- fileName: アイコンのファイルネーム

これでとりあえず完了です。
あ、開発環境で確認したい時は dev: trueをつけてください。

キャッシュが残りすぎて記事が更新されない問題

とりあえず実装したはいいものの、キャッシュ周りでごちゃごちゃし始めました...。
PWAは仕様上、キャッシュ優先で拾ってくるので、記事が更新されていても表示上更新されていないように見えることになります。
なので、workboxでキャッシュ時間を指定してあげるといいっぽいです。（ネットで拾ってきたものをそのままやってるのであまり理解してないので、今後理解したい）

    workbox: {
      dev: true,
      offline: false,
      skipWaiting: true,
      clientsClaim: true,
      runtimeCaching: [
        {
          urlPattern: `/api_nicorepo/*`,
          handler: 'staleWhileRevalidate',
          method: 'GET',
          strategyOptions: {
            cacheExpiration: {
              maxAgeSeconds: 60 * 15, // 15分
            },
            cacheableResponse: {
              statuses: [200],
            },
          },
        },
        {
          urlPattern: `/api_mc_nekolog/*`,
          handler: 'staleWhileRevalidate',
          method: 'GET',
          strategyOptions: {
            cacheExpiration: {
              maxAgeSeconds: 60 * 30, // 30分
            },
            cacheableResponse: {
              statuses: [200],
            },
          },
        },
        {
          urlPattern: `/api_mc_nekozukime/*`,
          handler: 'staleWhileRevalidate',
          method: 'GET',
          strategyOptions: {
            cacheExpiration: {
              maxAgeSeconds: 60 * 60 * 3, // 3時間
            },
            cacheableResponse: {
              statuses: [200],
            },
          },
        },
        {
          // デフォルト（最後に記述する）
          urlPattern: '/*',
          handler: 'networkFirst',
          method: 'GET',
        },
      ],
    }

あと、microCMSでWebhook投げれるので、
microCMSで記事更新 → Vercelで受け取ってデプロイ
させてます。

とりあえず覚え書きでした。

タグ「LT」記事一覧

ブラウザ拡張機能についてLTで話しました

最近の投稿

Twitter @nekozuki_2525