Nuxt.jsとFirebaseでサイトを作った話 -4- PWA/GTM/sitemap/feed対応

¶ TL;DR

• Progressive Web App
• Google Tag Manager
• sitemap.xml
• feed

辺りの導入について

¶ 各モジュール類

全部Nuxtのコミュニティがサポートしていたりしますので簡単です。

• @nuxtjs/google-tag-manager
• @nuxtjs/pwa
• @nuxtjs/sitemap
• @nuxtjs/feed

¶ GTM

¶ 用意するもの

• タグマネージャーのID(GTM-XXXXXXX)

¶ 実装方法

• npm i @nuxtjs/google-tag-manager

• nuxt.config.js の moduleへの追加

 modules: [
   // ...
   ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }],
  ]

¶ PWA

¶ 用意するもの

なし

¶ 実装方法

• npm i @nuxtjs/sitemap

• nuxt.config.js の moduleに追加。

modules: {
  ...
  ['@nuxtjs/pwa', { icon: false }], //TODO Ensure static dir exists and optionally create static/icon.png. (Recommended to be square png and >= 512x512px)
}

• manifestを設定（headと同じ階層）

  manifest: {
    short_name: 'isoppp',
    name: 'isoppp.com',
    lang: 'ja',
    background_color: '#d4e0eb',
    theme_color: '#17a2b8',
    orientation: "portrait"
  },

これだけです。

基本的には恐らくキャッシュの機構がメインとなっていて、 当然ながらプッシュ通知を行いたい、等の場合は別途設定が必要です。

¶ sitemap

¶ 用意するもの

なし ※ 今回のようなSSRせずにgenerateしてホスティングする場合、markdown編のgenerateの設定で使用している生成関数が必要です。

¶ 実装方法

• npm i @nuxtjs/sitemap

• nuxt.config.js の moduleに追加

modules: {
  ...
  ['@nuxtjs/sitemap'],
}

• 設定の追加（SSRせずにgenerateしてhosting、記事の動的を含むURLの設定

  sitemap: {
    hostname: 'https://isoppp.com',
    generate: true,
    gzip: false,
    exclude: [
      '/404',
    ],
    routes: generateDynamicRoutes,
  }

¶ feed

¶ 用意するもの

なし

¶ 実装方法

npm i @nuxtjs/feed

• nuxt.config.js の moduleに追加

mocules: {
  ...
  ['@nuxtjs/feed'],
}

• 設定の追加

ここは色々と書き方があるのですが、当サイトの場合こんな感じになりました （今までの記事で使用している関数等があります）

ちょっと手間でしたねこれは…。

feed: [
    {
      path: '/feed.xml', // The route to your feed.
      async create (feed) {
        feed.options = {
          title: 'isoppp.com Note',
          link: 'https://isoppp.com/feed.xml',
          description: 'isoppp.com Note Rss Feed',
        }

        sourceFileArray.forEach(item => {
          const summary = fileMap[item.replace('.md', '.json').replace('/markdown/', '/json/')]
          const note = require(path.resolve(__dirname, item.replace('/markdown/', '/json/').replace('.md', '.json')))
          const post = {
            title: summary.title,
            url: 'https://isoppp.com' + sourceFileNameToUrl(item),
            description: summary.preview,
            content: note.bodyHtml,
          }

          feed.addItem({
            title: post.title,
            id: post.url,
            link: post.url,
            description: post.description,
            content: post.content
          })
        })

        feed.addContributor({
          name: 'isoppp',
          email: 'dummy@dummy.com',
          link: 'https://isoppp.com'
        })
      }, // The create function (see below)
      cacheTime: 1000 * 60 * 15, // How long should the feed be cached
      type: 'rss2' // Can be: rss2, atom1, json1
    }
  ]

¶ おわりに

大体全部公式に載っている内容なので実装する場合はそちらも参照してください。 こういう系はNuxtコミュニティのmoduleが結構あってここは心強いですね。

¶ 目次

このサイト作ったぞシリーズです。

• Nuxt.jsとFirebaseでサイトを作った話 -1- はじめに
• Nuxt.jsとFirebaseでサイトを作った話 -2- CSSとSassとPostCSSとVue
• Nuxt.jsとFirebaseでサイトを作った話 -3- Markdownの変換とNuxtへの組み込み
• Nuxt.jsとFirebaseでサイトを作った話 -4- PWA/GTM/sitemap/feed対応 イマココ
• Nuxt.jsとFirebaseでサイトを作った話 -5- netlifyとFirebase