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 · 13 comments

Comments

Projects
None yet
4 participants
@iammatthias
Contributor

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 davidbailey00 self-assigned this Sep 9, 2018

@davidbailey00

This comment has been minimized.

Member

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

This comment has been minimized.

Contributor

iammatthias commented Sep 9, 2018

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

@iammatthias

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

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 from Netlify form configuration works with Gatsby V1 but not Gatsby V2. to [v2] [plugin-offline] Fetch is intercepted by Workbox unless we add ?no-cache=1 Sep 9, 2018

iammatthias added a commit to iammatthias/gatsby-starter-gcn that referenced this issue Sep 10, 2018

Add ?no-cache=1 to Form submit handler
With the latest version of gatsby-plugin-offline, most pages are served from the service worker so they can work offline. To prevent the service worker from handling form submissions, add ?no-cache=1 to the URL. 

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

See this issue for more details: gatsbyjs/gatsby#7997
@m-allanson

This comment has been minimized.

Contributor

m-allanson commented Sep 14, 2018

Can we default to not caching POST requests?

@davidbailey00

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Contributor

iammatthias commented Sep 17, 2018

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

@iammatthias

This comment has been minimized.

Contributor

iammatthias commented Sep 17, 2018

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

@davidbailey00

This comment has been minimized.

Member

davidbailey00 commented Sep 17, 2018

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

@ryanwiemer

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

fix(gatsby-plugin-offline): don't precache the index page (#9603)
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.

jedrichards added a commit to jedrichards/gatsby that referenced this issue Nov 1, 2018

fix(gatsby-plugin-offline): don't precache the index page (gatsbyjs#9603
)

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment