Merge pull request #11085 from AvaloniaUI/wasm-save-file-picker

WASM save file picker polyfill for Firefox

src/Avalonia.Base/Platform/Storage/FileIO/StorageProviderHelpers.cs

@@ -50,7 +50,8 @@ internal static class StorageProviderHelpers
         }
     }
     
-    public static string NameWithExtension(string path, string? defaultExtension, FilePickerFileType? filter)
+    [return: NotNullIfNotNull(nameof(path))]
+    public static string? NameWithExtension(string? path, string? defaultExtension, FilePickerFileType? filter)
     {
         var name = Path.GetFileName(path);
         if (name != null && !Path.HasExtension(name))

src/Browser/Avalonia.Browser/BrowserAppBuilder.cs

@@ -11,6 +11,27 @@ public class BrowserPlatformOptions
     /// If null, default path resolved depending on the backend (browser or blazor) is used.
     /// </summary>
     public Func<string, string>? FrameworkAssetPathResolver { get; set; }
+
+    /// <summary>
+    /// Defines if the service worker used by Avalonia should be registered.
+    /// If registered, service worker can work as a save file picker fallback on the browsers that don't support native implementation.
+    /// For more details, see https://github.com/jimmywarting/native-file-system-adapter#a-note-when-downloading-with-the-polyfilled-version.
+    /// </summary>
+    public bool RegisterAvaloniaServiceWorker { get; set; }
+
+    /// <summary>
+    /// If <see cref="RegisterAvaloniaServiceWorker"/> is enabled, it is possible to redefine scope for the worker.
+    /// By default, current domain root is used as a scope.
+    /// </summary>
+    public string? AvaloniaServiceWorkerScope { get; set; }
+    
+    /// <summary>
+    /// Avalonia uses "native-file-system-adapter" polyfill for the file dialogs.
+    /// If native implementation is available, by default it is used.
+    /// This property forces polyfill to be always used.
+    /// For more details, see https://github.com/jimmywarting/native-file-system-adapter#a-note-when-downloading-with-the-polyfilled-version.
+    /// </summary>
+    public bool PreferFileDialogPolyfill { get; set; }
 }
 
 public static class BrowserAppBuilder

src/Browser/Avalonia.Browser/Interop/AvaloniaModule.cs

@@ -25,6 +25,15 @@ internal static partial class AvaloniaModule
 
     public static Task ImportStorage() => s_importStorage.Value;
 
+    public static string ResolveServiceWorkerPath()
+    {
+        var options = AvaloniaLocator.Current.GetService<BrowserPlatformOptions>() ?? new BrowserPlatformOptions();
+        return options.FrameworkAssetPathResolver!("sw.js");
+    }
+
     [JSImport("Caniuse.isMobile", AvaloniaModule.MainModuleName)]
     public static partial bool IsMobile();
+    
+    [JSImport("registerServiceWorker", AvaloniaModule.MainModuleName)]
+    public static partial void RegisterServiceWorker(string path, string? scope);
 }

src/Browser/Avalonia.Browser/Interop/StorageHelper.cs

@@ -9,15 +9,15 @@ internal static partial class StorageHelper
     public static partial bool HasNativeFilePicker();
 
     [JSImport("StorageProvider.selectFolderDialog", AvaloniaModule.StorageModuleName)]
-    public static partial Task<JSObject?> SelectFolderDialog(JSObject? startIn);
+    public static partial Task<JSObject?> SelectFolderDialog(JSObject? startIn, bool preferPolyfill);
 
     [JSImport("StorageProvider.openFileDialog", AvaloniaModule.StorageModuleName)]
     public static partial Task<JSObject?> OpenFileDialog(JSObject? startIn, bool multiple,
-        [JSMarshalAs<JSType.Array<JSType.Any>>] object[]? types, bool excludeAcceptAllOption);
+        [JSMarshalAs<JSType.Array<JSType.Any>>] object[]? types, bool excludeAcceptAllOption, bool preferPolyfill);
 
     [JSImport("StorageProvider.saveFileDialog", AvaloniaModule.StorageModuleName)]
     public static partial Task<JSObject?> SaveFileDialog(JSObject? startIn, string? suggestedName,
-        [JSMarshalAs<JSType.Array<JSType.Any>>] object[]? types, bool excludeAcceptAllOption);
+        [JSMarshalAs<JSType.Array<JSType.Any>>] object[]? types, bool excludeAcceptAllOption, bool preferPolyfill);
 
     [JSImport("StorageItem.createWellKnownDirectory", AvaloniaModule.StorageModuleName)]
     public static partial JSObject CreateWellKnownDirectory(string wellKnownDirectory);

src/Browser/Avalonia.Browser/Storage/BrowserStorageProvider.cs

@@ -6,20 +6,22 @@ using System.Runtime.InteropServices.JavaScript;
 using System.Threading.Tasks;
 using Avalonia.Browser.Interop;
 using Avalonia.Platform.Storage;
+using Avalonia.Platform.Storage.FileIO;
 
 namespace Avalonia.Browser.Storage;
 
-internal record FilePickerAcceptType(string Description, IReadOnlyDictionary<string, IReadOnlyList<string>> Accept);
-
 internal class BrowserStorageProvider : IStorageProvider
 {
     internal const string PickerCancelMessage = "The user aborted a request";
     internal const string NoPermissionsMessage = "Permissions denied";
 
     public bool CanOpen => true;
-    public bool CanSave => StorageHelper.HasNativeFilePicker();
+    public bool CanSave => true;
     public bool CanPickFolder => true;
 
+    private bool PreferPolyfill =>
+        AvaloniaLocator.Current.GetService<BrowserPlatformOptions>()?.PreferFileDialogPolyfill ?? false;
+    
     public async Task<IReadOnlyList<IStorageFile>> OpenFilePickerAsync(FilePickerOpenOptions options)
     {
         await AvaloniaModule.ImportStorage();
@@ -29,7 +31,7 @@ internal class BrowserStorageProvider : IStorageProvider
 
         try
         {
-            using var items = await StorageHelper.OpenFileDialog(startIn, options.AllowMultiple, types, excludeAll);
+            using var items = await StorageHelper.OpenFileDialog(startIn, options.AllowMultiple, types, excludeAll, PreferPolyfill);
             if (items is null)
             {
                 return Array.Empty<IStorageFile>();
@@ -63,7 +65,9 @@ internal class BrowserStorageProvider : IStorageProvider
 
         try
         {
-            var item = await StorageHelper.SaveFileDialog(startIn, options.SuggestedFileName, types, excludeAll);
+            var suggestedName =
+                StorageProviderHelpers.NameWithExtension(options.SuggestedFileName, options.DefaultExtension, null);
+            var item = await StorageHelper.SaveFileDialog(startIn, suggestedName, types, excludeAll, PreferPolyfill);
             return item is not null ? new JSStorageFile(item) : null;
         }
         catch (JSException ex) when (ex.Message.Contains(PickerCancelMessage, StringComparison.Ordinal))
@@ -89,7 +93,7 @@ internal class BrowserStorageProvider : IStorageProvider
 
         try
         {
-            var item = await StorageHelper.SelectFolderDialog(startIn);
+            var item = await StorageHelper.SelectFolderDialog(startIn, PreferPolyfill);
             return item is not null ? new[] { new JSStorageFolder(item) } : Array.Empty<IStorageFolder>();
         }
         catch (JSException ex) when (ex.Message.Contains(PickerCancelMessage, StringComparison.Ordinal))

src/Browser/Avalonia.Browser/WindowingPlatform.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Threading;
+using Avalonia.Browser.Interop;
 using Avalonia.Browser.Skia;
 using Avalonia.Input;
 using Avalonia.Input.Platform;
@@ -46,6 +47,13 @@ namespace Avalonia.Browser
                 .Bind<IPlatformGraphics>().ToConstant(new BrowserSkiaGraphics())
                 .Bind<IPlatformIconLoader>().ToSingleton<IconLoaderStub>()
                 .Bind<PlatformHotkeyConfiguration>().ToSingleton<PlatformHotkeyConfiguration>();
+
+            if (AvaloniaLocator.Current.GetService<BrowserPlatformOptions>() is { } options
+                && options.RegisterAvaloniaServiceWorker)
+            {
+                var swPath = AvaloniaModule.ResolveServiceWorkerPath();
+                AvaloniaModule.RegisterServiceWorker(swPath, options.AvaloniaServiceWorkerScope);
+            }
         }
 
         public IDisposable StartTimer(DispatcherPriority priority, TimeSpan interval, Action tick)

src/Browser/Avalonia.Browser/webapp/build.js

@@ -1,7 +1,8 @@
 require("esbuild").build({
     entryPoints: [
         "./modules/avalonia.ts",
-        "./modules/storage.ts"
+        "./modules/storage.ts",
+        "./modules/sw.ts"
     ],
     outdir: "../wwwroot",
     bundle: true,

src/Browser/Avalonia.Browser/webapp/modules/avalonia.ts

@@ -7,6 +7,12 @@ import { NativeControlHost } from "./avalonia/nativeControlHost";
 import { NavigationHelper } from "./avalonia/navigationHelper";
 import { GeneralHelpers } from "./avalonia/generalHelpers";
 
+async function registerServiceWorker(path: string, scope: string | undefined) {
+    if ("serviceWorker" in navigator) {
+        await globalThis.navigator.serviceWorker.register(path, scope ? { scope } : undefined);
+    }
+}
+
 export {
     Caniuse,
     Canvas,
@@ -17,5 +23,6 @@ export {
     StreamHelper,
     NativeControlHost,
     NavigationHelper,
-    GeneralHelpers
+    GeneralHelpers,
+    registerServiceWorker
 };

src/Browser/Avalonia.Browser/webapp/modules/avalonia/stream.ts

@@ -18,12 +18,7 @@ export class StreamHelper {
         const array = new Uint8Array(span.byteLength);
         span.copyTo(array);
 
-        const data = {
+        return await stream.write(array);
-            type: "write",
-            data: array
-        };
-
-        return await stream.write(data);
     }
 
     public static byteLength(stream: Blob) {

src/Browser/Avalonia.Browser/webapp/modules/storage/storageProvider.ts

@@ -1,6 +1,6 @@
 import { avaloniaDb, fileBookmarksStore } from "./indexedDb";
 import { StorageItem, StorageItems } from "./storageItem";
-import { showOpenFilePicker, showDirectoryPicker, FileSystemFileHandle } from "native-file-system-adapter";
+import { showOpenFilePicker, showDirectoryPicker, showSaveFilePicker, FileSystemFileHandle } from "native-file-system-adapter";
 
 declare global {
     type WellKnownDirectory = "desktop" | "documents" | "downloads" | "music" | "pictures" | "videos";
@@ -12,10 +12,12 @@ declare global {
 
 export class StorageProvider {
     public static async selectFolderDialog(
-        startIn: StorageItem | null): Promise<StorageItem> {
+        startIn: StorageItem | null,
+        preferPolyfill: boolean): Promise<StorageItem> {
         // 'Picker' API doesn't accept "null" as a parameter, so it should be set to undefined.
         const options = {
-            startIn: (startIn?.wellKnownType ?? startIn?.handle ?? undefined)
+            startIn: (startIn?.wellKnownType ?? startIn?.handle ?? undefined),
+            _preferPolyfill: preferPolyfill
         };
 
         const handle = await showDirectoryPicker(options as any);
@@ -24,12 +26,14 @@ export class StorageProvider {
 
     public static async openFileDialog(
         startIn: StorageItem | null, multiple: boolean,
-        types: FilePickerAcceptType[] | null, excludeAcceptAllOption: boolean): Promise<StorageItems> {
+        types: FilePickerAcceptType[] | null, excludeAcceptAllOption: boolean,
+        preferPolyfill: boolean): Promise<StorageItems> {
         const options = {
             startIn: (startIn?.wellKnownType ?? startIn?.handle ?? undefined),
             multiple,
             excludeAcceptAllOption,
-            types: (types ?? undefined)
+            types: (types ?? undefined),
+            _preferPolyfill: preferPolyfill
         };
 
         const handles = await showOpenFilePicker(options);
@@ -38,16 +42,17 @@ export class StorageProvider {
 
     public static async saveFileDialog(
         startIn: StorageItem | null, suggestedName: string | null,
-        types: FilePickerAcceptType[] | null, excludeAcceptAllOption: boolean): Promise<StorageItem> {
+        types: FilePickerAcceptType[] | null, excludeAcceptAllOption: boolean,
+        preferPolyfill: boolean): Promise<StorageItem> {
         const options = {
             startIn: (startIn?.wellKnownType ?? startIn?.handle ?? undefined),
             suggestedName: (suggestedName ?? undefined),
             excludeAcceptAllOption,
-            types: (types ?? undefined)
+            types: (types ?? undefined),
+            _preferPolyfill: preferPolyfill
         };
 
-        // Always prefer native save file picker, as polyfill solutions are not reliable.
+        const handle = await showSaveFilePicker(options);
-        const handle = await (globalThis as any).showSaveFilePicker(options);
         return StorageItem.createFromHandle(handle);
     }
 

src/Browser/Avalonia.Browser/webapp/modules/sw.ts

@@ -0,0 +1,78 @@
+const WRITE = 0;
+const PULL = 0;
+const ERROR = 1;
+const ABORT = 1;
+const CLOSE = 2;
+
+class MessagePortSource implements UnderlyingSource {
+    private controller?: ReadableStreamController<any>;
+
+    constructor (private readonly port: MessagePort) {
+        this.port.onmessage = evt => this.onMessage(evt.data);
+    }
+
+    start (controller: ReadableStreamController<any>) {
+        this.controller = controller;
+    }
+
+    cancel (reason: Error) {
+    // Firefox can notify a cancel event, chrome can't
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=638494
+        this.port.postMessage({ type: ERROR, reason: reason.message });
+        this.port.close();
+    }
+
+    onMessage (message: { type: number; chunk: Uint8Array; reason: any }) {
+    // enqueue() will call pull() if needed when there's no backpressure
+        if (!this.controller) {
+            return;
+        }
+        if (message.type === WRITE) {
+            this.controller.enqueue(message.chunk);
+            this.port.postMessage({ type: PULL });
+        }
+        if (message.type === ABORT) {
+            this.controller.error(message.reason);
+            this.port.close();
+        }
+        if (message.type === CLOSE) {
+            this.controller.close();
+            this.port.close();
+        }
+    }
+}
+
+self.addEventListener("install", () => {
+    (self as any).skipWaiting();
+});
+
+self.addEventListener("activate", event /* ExtendableEvent */ => {
+    (event as any).waitUntil((self as any).clients.claim());
+});
+
+const map = new Map();
+
+// This should be called once per download
+// Each event has a dataChannel that the data will be piped through
+globalThis.addEventListener("message", evt => {
+    const data = evt.data;
+    if (data.url && data.readablePort) {
+        data.rs = new ReadableStream(
+            new MessagePortSource(evt.data.readablePort),
+            new CountQueuingStrategy({ highWaterMark: 4 })
+        );
+        map.set(data.url, data);
+    }
+});
+
+globalThis.addEventListener("fetch", evt => {
+    const url = (evt as any).request.url;
+    const data = map.get(url);
+    if (!data) return null;
+    map.delete(url);
+    (evt as any).respondWith(new Response(data.rs, {
+        headers: data.headers
+    }));
+});
+
+export {};