[HELP] I somehow manage to break my contact form!

Support
,
21

No problem! If you figure out the right configuration to pass-through the form POSTs please do let us know back here :slight_smile: I don’t have enough time to dig into it at the moment but I know myself and others would find that info valuable in the future :netliheart:

–
Jon

1 Like
22

Allright! I managed to solve the issue now that @jonsully kindly pointed me in the right direction!

For future reference if anyone else get problems with a Gatsby service-worker and a Netlify form.

  • The netlify form is communicating with Netlify through a AJAX POST request. AJAX is a combination of javascript and XML.
  • If you use a combination of gatsby-plugin-offline and gatsby-plugin-manifest the Gatsby serviceworker is configured with workbox under the hood and doesn’t really distinguish between POST or FETCH requests.
  • When you define WHAT gatsby-plugin-offline should precache you can do it in 2 different ways inside the gatsby-config.js file:
  1. define page(s) to be prefetched:
    example:
    resolve: "gatsby-plugin-offline",
          options: {
            precachePages: [
              `/index.html`,
              `/en/awesomeArticles/*`,
              `/pl/moreAwesomePages/*`,
            ],
          },
        },

This generally won’t give you any problems with netlify forms - when you define pages this way - any images, json, js and so forth will be precached for the pages making them work offline.

  1. You can also specify a list of filetypes to be precached for the full page - by adding “glob-patterns” to the workbox-config:
    resolve: "gatsby-plugin-offline",
          options: {
            precachePages: [
              `/index.html`,
              `/en/awesomeArticles/*`,
              `/pl/moreAwesomePages/*`,
            ],
        workboxConfig: {
          globPatterns: [
            "**/*{.js,.json,.webp,.webmanifest,.woff,.woff2,.ttf,.eot,.css,.mjs,.svg,.mp3,icons/icon*,.ico}",
          ],
        },
      },
          },
        },

Precaching .js files like this, will cause the serviceworker to “catch” any AJAX POST requests from your form - and they never get to Netlify.

1 Like
23

Thanks for all the help!

I actually ended up rewriting all routing on my page to use trailing slashes! It will never get to work offline otherwise. Gatsby MAY work without trailing slashes, but the gatsby plugins are generally assuming that trailing slashes are used. I use i18next for language support and it just doesn’t work offline without taking care of always using trailing slashes.

So you article was really useful in this regard!

For the form stuff - I solved this too - and have written a detailed answer in this thread for anyone else to reference in the future.

1 Like
24

Thanks for sharing such a detailed solution @LarsEjaas ! We really appreciate it. Additionally, thanks @jonsully for sharing some awesome resources!

:netliconfetti:

25

I am afraid my solution isn’t working!

I made an error and the serviceWorker failed silently in the back. So I still haven’t found a working solution - bummer!

Gatsby-plugin-offline really isn’t documented as well as I would prefer, so this will probably take a bit of time to solve.

26

Alright!
Finally got it!!

This thread here on netlify actually already found a solution - append a random number to the POST url every time a post is made - this way there is nothing for the serviceworker to cache, as the URL is unique on every form submit - that really is genius! (unfortunately not my solution).

AND it works on my page with full offline support!

27

Lol. Very clever. I have to imagine there are Workbox config settings for simply not caching a particular path — and since a form’s POST target can actually be any path (existing or not) on your site for the Netlify Form Handler to catch… you could feasibly just pick an arbitrary path to post to like example.com/my_random_form_path where there for sure isn’t any actual page, then have workbox never cache any request (GET, POST, or otherwise) to /my_random_form_path. Since there shouldn’t be any request on that path other than your form POST, that would likely work too.

But a random number could work lol.

Nice :100:

–
Jon

28

All that said, Workbox is complicated and to others that may read this thread, I would strongly encourage you to assess whether your site really needs offline support. Netlify Forms will not be the only challenging thing to work through when onboarding Workbox / Service Workers and deciding to remove them later can also be its own challenge since they’ll be cached on users’ browsers. Consider this a strong word of warning or caution. :slight_smile:

29

There is workbox settings to route any request really, but gatsby-plugin-offline is really not documented in this regard, it really is a major pain to work with! You change the gatsby-config file and look in the sw.js file and nothing is as expected :scream: - so this is a major pain to work with!

But yeah: I got it working :smiley:

1 Like