Add support for (basic, cached on-visit) offline access using service workers

.eslintrc.js

@@ -13,6 +13,30 @@ module.exports = {
       parserOptions: {
         sourceType: "script"
       }
+    },
+    {
+      env: {
+        serviceworker: true
+      },
+      files: ["src/tests/fixtures/service_workers/*.js"],
+      parserOptions: {
+        sourceType: "script"
+      },
+      globals: {
+        TurboOffline: true
+      }
+    },
+    {
+      env: {
+        serviceworker: true
+      },
+      files: ["src/tests/fixtures/service_workers/module.js"],
+      parserOptions: {
+        sourceType: "module"
+      },
+      globals: {
+        TurboOffline: true
+      }
     }
   ],
   parserOptions: {

package.json

@@ -8,6 +8,16 @@
     "dist/*.js",
     "dist/*.js.map"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/turbo.es2017-esm.js",
+      "require": "./dist/turbo.es2017-umd.js"
+    },
+    "./offline": {
+      "import": "./dist/turbo-offline.js",
+      "require": "./dist/turbo-offline-umd.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hotwired/turbo.git"

rollup.config.js

@@ -24,5 +24,25 @@ export default [
     watch: {
       include: "src/**"
     }
+  },
+  {
+    input: "src/offline/index.js",
+    output: [
+      {
+        file: "dist/turbo-offline.js",
+        format: "es",
+        banner
+      },
+      {
+        name: "TurboOffline",
+        file: "dist/turbo-offline-umd.js",
+        format: "umd",
+        banner
+      }
+    ],
+    plugins: [resolve()],
+    watch: {
+      include: "src/offline/**"
+    }
   }
 ]

src/core/drive/form_submission.js

@@ -1,6 +1,6 @@
 import { FetchRequest, FetchMethod, fetchMethodFromString, fetchEnctypeFromString, isSafe } from "../../http/fetch_request"
 import { expandURL } from "../url"
-import { clearBusyState, dispatch, getAttribute, getMetaContent, hasAttribute, markAsBusy } from "../../util"
+import { clearBusyState, dispatch, getAttribute, getMetaContent, hasAttribute, markAsBusy, getCookie } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
 import { prefetchCache } from "./prefetch_cache"
 import { config } from "../config"
@@ -108,7 +108,7 @@ export class FormSubmission {
 
   prepareRequest(request) {
     if (!request.isSafe) {
-      const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token")
+      const token = getCookie(getMetaContent("csrf-param")) || getMetaContent("csrf-token")
       if (token) {
         request.headers["X-CSRF-Token"] = token
       }
@@ -228,17 +228,6 @@ function buildFormData(formElement, submitter) {
   return formData
 }
 
-function getCookieValue(cookieName) {
-  if (cookieName != null) {
-    const cookies = document.cookie ? document.cookie.split("; ") : []
-    const cookie = cookies.find((cookie) => cookie.startsWith(cookieName))
-    if (cookie) {
-      const value = cookie.split("=").slice(1).join("=")
-      return value ? decodeURIComponent(value) : undefined
-    }
-  }
-}
-
 function responseSucceededWithoutRedirect(response) {
   return response.statusCode == 200 && !response.redirected
 }

src/core/index.js

@@ -4,11 +4,14 @@ import { PageSnapshot } from "./drive/page_snapshot"
 import { FrameRenderer } from "./frames/frame_renderer"
 import { fetch, recentRequests } from "../http/fetch"
 import { config } from "./config"
+
 import { MorphingPageRenderer } from "./drive/morphing_page_renderer"
 import { MorphingFrameRenderer } from "./frames/morphing_frame_renderer"
 
+import { offline } from "./offline"
+
 export { morphChildren, morphElements } from "./morphing"
-export { PageRenderer, PageSnapshot, FrameRenderer, fetch, config }
+export { PageRenderer, PageSnapshot, FrameRenderer, fetch, config, offline }
 
 const session = new Session(recentRequests)
 

src/core/offline.js

@@ -0,0 +1,92 @@
+import { urlsAreEqual } from "./url"
+import { setCookie } from "../util"
+
+class Offline {
+  serviceWorker
+
+  async start(url = "/service-worker.js", { scope = "/", type = "classic", native = true, preload } = {}) {
+    if (!("serviceWorker" in navigator)) {
+      console.warn("Service Worker not available.")
+      return
+    }
+
+    if (native) this.#setUserAgentCookie()
+
+    await this.#domReady()
+
+    // Preload resources loaded into the page before the service worker controls it
+    // as they might not go through the service worker later because they might be
+    // cached by the browser
+    const needsPreloading = preload && !navigator.serviceWorker.controller
+
+     // Check if there's already a service worker registered for a different location
+    this.#checkExistingController(navigator.serviceWorker.controller, url)
+
+    try {
+      const registration = await navigator.serviceWorker.register(url, { scope, type })
+
+      // Check the registration result for any mismatches
+      const registered = registration.active || registration.waiting || registration.installing
+      this.#checkExistingController(registered, url)
+
+      this.serviceWorker = registered
+
+      if (needsPreloading) {
+        this.#preloadWhenReady(preload)
+      }
+
+      return registration
+    } catch(error) {
+      console.error(error)
+    }
+  }
+
+  #setUserAgentCookie() {
+    // Cookie for Hotwire Native's overridden UA
+    const oneYear = 365 * 24 * 60 * 60 * 1000
+    setCookie("x_user_agent", window.navigator.userAgent, oneYear)
+  }
+
+  #checkExistingController(controller, url) {
+    if (controller && !urlsAreEqual(controller.scriptURL, url)) {
+      console.warn(
+        `Expected service worker script ${url} but found ${controller.scriptURL}. ` +
+        `This may indicate multiple service workers or a cached version.`
+      )
+    }
+  }
+
+  async clearCache() {
+    const registration = await navigator.serviceWorker?.ready
+    registration?.active?.postMessage({ action: "clearCache" })
+  }
+
+  #preloadWhenReady(pattern) {
+    navigator.serviceWorker.addEventListener("controllerchange", () => {
+      this.#preloadResources(pattern)
+    }, { once: true })
+  }
+
+  #preloadResources(pattern) {
+    const urls = performance.getEntriesByType("resource")
+      .map(entry => entry.name)
+      .filter(url => pattern.test(url))
+
+    navigator.serviceWorker.controller.postMessage({
+      action: "preloadResources",
+      params: { urls }
+    })
+  }
+
+  #domReady() {
+    return new Promise((resolve) => {
+      if (document.readyState !== "complete") {
+        document.addEventListener("DOMContentLoaded", () => resolve())
+      } else {
+        resolve()
+      }
+    })
+  }
+}
+
+export const offline = new Offline()

src/offline/cache_registry.js

@@ -0,0 +1,175 @@
+const DATABASE_NAME = "turbo-offline-database"
+const DATABASE_VERSION = 1
+const STORE_NAME = "cache-registry"
+
+export function deleteCacheRegistries() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.deleteDatabase(DATABASE_NAME)
+    request.onsuccess = () => resolve()
+    request.onerror = () => reject(request.error)
+  }).then(() => {
+    cacheRegistryDatabase = null
+  })
+}
+
+class CacheRegistryDatabase {
+  get(key) {
+    const getOp = (store) => this.#requestToPromise(store.get(key))
+    return this.#performOperation(STORE_NAME, getOp, "readonly")
+  }
+
+  has(key) {
+    const countOp = (store) => this.#requestToPromise(store.count(key))
+    return this.#performOperation(STORE_NAME, countOp, "readonly").then((result) => result === 1)
+  }
+
+  put(cacheName, key, value) {
+    const putOp = (store) => {
+      const item = { key: key, cacheName: cacheName, timestamp: Date.now(), ...value }
+      store.put(item)
+      return this.#requestToPromise(store.transaction)
+    }
+
+    return this.#performOperation(STORE_NAME, putOp, "readwrite")
+  }
+
+  getTimestamp(key) {
+    return this.get(key).then((result) => result?.timestamp)
+  }
+
+  getOlderThan(cacheName, timestamp) {
+    const getOlderThanOp = (store) => {
+      const index = store.index("cacheNameAndTimestamp")
+      const cursorRequest = index.openCursor(this.#getTimestampRange(cacheName, timestamp))
+
+      return this.#cursorRequestToPromise(cursorRequest)
+    }
+    return this.#performOperation(STORE_NAME, getOlderThanOp, "readonly")
+  }
+
+  getEntryCount(cacheName) {
+    const countOp = (store) => {
+      const index = store.index("cacheNameAndTimestamp")
+      const range = this.#getTimestampRange(cacheName)
+
+      return this.#requestToPromise(index.count(range))
+    }
+    return this.#performOperation(STORE_NAME, countOp, "readonly")
+  }
+
+  getOldestEntries(cacheName, limit) {
+    const getOldestOp = (store) => {
+      const index = store.index("cacheNameAndTimestamp")
+      const cursorRequest = index.openCursor(this.#getTimestampRange(cacheName))
+
+      return this.#cursorRequestToPromise(cursorRequest, limit)
+    }
+    return this.#performOperation(STORE_NAME, getOldestOp, "readonly")
+  }
+
+  delete(key) {
+    const deleteOp = (store) => this.#requestToPromise(store.delete(key))
+    return this.#performOperation(STORE_NAME, deleteOp, "readwrite")
+  }
+
+  #performOperation(storeName, operation, mode) {
+    return this.#openDatabase().then((database) => {
+      const transaction = database.transaction(storeName, mode)
+      const store = transaction.objectStore(storeName)
+      return operation(store)
+    })
+  }
+
+  #openDatabase() {
+    const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION)
+    request.onupgradeneeded = () => {
+      const cacheMetadataStore = request.result.createObjectStore(STORE_NAME, { keyPath: "key" })
+      cacheMetadataStore.createIndex("cacheNameAndTimestamp", [ "cacheName", "timestamp" ])
+    }
+
+    return this.#requestToPromise(request)
+  }
+
+  #requestToPromise(request) {
+    return new Promise((resolve, reject) => {
+      request.oncomplete = request.onsuccess = () => resolve(request.result)
+      request.onabort = request.onerror = () => reject(request.error)
+    })
+  }
+
+  #cursorRequestToPromise(request, limit = Infinity) {
+    return new Promise((resolve, reject) => {
+      const results = []
+
+      request.onsuccess = (event) => {
+        const cursor = event.target.result
+        if (cursor && results.length < limit) {
+          results.push(cursor.value)
+          cursor.continue()
+        } else {
+          resolve(results)
+        }
+      }
+
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  #getTimestampRange(cacheName, upperBound = Infinity) {
+    // Use compound key range: [cacheName, timestamp]
+    return IDBKeyRange.bound(
+      [cacheName, 0], // start of range
+      [cacheName, upperBound], // end of range
+      false, // lowerOpen: include lower bound
+      true // upperOpen: exclude upper bound
+    )
+  }
+}
+
+let cacheRegistryDatabase = null
+
+function getDatabase() {
+  if (!cacheRegistryDatabase) {
+    cacheRegistryDatabase = new CacheRegistryDatabase()
+  }
+  return cacheRegistryDatabase
+}
+
+export class CacheRegistry {
+  constructor(cacheName) {
+    this.cacheName = cacheName
+    this.database = getDatabase()
+  }
+
+  get(key) {
+    return this.database.get(key)
+  }
+
+  has(key) {
+    return this.database.has(key)
+  }
+
+  put(key, value = {}) {
+    return this.database.put(this.cacheName, key, value)
+  }
+
+  getTimestamp(key) {
+    return this.database.getTimestamp(key)
+  }
+
+  getOlderThan(timestamp) {
+    return this.database.getOlderThan(this.cacheName, timestamp)
+  }
+
+  getEntryCount() {
+    return this.database.getEntryCount(this.cacheName)
+  }
+
+  getOldestEntries(limit) {
+    return this.database.getOldestEntries(this.cacheName, limit)
+  }
+
+  delete(key) {
+    return this.database.delete(key)
+  }
+}