Nuxt.js - PWA

nuxt.config.js

// add '/static/icon.png' 512x512 (min: 192×192)

export default {
  modules: [
    '@nuxtjs/pwa'
  ],
  manifest: {
    name: process.env.npm_package_name,
    title: process.env.npm_package_name,
    'og:title': process.env.npm_package_name,
    description: process.env.npm_package_description,
    'og:description': process.env.npm_package_description,
    lang: 'ja',
    theme_color: '#000',
    background_color: '#fff',
    display: 'standalone',
    scope: '/',
    start_url: '/'
  },
  workbox: {
    // dev: true, // Not recommended
    runtimeCaching: [
      // Web Font
      {
        urlPattern: 'https://fonts.googleapis.com/.*',
        handler: 'cacheFirst'
      },
      // API
      {
        urlPattern: 'https://example.org/api/v1/.*',
        // 'StaleWhileRevalidate'
        // 'CacheFirst', 'CacheOnly'
        // 'NetworkFirst', 'NetworkOnly'
        handler: 'staleWhileRevalidate',
        strategyOptions: {
          cacheExpiration: {
            maxEntries: 10,
            maxAgeSeconds: 60 * 60 * 24 // 1day
          },
          cacheableResponse: {
            statuses: [200]
          }
        }
      }
    ]
  }
}