Introduction

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

pwa.nuxtjs.org

@nuxt/pwaをインストール

まず、@nuxt/pwaをインストールします。

npm i --save-dev @nuxtjs/pwa

nuxt.config.jsのbuildModulesに@nuxt/pwaを追加し、有効にします。

export default {


...
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [

    '@nuxtjs/pwa',
  ],
...

あとはホスティングするだけです。https対応のサーバーで公開すると、PWAとしてインストールできるようになります。

マニフェストをカスタマイズするには？

PWAのアプリ名などをカスタマイズしたいときは、nuxt.config.jsにpwaを追加します。

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {

      ...
    },

  },

設定できるマニフェストの項目は@nuxt/pwaのドキュメントで公開されています。

Manifest Module

Manifest adds Web App Manifest with no pain

pwa.nuxtjs.org

アプリの名前や言語については最低限カスタマイズしておくことをおすすめします。

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'ja',
      name: "バスずかん|仙台を中心としたバスの図鑑",
      short_name: "バスずかん"
    },

  },

スマホやタブレットで表示されるアプリ名はshort_nameで設定します。nameはPCにインストールしたときに表示される名前です。

実際にリリースする場合はもっと細かくカスタマイズすることになります。

まとめ

とてもかんたんですよね♪

当記事ではPWA対応させる最低限の方法を紹介しました。ドキュメントには数多くのオプションが掲載されていますので、一度目を通してみることをおすすめします。

Introduction

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

pwa.nuxtjs.org

ランタイムキャッシュとは？

動的にアクセスされたリソースをキャッシュさせることをいいます。

例えば、APIで取得したjsonを保存しておき、オフラインでも見れるようにするといったことができます。

@vue/cli-plugin-pwaならかんたんに実装できる！

Vueで作成したプロジェクトであれば、@vue/cli-plugin-pwaというパッケージを追加することで、かんたんにランタイムキャッシュを実装できます。

vue-cli/packages/@vue/cli-plugin-pwa at dev · vuejs/vue-cli

🛠️ webpack-based tooling for Vue.js Development. Contribute to vuejs/vue-cli development by creating an account on GitHu...

github.com

通常はservice-workerを手動で実装する必要がありますが、このパッケージを入れてしまえばイチコロです！

手順

さっそくランタイムキャッシュを実装する手順を紹介。

@vue/cli-plugin-pwaをインストール

npmなどで @vue/cli-plugin-pwaをインストールします。

npm install "@vue/cli-plugin-pwa"

PWA対応だけではなく、プレキャッシュやランタイムキャッシュ（APIキャッシュ）も容易に実装できます。

ランタイムキャッシュを有効にする

この記事の本題であるランタイムキャッシュ。

@vue/cli-plugin-pwaなら、vue.config.jsに以下を追加するだけでOKです。

module.exports = {
pwa: {
    name: 'PWAアプリケーション名',
    themeColor: 'テーマカラー(#aabbccなどで指定する)',
    manifestOptions: {

        background_color: "#adcdff"
    },
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
        runtimeCaching: [{
            // キャッシュするファイルのURLを正規表現で指定する
            urlPattern: new RegExp( "https://hoge.com/.*"),
            handler: 'CacheFirst',
        }]
    }
},
}

ビルドする

npm run buildを実行し、ビルドします。

すると、service-worker.jsが自動的に作成され、ランタイムキャッシュが有効になります。

あとはサーバーにアップすれば、キャッシュが動作するようになります。

動かないときのチェックポイント

ここまで実装方法を記してみましたが、うまくいかないときのチェックポイントをまとめておきます。

チェック① service-worker.jsにランタイムキャッシュの部分が出力されているか？

まずはここをチェックしましょう。

buildすると、distフォルダにservice-worker.jsというファイルが出力されます。これにランタイムキャッシュの部分が正しく出力されているか確認します。

出力されていない場合は、vue.config.jsを確認し、記述があっているか確認してください。

チェック② URLパターンがあっているか？

問題なくランタイムキャッシュさせるコードが出力されている場合は、内容があっているか確認します。urlPatternが正しいかチェックします。

urlPattern: new RegExp("https://korekore.com/hoge/.*")

urlPatternにはRegExpを使うことができます。

• HTTPSであること
• ホストは自由に指定できる（PWAをホストするサーバーとは別のホストでも動作します）
• Javascriptの正規表現で指定すること

チェック③ ホスティング環境が対応しているか？

ホスティング環境にも制限があります。

いろいろと制限があるので、ひとつひとつ確認していく必要があります。

axiosでは動かない？→動きます

axiosでは動かず、fetchをつかってAPIにアクセスしなければならないという話がありますが、これは違います。

axiosでもまったく問題なくキャッシュされます。特殊な仕込みは不要です。

参考

ページにたどり着きにくいので、参考になるドキュメントもメモしておきます。

PWAに関するconfig

Workbox  |  Chrome for Developers

Build progressive web apps (PWAs) with Workbox - the Service Worker library from the Chrome team

developer.chrome.com

ランタイムキャッシュに関するオプション

Modules  |  Chrome for Developers

Dig deeper into specific Workbox modules.

developer.chrome.com