- make the app faster, better accesibility

firebase.json

@@ -5,48 +5,30 @@
       "public": "public",
       "ignore": ["**/.*", "firebase.json", "**/node_modules/**"],
       "headers": [
-        {
-          "source": "**/*.@(eot|otf|ttf|ttc|woff|woff2|font.css)",
-          "headers": [
-            {
-              "key": "Access-Control-Allow-Origin",
-              "value": "*"
-            }
-          ]
-        },
-        {
-          "source": "**/*.@(eot|otf|ttf|ttc|woff|woff2|font.css)",
-          "headers": [
-            {
-              "key": "cache-control",
-              "value": "max-age=604800"
-            }
-          ]
-        },
         {
           "source": "**/*",
           "headers": [
             {
               "key": "cache-control",
-              "value": "public, max-age=0, must-revalidate"
+              "value": "cache-control: public, max-age=86400, must-revalidate"
             }
           ]
         },
         {
-          "source": "**/*.@(js|css)",
+          "source": "static/**",
           "headers": [
             {
               "key": "cache-control",
-              "value": "max-age=604800"
+              "value": "public, max-age=604800, immutable"
             }
           ]
         },
         {
-          "source": "**/*.@(jpg|jpeg|gif|png|svg)",
+          "source": "**/*.@(css|js|woff2|jpg|png)",
           "headers": [
             {
               "key": "cache-control",
-              "value": "max-age=604800"
+              "value": "public, max-age=86400, immutable"
             }
           ]
         },
@@ -55,16 +37,16 @@
           "headers": [
             {
               "key": "cache-control",
-              "value": "public, max-age=0, must-revalidate"
+              "value": "cache-control: public, max-age=86400, must-revalidate"
             }
           ]
         },
         {
-          "source": "404.html",
+          "source": "page-data/**",
           "headers": [
             {
               "key": "cache-control",
-              "value": "max-age=300"
+              "value": "cache-control: public, max-age=86400, must-revalidate"
             }
           ]
         }

gatsby-config.js

@@ -71,9 +71,21 @@ module.exports = {
         description: 'A free and open-source resume builder.',
         start_url: '/?source=pwa',
         icon: 'static/images/logo.png',
+        icon_options: {
+          purpose: 'any maskable monochrome',
+        },
         background_color: '#FFFFFF',
         theme_color: '#444444',
         display: 'standalone',
+        cache_busting_mode: 'none',
+        icons: [
+          {
+            src: 'static/icons/maskable.png',
+            sizes: '196x196',
+            type: 'image/png',
+            purpose: 'any maskable monochrome',
+          },
+        ],
         shortcuts: [
           {
             name: 'Dashboard',
@@ -87,6 +99,9 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-offline',
       options: {
+        workboxConfig: {
+          globPatterns: ['**/*'],
+        },
         precachePages: ['', '/app/*', '/blog/*'],
       },
     },

src/components/landing/Hero.js

@@ -20,6 +20,7 @@ const Hero = () => {
   return (
     <div className="flex flex-col md:flex-row items-center">
       <Link to="/">
+        <span className="sr-only">Reactive Resume</span>
         <Logo className="shadow-lg" size="256px" />
       </Link>
 

src/components/landing/Screenshots.js

@@ -71,7 +71,7 @@ const Screenshots = () => {
 
   return (
     <div className="mt-24 mb-4">
-      <h4 className="text-xl uppercase font-bold mb-8">Screenshots</h4>
+      <div className="text-xl uppercase font-bold mb-8">Screenshots</div>
 
       <div className="flex w-full overflow-x-scroll">
         {Object.keys(screenshots).map((x) => (
@@ -82,7 +82,11 @@ const Screenshots = () => {
             key={screenshots[x].childImageSharp.fluid.src}
             href={screenshots[x].childImageSharp.fluid.src}
           >
-            <GatsbyImage fixed={screenshots[x].childImageSharp.fixed} />
+            <span className="sr-only">Reactive Resume Screenshot</span>
+            <GatsbyImage
+              fixed={screenshots[x].childImageSharp.fixed}
+              alt="Reactive Resume Screenshot"
+            />
           </a>
         ))}
       </div>

src/components/shared/Wrapper.js

@@ -18,6 +18,7 @@ const Wrapper = ({ children }) => {
   return (
     <>
       <Helmet>
+        <html lang="en" />
         <title>Reactive Resume</title>
         <meta
           name="description"

src/pages/index.js

@@ -68,9 +68,9 @@ const Home = () => {
         </div>
 
         <div className="my-24">
-          <h4 className="text-xl uppercase font-bold mb-8">
+          <div className="text-xl uppercase font-bold mb-8">
             Links of Interest
-          </h4>
+          </div>
           <div className="grid grid-cols-3 md:grid-cols-4 gap-8">
             <Link to="/faq">Frequently Asked Questions</Link>
             <a
@@ -115,7 +115,7 @@ const Home = () => {
 const Feature = ({ title, children }) => {
   return (
     <div className="mt-16">
-      <h3 className="text-3xl">{title}</h3>
+      <div className="text-3xl">{title}</div>
       <p className="mt-6 text-lg leading-loose">{children}</p>
     </div>
   );