@aws-amplify/ui-react-storage 3.17.2 → 3.18.0

package/dist/download-sw.js

@@ -0,0 +1,70 @@
+(function () {
+    'use strict';
+
+    /// <reference lib="webworker" />
+    const pendingStreams = new Map();
+    // Skip waiting to activate immediately on first install (no navigation required)
+    self.addEventListener('install', () => {
+        self.skipWaiting();
+    });
+    // Claim clients immediately so navigator.serviceWorker.controller is available
+    self.addEventListener('activate', (event) => {
+        event.waitUntil(self.clients.claim());
+    });
+    // Receive stream from main thread via MessageChannel
+    self.addEventListener('message', (event) => {
+        // Security: only accept messages from same-origin clients. A service worker
+        // exclusively communicates with pages it controls, which are same-origin by
+        // definition. Rejecting mismatched origins guards against cross-origin
+        // senders attempting to inject or hijack download streams.
+        if (event.origin !== self.location.origin) {
+            return;
+        }
+        const data = event.data;
+        if (data.type === 'keepalive') {
+            // Extend SW lifetime to prevent Firefox's 30s idle timeout from terminating
+            // the worker while streaming. Each keepalive holds the SW alive for 15s,
+            // overlapping with the 10s ping interval from the page.
+            event.waitUntil(new Promise((resolve) => setTimeout(resolve, 15000)));
+            return;
+        }
+        const { downloadId, filename, stream } = data;
+        if (downloadId && stream) {
+            // Fall back to the id's last path segment only if no explicit filename was
+            // provided (older callers); the page normally sends `${folder}.zip`.
+            const resolvedFilename = filename ?? downloadId.split('/').pop() ?? 'download.zip';
+            pendingStreams.set(downloadId, { stream, filename: resolvedFilename });
+            // Acknowledge receipt so the main thread knows it's safe to trigger the download
+            if (event.ports[0]) {
+                event.ports[0].postMessage({ ready: true });
+            }
+        }
+    });
+    // Intercept fetch requests matching the download URL pattern
+    self.addEventListener('fetch', (event) => {
+        const url = new URL(event.request.url);
+        if (!url.pathname.startsWith('/amplify-storage-download/'))
+            return;
+        // The download id is percent-encoded by the browser when the <a> navigation
+        // fires (folder names may contain spaces or other URL-unsafe characters), so
+        // decode it before looking up the stream stored under the unencoded key.
+        const rawId = url.pathname.split('/amplify-storage-download/')[1];
+        const downloadId = decodeURIComponent(rawId);
+        const pending = pendingStreams.get(downloadId);
+        if (!pending)
+            return;
+        pendingStreams.delete(downloadId);
+        const { stream, filename } = pending;
+        event.respondWith(new Response(stream, {
+            headers: {
+                // RFC 5987 extended notation encodes arbitrary UTF-8 (including quotes
+                // and backslashes that S3 keys may legally contain) without escaping.
+                // `filename` is the user-facing name sent by the page (e.g. folder.zip),
+                // NOT the timestamped internal downloadId.
+                'Content-Disposition': `attachment; filename*=UTF-8''${encodeURIComponent(filename)}`,
+                'Content-Type': 'application/octet-stream',
+            },
+        }));
+    });
+
+})();

package/dist/esm/components/StorageBrowser/actions/configs/defaults.mjs

@@ -53,9 +53,11 @@ const uploadActionConfig = {
 const downloadActionConfig = {
     viewName: 'DownloadView',
     actionListItem: {
+        // Only an empty selection disables Download; folder selections are
+        // expanded into files at the view level.
         disable: (selected) => {
             const hasNoSelection = !selected || selected.length === 0;
-            return hasNoSelection || hasSelectedFolders(selected);
+            return hasNoSelection;
         },
         hide: (permissions) => !permissions.includes('get'),
         icon: 'download',

package/dist/esm/components/StorageBrowser/actions/handlers/composedDownloadHandler.mjs

@@ -1,6 +1,6 @@
 import { downloadHandler } from './download.mjs';
-import { zipDownloadHandler as downloadHandler$1 } from './zipdownload.mjs';
+import { zipDownloadHandler } from './zipdownload.mjs';
 
-const composedDownloadHandler = (input) => input.all.length === 1 ? downloadHandler(input) : downloadHandler$1(input);
+const composedDownloadHandler = (input) => input.all.length === 1 ? downloadHandler(input) : zipDownloadHandler(input);
 
 export { composedDownloadHandler };

package/dist/esm/components/StorageBrowser/actions/handlers/download.mjs

@@ -10,7 +10,7 @@ function downloadFromUrl(fileName, url) {
     a.click();
     document.body.removeChild(a);
 }
-const downloadHandler = ({ config, data }) => {
+const downloadHandler = ({ config, data, }) => {
     const { accountId, credentials, customEndpoint } = config;
     const { key } = data;
     const result = getUrl({

package/dist/esm/components/StorageBrowser/actions/handlers/utils.mjs

@@ -169,7 +169,29 @@ const createFileDataItem = (data) => ({
     ...data,
     fileKey: getFileKey(data.key),
 });
+/**
+ * Builds a download item ({@link DownloadHandlerData}) from a {@link FileData}
+ * plus the current browse-location prefix `P`.
+ *
+ * `relativePath = key.slice(P.length)` yields a zip entry path relative to the
+ * selected folder's *parent* (e.g. selecting `photos/` produces entries like
+ * `photos/vacation/beach.jpg`). This keeps each top-level folder name as a
+ * namespace, avoiding collisions across multiple selected folders. For loose
+ * files at the current prefix it reduces to the basename.
+ */
+const createDownloadItem = (data, locationPrefix) => {
+    // Assumes `locationPrefix` is '' or ends in '/' (StorageBrowser convention),
+    // so the slice yields a clean folder-relative path with no leading segment.
+    // Defensive: strip a single leading '/' so a prefix NOT ending in '/' can
+    // never yield a leading-slash (absolute) zip entry path.
+    const sliced = data.key.slice(locationPrefix.length);
+    return {
+        ...data,
+        fileKey: getFileKey(data.key),
+        relativePath: sliced.startsWith('/') ? sliced.slice(1) : sliced,
+    };
+};
 const getProgress = ({ totalBytes, transferredBytes, }) => totalBytes ? transferredBytes / totalBytes : undefined;
 const isMultipartUpload = (file) => file.size > MULTIPART_UPLOAD_THRESHOLD_BYTES;
 
-export { constructBucket, createFileDataItem, deduplicateLocations, getBucketRegion, getFileKey, getFilteredLocations, getProgress, isMultipartUpload, parseAccessGrantLocation, shouldExcludeLocation };
+export { constructBucket, createDownloadItem, createFileDataItem, deduplicateLocations, getBucketRegion, getFileKey, getFilteredLocations, getProgress, isMultipartUpload, parseAccessGrantLocation, shouldExcludeLocation };

package/dist/esm/components/StorageBrowser/actions/handlers/zipdownload.mjs

@@ -1,72 +1,178 @@
 import { getUrl } from '@aws-amplify/storage/internals';
 import { isFunction } from '@aws-amplify/ui';
 import { getProgress } from './utils.mjs';
-import { BlobWriter, ZipWriter, BlobReader } from '@zip.js/zip.js';
+import { ZipWriter } from '@zip.js/zip.js';
 
-const zipper = (() => {
-    let blobWriter = null;
-    let zipWriter = null;
-    return {
-        addFile: async (file, name, options) => {
-            const { data, signal, onProgress } = options ?? {};
-            if (!blobWriter) {
-                blobWriter = new BlobWriter('application/zip');
-                zipWriter = new ZipWriter(blobWriter);
-            }
-            await zipWriter.add(name, new BlobReader(file), {
-                level: 0,
-                signal,
-                onprogress: (progress, total) => {
-                    if (isFunction(onProgress) && data) {
-                        onProgress(progress / total, name, data);
-                    }
-                    return undefined;
-                },
-            });
-        },
-        getBlobUrl: async () => {
-            if (!zipWriter) {
-                throw new Error('no zip');
-            }
-            const blob = await zipWriter.close();
-            zipWriter = null;
-            blobWriter = null;
-            return URL.createObjectURL(blob);
-        },
-        destroy: () => {
-            zipWriter = null;
-            blobWriter = null;
-        },
-    };
-})();
+/**
+ * Zip Download Handler
+ *
+ * Downloads multiple S3 files sequentially into a streaming zip archive,
+ * delivered via service worker (with blob fallback for browsers without SW support).
+ *
+ * State machine: IDLE → DOWNLOADING → COMPLETE | CANCELLED
+ *
+ * Batch state is scoped per download session using a WeakMap keyed by the `all`
+ * array identity (guaranteed stable per useProcessTasks invocation).
+ * This avoids module-level singleton issues if multiple StorageBrowser instances
+ * share the same module.
+ *
+ * Cancel paths:
+ * - UI cancel (onActionCancel button): cancelBatch() → aborts fetch + writable → reset
+ * - Browser-dialog cancel: SW stream closes → addPromise rejects → cancelled=true → drain remaining files
+ */
+/**
+ * Batch state is keyed by a stable serialization of the file IDs in the batch.
+ * useProcessTasks recreates the `all` array on each handler call (spread + map),
+ * so we cannot rely on reference identity. Sorting IDs produces a deterministic
+ * key that remains identical across calls for the same set of files.
+ */
+const batchMap = new Map();
+/** Derives a stable batch key from the task data array. */
+const getBatchKey = (all) => all
+    .map((item) => item.id)
+    .sort()
+    .join('\0');
+/** Tears down all listeners and removes batch from map. */
+const reset = (batchKey, state) => {
+    if (state.keepaliveInterval) {
+        clearInterval(state.keepaliveInterval);
+    }
+    batchMap.delete(batchKey);
+};
+/**
+ * Marks the batch cancelled and tears down the active stream, but deliberately
+ * KEEPS the batchMap entry alive. Idempotent.
+ *
+ * The `cancelled` sentinel and the map entry share one key, so deleting the
+ * entry here would erase the very flag the drain path relies on: with
+ * `concurrency: 1`, useProcessTasks re-dispatches each remaining QUEUED file to
+ * the handler on settle. If the entry were gone, those files would miss the
+ * `existingBatch.cancelled` early-exit and build a brand-new batch — resurrecting
+ * the download. Instead we leave a tombstoned entry; the remaining files hit the
+ * early-exit branch and `reset()` runs only once `batchDone === batchTotal`
+ * (in the STEP 1 early-exit or onFileSettled), for both cancel and completion.
+ */
+const cancelBatch = (batchKey) => {
+    const state = batchMap.get(batchKey);
+    if (!state || state.cancelled)
+        return;
+    state.cancelled = true;
+    state.batchAbort.abort();
+    // Terminate the SW response stream by aborting the writable side of the TransformStream.
+    // This errors the readable (transferred to SW), which errors the Response, failing the browser download.
+    state.zipWritable.abort('Download cancelled').catch(() => { });
+    // Stop keepalive pings immediately, but do NOT delete the map entry — the
+    // remaining queued files must still find this (cancelled) batch. The entry is
+    // removed by reset() at the final drain.
+    if (state.keepaliveInterval) {
+        clearInterval(state.keepaliveInterval);
+        state.keepaliveInterval = null;
+    }
+};
+// ─── Utilities ───
+/** Extracts the S3 bucket descriptor from handler config. */
 const constructBucket = ({ bucket: bucketName, region, }) => ({ bucketName, region });
-const readBody = async (response, { data, options }) => {
-    let loading = true;
+/**
+ * Derives the zip filename from the first key's parent folder.
+ *
+ * Examples:
+ * - "photos/vacation/beach.jpg" → "vacation"
+ * - "photos/file.txt" → "photos"
+ * - "file.txt" (no slash) → "archive"
+ * - "/file.txt" (slash at index 0 only) → "archive"
+ *
+ * For root-level multi-file selections (no common parent folder), returns "archive".
+ */
+const getFolderName = (key) => {
+    const lastSlash = key.lastIndexOf('/');
+    if (lastSlash <= 0)
+        return 'archive';
+    const parentPath = key.substring(0, lastSlash);
+    return parentPath.split('/').pop() ?? 'archive';
+};
+/** Collects a ReadableStream into a single Blob (fallback when SW is unavailable). */
+const collectBlob = async (readable) => {
+    const reader = readable.getReader();
     const chunks = [];
-    const reader = response.body.getReader();
-    const size = +(response.headers.get('content-length') ?? 0);
-    let received = 0;
-    while (loading) {
+    for (;;) {
         const { value, done } = await reader.read();
-        if (done) {
-            loading = false;
+        if (done)
+            break;
+        chunks.push(value);
+    }
+    return new Blob(chunks, { type: 'application/zip' });
+};
+// ─── Service Worker Initialization ───
+/**
+ * Registers the SW stream transfer (MessageChannel handshake + keepalive)
+ * or falls back to in-memory blob collection when SW is unavailable.
+ * Mutates state.swReady and state.blobPromise.
+ */
+const initServiceWorkerStream = (state) => {
+    if (!navigator.serviceWorker) {
+        state.blobPromise = collectBlob(state.zipReadable);
+        return;
+    }
+    state.swReady = navigator.serviceWorker
+        .getRegistration('/amplify-storage-download/')
+        .then((reg) => {
+        // If the batch was cancelled while getRegistration() was pending, bail out
+        // before wiring up the MessageChannel or keepalive interval. Otherwise the
+        // interval would be created after reset() already cleared batchMap, leaking
+        // a timer with no reference to clear it.
+        if (state.cancelled) {
+            return;
         }
-        else {
-            chunks.push(value);
-            received += value.length;
-            if (isFunction(options?.onProgress)) {
-                options?.onProgress(data, getProgress({
-                    totalBytes: size,
-                    transferredBytes: received,
-                }), 'PENDING');
-            }
+        if (!reg?.active) {
+            state.blobPromise = collectBlob(state.zipReadable);
+            return;
         }
-    }
-    return new Blob(chunks);
+        // Cancel detection works via addPromise.catch: when the user dismisses the
+        // download dialog, the SW response stream closes → TransformStream writable
+        // errors → zipWriter.add() rejects → cancelled flag is set.
+        const { port1, port2 } = new MessageChannel();
+        port1.onmessage = () => {
+            const a = document.createElement('a');
+            a.href = `/amplify-storage-download/${state.downloadId}`;
+            a.download = `${state.folder}.zip`;
+            a.click();
+            port1.close();
+        };
+        // Send the user-facing filename explicitly. `downloadId` embeds Date.now()
+        // to keep the SW's stream-map key unique across batches — that timestamp
+        // must NOT leak into the saved filename. The SW uses `filename` for the
+        // Content-Disposition header so the SW path and the blob-fallback path both
+        // save `${folder}.zip`.
+        reg.active.postMessage({
+            downloadId: state.downloadId,
+            filename: `${state.folder}.zip`,
+            stream: state.zipReadable,
+        }, [state.zipReadable, port2]);
+        state.zipReadable = null;
+        // Keepalive pings run for the entire batch duration to prevent Firefox's
+        // 30s SW idle timeout from terminating the worker mid-stream.
+        state.keepaliveInterval = setInterval(() => {
+            reg.active?.postMessage({ type: 'keepalive' });
+        }, 10000);
+    });
 };
-const download = async ({ config, data, all, options }, abortController) => {
+// ─── Per-file Download ───
+/**
+ * Downloads a single file, streams it into the zip writer entry.
+ * Receives the active batch state explicitly — throws if state is invalid.
+ */
+const download = async (state, { config, data, options }) => {
     const { customEndpoint, credentials, accountId } = config;
     const { key } = data;
+    // Prefer the folder-relative path (set during folder expansion) so nested
+    // files keep their structure inside the zip; fall back to the bare basename
+    // for loose files / legacy inputs that don't carry a relativePath.
+    const filename = data.relativePath ?? key.split('/').pop();
+    await state.swReady;
+    if (state.cancelled) {
+        throw new Error('Download cancelled');
+    }
+    // Note: getUrl is a presigned URL generation call (local, fast) — not cancellable
     const { url } = await getUrl({
         path: key,
         options: {
@@ -80,75 +186,193 @@ const download = async ({ config, data, all, options }, abortController) => {
     });
     const response = await fetch(url, {
         mode: 'cors',
-        signal: abortController.signal,
+        signal: state.batchAbort.signal,
     });
-    const blob = await readBody(response, { data, options });
-    const [filename] = key.split('/').reverse();
-    await zipper.addFile(blob, filename, {
-        data,
-        signal: abortController.signal,
-        onProgress: (progress, _name, _data) => {
-            if (isFunction(options?.onProgress)) {
-                options?.onProgress(_data, progress, progress === 1 ? 'COMPLETE' : 'FINISHING');
-            }
+    if (!response.body)
+        throw new Error(`Empty response body for ${key}`);
+    const size = data.size ?? +(response.headers.get('content-length') ?? 0);
+    let transferred = 0;
+    // Intermediate stream decouples fetch errors from zip.js internals.
+    // Closing this stream cleanly lets zip.js finalize the entry without
+    // uncaught AbortError rejections from its codec-worker.
+    let streamController;
+    const fileStream = new ReadableStream({
+        start(controller) {
+            streamController = controller;
         },
     });
+    // Start the zip add — returns a promise that resolves when the
+    // ReadableStream we gave it closes.
+    const addPromise = state.zipWriter.add(filename, fileStream, { level: 0 });
+    // When the browser dismisses the download dialog, the SW response stream
+    // closes → TransformStream writable errors → zipWriter.add() rejects.
+    // We flag cancellation from two robust signals: an explicit abort in flight
+    // (UI cancel aborts batchAbort) or a standard `AbortError` (the DOM error name
+    // zip.js surfaces when its output stream is terminated by a dialog cancel).
+    // We deliberately avoid substring-matching zip.js's internal error messages,
+    // which are not a public API contract. Any other rejection is a genuine error.
+    addPromise.catch((error) => {
+        const err = error instanceof Error ? error : undefined;
+        if (state.batchAbort.signal.aborted || err?.name === 'AbortError') {
+            state.cancelled = true;
+        }
+        // Re-throw is not needed — the await below will surface the rejection.
+    });
+    try {
+        const reader = response.body.getReader();
+        for (;;) {
+            if (state.cancelled) {
+                streamController.close();
+                throw new Error('Download cancelled');
+            }
+            const { value, done } = await reader.read();
+            if (done)
+                break;
+            transferred += value.length;
+            streamController.enqueue(value);
+            if (size > 0 && isFunction(options?.onProgress)) {
+                options.onProgress(data, getProgress({ totalBytes: size, transferredBytes: transferred }), 'PENDING');
+            }
+        }
+        // All chunks read — close the stream so zip.js finalizes the entry
+        streamController.close();
+        await addPromise;
+        if (isFunction(options?.onProgress)) {
+            options.onProgress(data, 1, 'COMPLETE');
+        }
+    }
+    catch (e) {
+        const err = e;
+        try {
+            streamController.close();
+        }
+        catch {
+            /* already closed */
+        }
+        try {
+            await Promise.race([
+                addPromise,
+                new Promise((_, reject) => setTimeout(() => reject(new Error('addPromise timeout')), 1000)),
+            ]);
+        }
+        catch {
+            /* swallow — zip entry incomplete */
+        }
+        throw state.cancelled || err.name === 'AbortError'
+            ? new Error('Download cancelled')
+            : err;
+    }
     return filename;
 };
-const downloadHandler = (() => {
-    const fileDownloadQueue = new Map();
-    const handler = ({ config, data, all, options }) => {
-        const { key } = data;
-        const [, folder] = key.split('/').reverse();
-        fileDownloadQueue.set(key, false);
-        const abortController = new AbortController();
+// ─── Post-file Settlement ───
+/**
+ * Called after each file completes (success or failure).
+ * Increments progress and triggers batch cleanup when all files are settled.
+ *
+ * IMPORTANT: For the final file, this function awaits cleanup completion
+ * (zipWriter.close + blob download) before returning. This ensures the
+ * user receives the download before useProcessTasks marks the task "done"
+ * and the component can unmount.
+ */
+const onFileSettled = async (batchKey, state, taskResult) => {
+    state.batchDone++;
+    if (state.batchDone < state.batchTotal) {
+        return taskResult;
+    }
+    // Final file — run cleanup synchronously in this promise chain so that
+    // the task result is not returned until the download is triggered.
+    try {
+        if (!state.cancelled && state.zipWriter) {
+            await state.zipWriter.close();
+            if (state.blobPromise) {
+                const blob = await state.blobPromise;
+                const a = document.createElement('a');
+                a.href = URL.createObjectURL(blob);
+                a.download = `${state.folder}.zip`;
+                a.click();
+                URL.revokeObjectURL(a.href);
+            }
+        }
+    }
+    catch {
+        // zip close failed — batch was likely cancelled
+    }
+    finally {
+        reset(batchKey, state);
+    }
+    return taskResult;
+};
+// ─── Handler ───
+/** Main entry point — called once per file in a multi-select download batch. */
+const zipDownloadHandler = ({ config, data, all, options, }) => {
+    const { key } = data;
+    const firstKey = all[0]?.key ?? key;
+    // The view computes the batch zip name (last segment of the common ancestor
+    // dir of all files) and stamps it onto every item. Prefer it; fall back to
+    // the legacy first-key parent-folder heuristic when it's absent.
+    const folder = all[0]?.archiveName ?? getFolderName(firstKey);
+    const batchKey = getBatchKey(all);
+    const existingBatch = batchMap.get(batchKey);
+    // ─── STEP 1: Handle cancelled state ───
+    if (existingBatch?.cancelled) {
+        existingBatch.batchDone++;
+        const result = Promise.resolve({
+            status: 'CANCELED',
+            message: 'Download cancelled',
+        });
+        if (existingBatch.batchDone >= existingBatch.batchTotal) {
+            result.finally(() => reset(batchKey, existingBatch));
+        }
         return {
+            result,
             cancel: () => {
-                abortController.abort();
-                fileDownloadQueue.set(key, true);
+                /* already cancelled — noop */
             },
-            result: download({ config, data, all, options }, abortController)
-                .then(() => {
-                fileDownloadQueue.set(key, true);
-                return {
-                    status: 'COMPLETE',
-                };
-            })
-                .catch((e) => {
-                const error = e;
-                fileDownloadQueue.set(key, true);
-                return {
-                    status: 'FAILED',
-                    message: error.message,
-                    error,
-                };
-            })
-                .finally(() => {
-                const done = all.every(({ key }) => {
-                    return fileDownloadQueue.get(key);
-                });
-                if (done) {
-                    zipper
-                        .getBlobUrl()
-                        .then((blobURL) => {
-                        if (blobURL) {
-                            zipper.destroy();
-                            const anchor = document.createElement('a');
-                            const clickEvent = new MouseEvent('click');
-                            anchor.href = blobURL;
-                            anchor.download = `${folder || 'archive'}.zip`;
-                            anchor.dispatchEvent(clickEvent);
-                        }
-                    })
-                        .catch(() => {
-                        // this catch happens, when no zip was created.
-                        // it is handled by the UI showing "FAILED" for all files
-                    });
-                }
-            }),
         };
+    }
+    // ─── STEP 2: Initialize zip writer on first file ───
+    let currentBatch;
+    if (!existingBatch) {
+        const { readable, writable } = new TransformStream();
+        currentBatch = {
+            zipWriter: new ZipWriter(writable),
+            zipWritable: writable,
+            zipReadable: readable,
+            downloadId: `${folder}-${Date.now()}.zip`,
+            blobPromise: null,
+            swReady: Promise.resolve(),
+            cancelled: false,
+            batchAbort: new AbortController(),
+            batchTotal: all.length,
+            batchDone: 0,
+            keepaliveInterval: null,
+            folder,
+        };
+        batchMap.set(batchKey, currentBatch);
+        initServiceWorkerStream(currentBatch);
+    }
+    else {
+        currentBatch = existingBatch;
+    }
+    // ─── STEP 3: Normal download ───
+    return {
+        cancel: () => {
+            cancelBatch(batchKey);
+        },
+        result: download(currentBatch, { config, data, options })
+            .then(() => ({ status: 'COMPLETE' }))
+            .catch((e) => {
+            const err = e;
+            if (err.message === 'Download cancelled' ||
+                err.name === 'AbortError' ||
+                currentBatch.cancelled) {
+                currentBatch.cancelled = true;
+                return { status: 'CANCELED', message: 'Download cancelled' };
+            }
+            return { status: 'FAILED', message: err.message, error: err };
+        })
+            .then((taskResult) => onFileSettled(batchKey, currentBatch, taskResult)),
     };
-    return handler;
-})();
+};
 
-export { downloadHandler as zipDownloadHandler };
+export { zipDownloadHandler };

package/dist/esm/components/StorageBrowser/createStorageBrowser/StorageBrowserDefault.mjs

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { useServiceWorkerRegistration } from '../service-worker/useServiceWorkerRegistration.mjs';
 import { useViews } from '../views/context/views.mjs';
 import '../views/LocationActionView/CopyView/CopyView.mjs';
 import '@aws-amplify/ui';
@@ -22,11 +23,11 @@ import 'aws-amplify';
 import '@zip.js/zip.js';
 import 'aws-amplify/storage';
 import '../views/LocationActionView/DownloadView/DownloadView.mjs';
+import '../actions/configs/context.mjs';
 import '../views/context/actionViews.mjs';
 import '../views/LocationActionView/UploadView/UploadView.mjs';
 import '../fileItems/context.mjs';
 import '../views/LocationDetailView/LocationDetailView.mjs';
-import '../actions/configs/context.mjs';
 import '../filePreview/context.mjs';
 import '../views/LocationsView/LocationsView.mjs';
 
@@ -37,6 +38,7 @@ import '../views/LocationsView/LocationsView.mjs';
  * - render `ActionView` on action selection
  */
 function StorageBrowserDefault() {
+    useServiceWorkerRegistration();
     const { primary } = useViews();
     const { LocationActionView, LocationDetailView, LocationsView } = primary;
     const [{ actionType, location }] = useStore();