feat(meta): merge head at runtime (#363)

* refactor: remove spa workaround

* refactor: merge meta in runtime

* refactor: SPA support

* fix spa support

* docs: recommand using buildModules

* feat: warn when target is function

* docs: add note about ssr: false

Author: pi0

docs/content/en/setup.md

@@ -15,14 +15,14 @@ Add `@nuxtjs/pwa` dependency to your project:
   <code-block label="Yarn" active>
 
   ```bash
-  yarn add @nuxtjs/pwa
+  yarn add --dev @nuxtjs/pwa
   ```
 
   </code-block>
   <code-block label="NPM">
 
   ```bash
-  npm i @nuxtjs/pwa
+  npm i --dev @nuxtjs/pwa
   ```
 
   </code-block>
@@ -32,12 +32,14 @@ Edit your `nuxt.config.js` file to add pwa module::
 
 ```js{}[nuxt.config.js]
 {
-  modules: [
+  buildModules: [
     '@nuxtjs/pwa',
   ]
 }
 ```
 
+**NOTE:** If using `ssr: false` with production mode without `nuxt generate`, you have to use `modules` instead of `buildModules`
+
 ### Add Icon
 
 Ensure `static` dir exists and optionally create `static/icon.png`. (Recommended to be square png and >= `512x512px`)

lib/icon/module.js

@@ -7,14 +7,10 @@ const { joinUrl, getRouteParams, sizeName } = require('../utils')
 const { version } = require('../../package.json')
 
 module.exports = function (pwa) {
-  this.nuxt.hook('build:before', () => run.call(this, pwa, true))
-
-  if (this.options.mode === 'spa' && !this.options.dev) {
-    return run.call(this, pwa, false) // Fill meta
-  }
+  this.nuxt.hook('build:before', () => run.call(this, pwa))
 }
 
-async function run (pwa, _emitAssets) {
+async function run (pwa) {
   const { publicPath } = getRouteParams(this.options)
 
   // Defaults
@@ -92,9 +88,7 @@ async function run (pwa, _emitAssets) {
   }
 
   // Emit assets in background
-  if (_emitAssets) {
-    emitAssets.call(this, options)
-  }
+  emitAssets.call(this, options)
 }
 
 async function findIcon (options) {
@@ -120,7 +114,7 @@ function addPlugin (options) {
   if (options.plugin) {
     this.addPlugin({
       src: path.resolve(__dirname, './plugin.js'),
-      fileName: 'nuxt-icons.js',
+      fileName: 'pwa/icons.js',
       options: {
         pluginName: options.pluginName,
         icons

lib/manifest/module.js

@@ -1,17 +1,9 @@
 const hash = require('hasha')
 
-const { joinUrl, getRouteParams, find } = require('../utils')
+const { joinUrl, getRouteParams } = require('../utils')
 
 module.exports = function nuxtManifest (pwa) {
-  const hook = () => {
-    addManifest.call(this, pwa)
-  }
-
-  if (this.options.mode === 'spa') {
-    return hook()
-  }
-
-  this.nuxt.hook('build:before', hook)
+  this.nuxt.hook('build:before', () => addManifest.call(this, pwa))
 }
 
 function addManifest (pwa) {
@@ -67,11 +59,9 @@ function addManifest (pwa) {
   })
 
   // Add manifest meta
-  if (!find(this.options.head.link, 'rel', 'manifest')) {
-    const baseAttribute = { rel: 'manifest', href: joinUrl(options.publicPath, manifestFileName) }
-    const attribute = manifest.crossorigin ? Object.assign({}, baseAttribute, { crossorigin: manifest.crossorigin }) : baseAttribute
-    this.options.head.link.push(attribute)
-  } else {
-    console.warn('Manifest meta already provided!') // eslint-disable-line no-console
+  const manifestMeta = { rel: 'manifest', href: joinUrl(options.publicPath, manifestFileName), hid: 'manifest' }
+  if (manifest.crossorigin) {
+    manifestMeta.crossorigin = manifest.crossorigin
   }
+  pwa._manifestMeta = manifestMeta
 }

lib/meta/meta.json

@@ -0,0 +1 @@
+<%= JSON.stringify(options.head, null, 2) %>

lib/meta/meta.merge.js

@@ -0,0 +1,36 @@
+exports.mergeMeta = function mergeMeta (to, from) {
+  if (typeof to === 'function') {
+    // eslint-disable-next-line no-console
+    console.warn('Cannot merge meta. Avoid using head as a function!')
+    return
+  }
+
+  for (const key in from) {
+    const value = from[key]
+    if (Array.isArray(value)) {
+      to[key] = to[key] || []
+      for (const item of value) {
+        // Avoid duplicates
+        if (
+          (item.hid && hasMeta(to[key], 'hid', item.hid)) ||
+          (item.name && hasMeta(to[key], 'name', item.name))
+        ) {
+          continue
+        }
+        // Add meta
+        to[key].push(item)
+      }
+    } else if (typeof value === 'object') {
+      to[key] = to[key] || {}
+      for (const attr in value) {
+        to[key][attr] = value[attr]
+      }
+    } else if (to[key] === undefined) {
+      to[key] = value
+    }
+  }
+}
+
+function hasMeta (arr, key, val) {
+  return arr.find(obj => val ? obj[key] === val : obj[key])
+}

lib/meta/module.js

@@ -0,0 +1,6 @@
+import meta from './meta.json'
+import { mergeMeta } from './meta.merge'
+
+export default function ({ app }) {
+  mergeMeta(app.head, meta)
+}

lib/meta/plugin.js

@@ -1,9 +1,5 @@
 const path = require('path').posix
 
-function find (arr, key, val) {
-  return arr.find(obj => val ? obj[key] === val : obj[key])
-}
-
 function isUrl (url) {
   return url.indexOf('http') === 0 || url.indexOf('//') === 0
 }
@@ -53,7 +49,6 @@ function startCase (str) {
 }
 
 module.exports = {
-  find,
   isUrl,
   joinUrl,
   getRouteParams,

lib/utils/index.js

@@ -35,6 +35,7 @@ Array [
   "fixture/.nuxt/dist/server/pages",
   "fixture/.nuxt/loading.html",
   "fixture/.nuxt/mixins",
+  "fixture/.nuxt/pwa",
   "fixture/.nuxt/views",
   "fixture/.nuxt/views/app.template.html",
   "fixture/.nuxt/views/error.html",

test/__snapshots__/pwa.test.js.snap

@@ -2,7 +2,7 @@ module.exports = {
   dev: false,
   rootDir: __dirname,
 
-  modules: [
+  buildModules: [
     { handler: require('../../') }
   ],