1

I just spent the afternoon trying to figure out @nuxtjs/pwa Workbox module with almost no results. I'm not a pro at this and I'm starting to be completely lost >< Any help will be reaaaally appreciated please!

The only thing working is caching the HTML/CSS/JS structure of visited page. I reckon this comes out of the box. Even if it seems to be a bug and it should cache all routes https://github.com/nuxt-community/pwa-module/issues/24 ?

  1. That's one of the thing I would like to do: having at least the structure of every pages precached but I have no clue on how to achieve this.

  2. The other one is I would like to cache API responses I receive on GET requests on the go. So if app is offline, at least the user could see the precached structure with the last downloaded data. I tried something like this but no results.

    runtimeCaching: [
      {
        urlPattern: `${WEBSITE.URL}/api/.*`,
        strategyOptions: { cacheableResponse: { statuses: [0, 200] } },
      },
    ],

I've got like a thousand questions in my head but I'll start with those parts and hope a kind soul is ready to help me. ^^ Thanks!

Claire
  • 773
  • 1
  • 8
  • 19

1 Answers1

0

So I managed to answer my second question by creating a plugin. I'm caching all successfull responses on GET requests to API.

// workbox-cache.js (You can call it whatever you want.)

/**
 * Workbox register route
 * @Regex define route: every route with /foo/bar/ in it
 * @Strategy define Workbox strategy: ask network, then cache
 * @HttpVerb GET requests
 */
workbox.routing.registerRoute(
  /^(.*?)\/foo\/bar\/(.*?)/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'apiCache',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
  'GET'
)

And declare it in nuxt.config.js

workbox: {
      cachingExtensions: ['@/plugins/workbox-cache.js'],
    },
  },

I'm still looking for the first question: precache structure of all pages. And for the second one, I still have to find a way to warn the visitor that data are from cache because he/she's offline.

Claire
  • 773
  • 1
  • 8
  • 19