Tech

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

TL;DR

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

辺りの導入について

各モジュール類

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

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が結構あってここは心強いですね。

目次

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

share