[v2] [plugin-offline] Fetch is intercepted by Workbox unless we add ?no-cache=1

[iammatthias]

Description

Source: https://github.com/iammatthias/net/blob/v2/src/components/Info/ContactForm.js

Netlify form configuration works in Gatsby V1, but not in Gatsby V2. The form submission presents as successful, but does not record. Live example: https://iamv2.iammatthias.com/contact

Logging the encoded form submissions on the Submit function using console.log(encode({ 'form-name': 'contact', ...this.state })). Encoded value is logged to console as form-name=contact&name=test&email=test%40test.com&message=test&showModal=false.

FETCH request seems to be handled by Service Worker, does not go to Netlify. Also presents with empty body. Appears to use HTML/1.1 instead of HTML/2.

Form configuration works as expected in site built with Gatsby v1. Live Example / Source

Environment

Local

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 9.4.0 - ~/.nvm/versions/node/v9.4.0/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v9.4.0/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 62.0
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0-rc.13 => 2.0.0-rc.13 
    gatsby-image: next => 2.0.0-rc.1 
    gatsby-plugin-canonical-urls: next => 2.0.0-rc.1 
    gatsby-plugin-feed: next => 2.0.0-rc.2 
    gatsby-plugin-google-analytics: next => 2.0.0-rc.1 
    gatsby-plugin-manifest: next => 2.0.2-rc.1 
    gatsby-plugin-netlify: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-nprogress: next => 2.0.0-rc.1 
    gatsby-plugin-offline: ^2.0.0-rc.4 => 2.0.0-rc.4 
    gatsby-plugin-react-helmet: next => 3.0.0-rc.1 
    gatsby-plugin-sitemap: next => 2.0.0-rc.1 
    gatsby-plugin-styled-components: next => 3.0.0-rc.1 
    gatsby-plugin-typography: next => 2.2.0-rc.3 
    gatsby-remark-images-contentful: next => 2.0.0-rc.2 
    gatsby-remark-prismjs: next => 3.0.0-rc.2 
    gatsby-source-contentful: ^2.0.1-rc.4 => 2.0.1-rc.4 
    gatsby-source-filesystem: next => 2.0.1-rc.1 
    gatsby-transformer-remark: next => 2.1.1-rc.1 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

Production - Netlify

System:
11:27:45 AM:     OS: Linux 4.4 Ubuntu 14.04.5 LTS, Trusty Tahr
11:27:45 AM:     CPU: x64 Intel(R) Xeon(R) CPU @ 2.50GHz
11:27:45 AM:     Shell: 4.3.11 - /bin/bash
11:27:45 AM:   Binaries:
11:27:45 AM:     Node: 9.4.0 - ~/.nvm/versions/node/v9.4.0/bin/node
11:27:45 AM:     Yarn: 1.3.2 - ~/.yarn/bin/yarn
11:27:45 AM:     npm: 5.6.0 - ~/.nvm/versions/node/v9.4.0/bin/npm
11:27:45 AM:   npmPackages:
11:27:45 AM:     gatsby: ^2.0.0-rc.13 => 2.0.0-rc.13
11:27:45 AM:     gatsby-image: next => 2.0.0-rc.1
11:27:45 AM:     gatsby-plugin-canonical-urls: next => 2.0.0-rc.1
11:27:45 AM:     gatsby-plugin-feed: next => 2.0.0-rc.2
11:27:45 AM:     gatsby-plugin-google-analytics: next => 2.0.0-rc.1
11:27:45 AM:     gatsby-plugin-manifest: next => 2.0.2-rc.1
11:27:45 AM:     gatsby-plugin-netlify: ^2.0.0-rc.2 => 2.0.0-rc.2
11:27:45 AM:     gatsby-plugin-nprogress: next => 2.0.0-rc.1
11:27:45 AM:     gatsby-plugin-offline: ^2.0.0-rc.4 => 2.0.0-rc.4
11:27:45 AM:     gatsby-plugin-react-helmet: next => 3.0.0-rc.1
11:27:45 AM:     gatsby-plugin-sitemap: next => 2.0.0-rc.1
11:27:45 AM:     gatsby-plugin-styled-components: next => 3.0.0-rc.1
11:27:45 AM:     gatsby-plugin-typography: next => 2.2.0-rc.3
11:27:45 AM:     gatsby-remark-images-contentful: next => 2.0.0-rc.2
11:27:45 AM:     gatsby-remark-prismjs: next => 3.0.0-rc.2
11:27:45 AM:     gatsby-source-contentful: ^2.0.1-rc.4 => 2.0.1-rc.4
11:27:45 AM:     gatsby-source-filesystem: next => 2.0.1-rc.1
11:27:45 AM:     gatsby-transformer-remark: next => 2.1.1-rc.1

[valerie-makes]

Hi Matthias! With the latest version of gatsby-plugin-offline, we serve most pages from the service worker so they can work offline - see the regexps below:

To prevent the service worker from handling form submissions, add ?no-cache=1 to the URL - for example:

fetch("https://iamv2.iammatthias.com/contact?no-cache=1", {
  "body": encode({ 'form-name': 'contact', ...this.state })
});

I've just sent a test message using code similar to the above, please let me know if you got it! Leaving this open for discussion of how we should handle fetch with the service worker

[iammatthias]

Thanks, @davidbailey00! I'll give that a try right now and report back!

[iammatthias]

@davidbailey00 YES! Thank you so much. Form submissions are coming in properly now, just tested in Chrome and Firefox.

[valerie-makes]

Glad to hear! Btw, with the line of code you changed, /contact?no-cache=1 should work fine if you don't want to write out the whole URL (i.e. https://iamv2.iammatthias.com/contact?no-cache=1).

As mentioned earlier, I'll leave this open for discussion about what the default behaviour should be - might play around tomorrow and see if I can improve this.

[m-allanson]

Can we default to not caching POST requests?

[valerie-makes]

Can we default to not caching POST requests?

@m-allanson unfortunately Workbox doesn't allow configuring this - we can either enable serving an offline shell and have this as a side-effect, or only guarantee that the homepage works offline. Or as a third option we can force Gatsby to fetch the HTML of each page so that it's cached at runtime, but this would waste bandwidth. (See https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config, especially navigateFallback)

Maybe it would be best to add documentation to gatsby-plugin-offline giving an example of how to modify navigateFallbackBlacklist to prevent handling API requests? I'd can submit a PR with this if that sounds good!

[valerie-makes]

This seems to have fixed itself, possibly due to some changes with Workbox - @iammatthias could you try upgrading your packages and see if the form works now without ?no-cache=1? If so, I'll close the issue.

[iammatthias]

@davidbailey00 I'll give this a try right now and report back.

[iammatthias]

@davidbailey00 Works perfectly. Tried in Safari, Chrome, and Firefox.

[valerie-makes]

@iammatthias awesome! I'll close this issue then :)

[ryanwiemer]

@davidbailey00 I have noticed this issue again using Gatsby v2.0.22. Not sure when the issue was reintroduced but I am reopening this ticket.

I also confirmed that the workaround of ?no-cache=1 still works.

[valerie-makes]

@ryanwiemer Thanks for pointing this out, and sorry for the late response - I'll try and take a look tomorrow to see what's going on.

[valerie-makes]

I think I understand what's going wrong here - if I do a POST to any page other than the homepage, it correctly fetches from the server - this returns a 404 since Netlify only serves pages over GET requests:

However, the homepage (/index.html) is explicitly cached rather than defaulting to the offline shell, resulting in different behaviour:

To fix this we need to change the behaviour of the offline plugin, so that the index page isn't explicitly cached - it doesn't need to be, since its resources will be cached automatically once the SW installs, so there's no good reason to do this really.

[chenrico]

https://www.cairnsbeachresort.com.au/contact/
Hey guys, I ran into the same issue too with this page. I added "?no-cache=1" but still not working :(
Can anyone please take a look? Cheers.

Your Name:

      <label className="block text-grey-darker font-bold mb-2">
        Your Email:
      </label>
      <input type="email" name="email" className="text-input" />

      <label className="block text-grey-darker font-bold mb-2">
        Your Mobile/Landline Number:
      </label>
      <input type="text" name="phone" className="text-input" />

      <label className="block text-grey-darker font-bold mb-2">
        Your Message:
      </label>
      <textarea name="message" className="text-input h-48" />
      <button type="submit" className="btn">
        Submit
      </button>
    </form>

[riongull]

I'm having this issue as well. None of the recommended fixes have worked for me.

[Lucascoorek]

I confirm this is still an issue. Its working fine without /?no-cache=1 in Chrome but not in Safari. Fortunately adding /?no-cache=1 to fetch URI does the job. Thank you.