Nuxt.jsでPWA対応

2021年11月22日 16:57

Nuxt.jsで作ったWebサイトをPWAに対応させる方法について

PWAとは？

PWA（Progressive Web Apps）は、スマートフォン上でアプリのように動作できるWebサイトのこと。PWA対応したWebアプリは、ホーム画面に追加できたり、全画面表示できる、プッシュ通知ができる、ハードウェアにアクセスできるなどの利点がある。

Nuxt.jsでPWA対応するには

1. @nuxtjs/pwaをインストール

npm install --save @nuxtjs/pwa

2. nuxt.config.jsの設定

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

3. アイコン画像を用意

ホーム画面上に表示されるアイコン画像を用意して、staticディレクトリ配下にicon.pngとして配置する。

4. manifestの設定

export default {
 modules: [
   '@nuxtjs/pwa'
 ],
 manifest: {
   name: '<アプリ名称>',
   short_name: '<ホーム画面に表示される省略名称>',
   description: '<アプリの説明>',
   theme_color: '<テーマカラー>',
   background_color: '<背景カラー>'
 },
}

※各フィールドの詳細はこちらを参照

Nuxt.jsを使えば、たったこれだけでWebアプリをPWA対応させることができ、モバイル向けに使いやすいアプリを作ることができる。

参考

この記事が気に入ったらサポートをしてみませんか？