Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
iammatthias opened this issue Sep 8, 2018 · 16 comments
Closed

Comments

@iammatthias
Copy link
Collaborator

@iammatthias iammatthias commented Sep 8, 2018

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.

screenshot 2018-09-08 11 06 34

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.

screenshot 2018-09-08 11 11 09

screenshot 2018-09-08 11 11 16

screenshot 2018-09-08 11 11 22

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
@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Sep 9, 2018

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:

image

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
Copy link
Collaborator Author

@iammatthias iammatthias commented Sep 9, 2018

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

@iammatthias
Copy link
Collaborator Author

@iammatthias iammatthias commented Sep 9, 2018

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

@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Sep 9, 2018

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.

@davidbailey00 davidbailey00 changed the title Netlify form configuration works with Gatsby V1 but not Gatsby V2. [v2] [plugin-offline] Fetch is intercepted by Workbox unless we add ?no-cache=1 Sep 9, 2018
@m-allanson
Copy link
Collaborator

@m-allanson m-allanson commented Sep 14, 2018

Can we default to not caching POST requests?

@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Sep 14, 2018

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!

@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Sep 16, 2018

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
Copy link
Collaborator Author

@iammatthias iammatthias commented Sep 17, 2018

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

@iammatthias
Copy link
Collaborator Author

@iammatthias iammatthias commented Sep 17, 2018

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

@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Sep 17, 2018

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

@ryanwiemer
Copy link
Collaborator

@ryanwiemer ryanwiemer commented Oct 17, 2018

@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.

@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Oct 30, 2018

@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.

@davidbailey00
Copy link
Collaborator

@davidbailey00 davidbailey00 commented Oct 31, 2018

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:

image

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

image

image

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.

@pieh pieh closed this in #9603 Oct 31, 2018
pieh added a commit that referenced this issue Oct 31, 2018
Fixes #7997

Rationale: we don't need to precache the index page, because the offline plugin automatically caches resources it finds in the `<head>` of the page it was installed on. So it just means that resources are cached a little later.
gpetrioli added a commit to gpetrioli/gatsby that referenced this issue Jan 22, 2019
)

Fixes gatsbyjs#7997

Rationale: we don't need to precache the index page, because the offline plugin automatically caches resources it finds in the `<head>` of the page it was installed on. So it just means that resources are cached a little later.
@chenrico
Copy link

@chenrico chenrico commented Mar 26, 2019

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
Copy link

@riongull riongull commented May 18, 2019

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

@Lucascoorek
Copy link

@Lucascoorek Lucascoorek commented May 10, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.