Interoperability with @nuxtjs/firebase

[mentAl-maZe]

What problem does this feature solve?

The @nuxtjs/firebase module provides service worker scripts for firebase auth sw sessions.

The problem is that (depending on where the script is included) it either:

• is ignored (because workbox responds with a caching strategy) or
• overrides the caching strategy (as it responds to the event before the workbox route is invoked)

See https://github.com/nuxt-community/firebase-module/issues/181 for detailed issue description.

What does the proposed changes look like?

I'm not quite sure how to implement it with a lodash template but, i created a Workbox plugin which would allow for a caching stategy to authorize requests before sending them (or to resend them with authorization on auth error), thus caching authorized session responses.

See https://github.com/m2sd/workbox-plugin-firebase-auth

This could be used to achieve interoperablility:

1. import the CDN version via pwa.workbox.importScripts
2. Initialize firebase with pwa.workbox.workboxExtensions (a dynamic config object would need to be injected into the snippet but @nuxtjs/firbease could provide a lodash template for that)
3. (Issue) The plugin would need to be added to the route registered for pwa.workbox.pagesURLPattern via a pwa.workbox.offlineStrategyOptions configuration

Example: nuxt.config.js

module.exports = {
  // ...
  modules: [
    // ...
    '@nuxtjs/pwa',
    '@nuxtjs/firebase',
    // ...
  ],
  pwa: {
    workbox: {
      includeScripts: ['https://unpgk.com/[email protected]/lib/plugin.umd.js'],
      workboxExtensions: [`~/assets/firebase-initialization-generated-by-firebase-module.js']
      offlineStrategyOptions: {
        // I'm not quite sure how to achieve this with lodash templates
        // a compromise (forgoing plugin configuration) could be to include plugins as strings and add them with a loop in the template.
        plugins: ['WorkboxFirebaseAuth.Plugin']
      }
  }
  // ...
}

_{This feature request is available on Nuxt community (#c214)}

[pi0]

Hi, @mentAl-maZe thanks for a detailed explanation.

Actually you can use workbox.swTemplate option to provide a fully customized service worker. You can use the default sw.js and customize needed areas and it is a lodash template.

Also, you can expose a nuxt module from your package for easy usage:

workbox-plugin-firebase-auth/nuxt/module.js:

import { resolve } from 'path'
import defu from 'defu'

export default function () {
  this.options.pwa = defu(this.options.pwa, {
    workbox: {
      swTemplate: resolve(__dirname, 'workbox-firebase-auth.js')
    }
  })

  // Optionaly enable for easy usage so users only have to add one module
  // this.requireModule('@nuxtjs/pwa')
  // this.requireModule('@nuxtjs/firebase')
}

[mentAl-maZe]

Thanks for the quick reply :smile:

I'm collaborating/in contact with @lupas from @nuxtjs/firebase so this would mainly concern his module, but you're right that would be the best solution.

One issue remains though, I'd like to maintain full interoperability between the two modules. Ovewriting the swTemplate is a good solution as this should be an edge case for normal users at best and if they need the functionality they can extend the template form @nuxtjs/firebase.

However if a user configures @nuxtjs/pwa with pwa.workbox.offline = true (which is the default) i have no way to discern which runtimeCaching items are auto generated and which are added by the user in a consistent manner... you think checking for equality between r.urlPattern and options.pagesURLPattern would suffice?

[LeeGrobler]

How's this issue coming along?

[productdevbook]

is there any progress ?

[zachu90]

Have you solved the issue ?