fix: alter headers on cached response (#4032)

* fix: alter headers on cached response * test: deflake

fix: alter headers on cached response (#4032)
* fix: alter headers on cached response * test: deflake
b9e81396 · Zach Pomerantz · GitHub · c82dcabd · b9e81396 · b9e81396
Commit b9e81396 authored Jul 05, 2022 by Zach Pomerantz Committed by GitHub Jul 05, 2022
Show whitespace changes
Inline Side-by-side

Showing with 6 additions and 4 deletions

swap.test.ts cypress/e2e/swap.test.ts +1 -1

document.ts src/serviceWorker/document.ts +5 -3

No files found.
--- a/cypress/e2e/swap.test.ts
+++ b/cypress/e2e/swap.test.ts
 describe('Swap', () => {
  beforeEach(() => {
-    cy.visit('/swap')
+    cy.visit('/swap').get('#swap-currency-input .token-amount-input')
  })
  it('starts with ETH selected by default', () => {

--- a/src/serviceWorker/document.ts
+++ b/src/serviceWorker/document.ts
@@ -98,12 +98,14 @@ export class CachedDocument extends Response {
  static async from(response: Response) {
    const text = await response.text()
-    // Some browsers (Android 12; Chrome 91) duplicate the content-type header, invalidating it.
+    // Set the content-type explicitly. Some browsers (Android 12; Chrome 91) use an invalid content-type header.
-    response.headers.set('Content-Type', 'text/html; charset=utf-8')
+    const headers = new Headers(response.headers)
+    headers.set('Content-Type', 'text/html; charset=utf-8')
+    const init = { ...response, headers }
    // Injects a marker into the document so that client code knows it was served from cache.
    // The marker should be injected immediately in the <body> so it is available to client code.
-    return new CachedDocument(text.replace('<body>', '<body><script>window.__isDocumentCached=true</script>'), response)
+    return new CachedDocument(text.replace('<body>', '<body><script>window.__isDocumentCached=true</script>'), init)
  }
  private constructor(text: string, response: Response) {