@W-13718763: use s-maxage to only cache shared cache

[alexvuong]

Description

The max-age directive implies that a page can be cached both by the browser and the shared CDN cache.

When a new bundle is deployed to an environment, the shared CDN cache is cleared, but stale copies of the site might still exist in a shopper's browser.

We could avoid this situation by moving to s-maxage, which only caches in shared caches:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1)

How to Test-Drive This PR

• (step1)

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[vcua-mobify]

This PR addresses #1319

I deployed these changes onto a test environment: https://scaffold-pwa-test-env-2.mobify-storefront.com/

I can see the s-maxage appear on the home page.

But on both the PDP and PLP, I see both a maxage and s-maxage

s-maxage overrides maxage where it can but I think we're trying to remove maxage entirely from these pages?

[adamraya]

I did a quick search of our default Cache Control directives and noticed that a few resources are still using "max-age".

• pwa-kit/packages/template-retail-react-app/app/ssr.js

  Line 66 in a620c57

  res.set('Cache-Control', `max-age=31536000`)

• pwa-kit/packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/pages/home/index.jsx.hbs

  Line 54 in a5f9b14

  res.set('Cache-Control', `max-age=${MAX_CACHE_AGE}`)

• pwa-kit/packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js

  Line 66 in a620c57

  res.set('Cache-Control', `max-age=31536000`)

Should we consider updating the Cache Control headers directive to use "s-maxage" instead of "max-age"?

[adamraya]

Also, remember to add a new entry to the Changelog.

[vcua-mobify]

Approving. In my previous comment, I was looking at the .js file. Looking at the document, I only see s-maxage