Make it a PWA

[btahir]

Feature request

Gatsby apps are PWAs pretty much out of the box with the help of a couple of plugins. Is there a reason why this has not been implemented? You just need to add the gatsby-plugin-manifest and gatsby-plugin-offline plugins. This is how it looks in gatsby-config:

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },    
    'gatsby-plugin-offline',

I went ahead and implemented this in my own version and hit a snag because of a viewport error. Turns out the footer is exceeding the viewport width which triggers an error in Lighthouse. To fix this you need to set a max-width of 100vw on <div className="columns> in the Footer component.

Hope this helps!

[ZoltanVeres]

Hi @btahir

First of thank you for taking the time writing this!
You are right on everything, just want to add few things, with the hope that someone would pick this up.

1. gatsby-plugin-offline
   For the forms to work we need to punch a hole in the workbox rules so the form submits can reach the server, see a possible solution here: [v2] [plugin-offline] Fetch is intercepted by Workbox unless we add ?no-cache=1 gatsbyjs/gatsby#7997 (comment)
   We also have a rule added for /.netlify/functions/ which is responsible for reaching Netlify Serverless function.
   And finally we need to ensure that all forms in the starter, which can be found here src/pages/contact, are posting to the form using ?no-cache=1 request parameter.
2. gatsby-plugin-manifest
   This is a good idea, we did attempt to have this, see PR Add favicon/manifest #193, but ultimately didn't do it since the build time was increased by a minute.
   I think it would be smart to initiate a new push to the branch and compare the buildtimes, if it's still slow, then i would choose to upgrade the build system to the new beta version of Netlify's build system and turn on incremental build feature. Here's great description on essentially what needs to be done. We looked into it a couple month ago, and decided not to upgrade the starter to use the new Netlify Build System since it was still beta.
   Maybe now it makes sense to do the migration.
3. Footer width issue
   We do have a separate issue for this, see Content is not sized correctly for the viewport #247
   It worth to note that the issue originates from the Bulma framework, @erquhart took the time and filed an issue in the Bulma repo, so far nothing no action was taken to fix this by Bulma folks.
   My honest opinion is that we should stop waiting on getting this fix by Bulma, so any PRs are very welcomed, especially if it improves our Lighthouse score!