How Do I Turn An Opensilver Project Into A PWA (Electron, Simulator, etc.)

[TKTSWalker]

For the last 7 months, I developed an app on Opensilver which I plan to put in Steam as a standalone application. I built it as a WebAssembly project, but am not sure where to go from here.

If it weren't for the things on the Simulator exe (The UI saying to use .Browser), I could (and would) simply use that EXE for my app with a small script to run a local API I created.

Where should I go from here? Hoping to release before the end of November!

[jacob-l]

Hi @TKTSWalker

If you’d like to distribute your OpenSilver app as a standalone application (for example, on Steam), here are a few good options:

• MAUI Hybrid: Run your OpenSilver app inside a MAUI WebView for a fully native experience on Windows, macOS, Android, and iOS.
  👉 [MAUI Hybrid launcher docs](https://doc.opensilver.net/documentation/general/maui-hybrid-launcher.html)

• Photino: A lightweight, cross-platform alternative to Electron for creating a native desktop wrapper without the Node.js runtime.
  👉 [Photino launcher docs](https://doc.opensilver.net/documentation/general/photino-launcher.html)

• Electron: Package your OpenSilver app as static web files and use them inside an Electron window to build a standalone desktop executable.

• PWA: Convert your Blazor WebAssembly app into a Progressive Web App so users can install it directly from their browser.
  👉 [Microsoft guide](https://learn.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app/?view=aspnetcore-9.0&tabs=visual-studio#convert-an-existing-blazor-webassembly-app-into-a-pwa)

Each approach works well depending on your goals — MAUI and Photino for native integration, Electron for flexibility, and PWA for a simple installable web app.

Would love to see your app once it’s released — please share your Steam link when it’s live! 🚀

[TKTSWalker]

Thank you for your help! From the time you sent this, i've been able to get my app working as a PWA! However, i'm having another issue stopping me from release; when I make a Media Element (Let's say BGM), doing BGM.Volume = (double)0.5 doesn't work!

Is there any way around this error? I see the value changes but the volume itself is the same

[TKTSWalker]

Another thing; I am at the point where i'm about to build the project but I can't get the bottom bar to be my own favicon/logo! How would I fix this?

[TKTSWalker]

Figured out the second issue! For anyone seeing this in the future, it will put the proper favicon at the bottom when you build for release!

[avdynut]

Thank you for your help! From the time you sent this, i've been able to get my app working as a PWA! However, i'm having another issue stopping me from release; when I make a Media Element (Let's say BGM), doing BGM.Volume = (double)0.5 doesn't work!

Is there any way around this error? I see the value changes but the volume itself is the same

Hi @TKTSWalker, changing Volume is fixed: OpenSilver/OpenSilver@436c388
You can use latest OpenSilver preview package to test it (https://doc.opensilver.net/documentation/how-to-topics/get-latest-preview-version.html).
Please feel free to contribute to OpenSilver framework, thank you

[TKTSWalker]

Thank you for this 😭 "Why is the OpenSilver team so GOATED and underrated?"

Also working on a release!

https://store.steampowered.com/app/4098880/Database_Designer/

I have two other projects i'm developing to the side, hoping to share them! It's an AI resume thing and a visual novel engine built in OpenSilver!

[TKTSWalker]

Hello! Sorry for bothering you again; this time, i've been trying to make one of the apps for a related project transparent like a rainmeter! The idea is to make a custom top box for the window with the minimize and close options; I did the following for Photino

In index.html

<script src="libs/photino.js" onerror="alert('Error: photino.js failed to load!');"></script>

</body>

And in Program.cs

using OpenSilver.Photino;
using Photino.NET;

namespace Calendar.Photino
{
//NOTE: To hide the console window, go to the project properties and change the Output Type to Windows Application.
// Or edit the .csproj file and change the tag from "WinExe" to "Exe".
internal class Program
{
[STAThread]
static void Main(string[] args)
{
// Window title declared here for visibility
string windowTitle = "Calendar";

        // Creating a new PhotinoWindow instance with the fluent API
        var window = new PhotinoWindow()
            .SetTitle(windowTitle)
            .SetUseOsDefaultSize(false)

.SetWidth((int)Math.Round(1324 * 1.4))
.SetHeight((int)Math.Round(694 * 1.4))
.SetMaximized(false)
.Center() // Center window in the middle of the screen
.SetResizable(false)
.SetChromeless(true)
.SetTransparent(true)
.ConfigureOpenSilver() // Configure OpenSilver App
.Load("wwwroot/index.html"); // Can be used with relative path strings or "new URI()" instance to load a website.

        window.WaitForClose(); // Starts the application event loop
    }
}

}

How do I make it so that if a specific part of the UI within the window is dragged, the photino window itself is dragged?

Also is there a way to set width and height through MainPage.xaml.cs?

[avdynut]

You can create a service for moving and resizing a window. Add such service in Photino project and provide it to the main OpenSilver project, for example see calendar service: https://github.com/OpenSilver/ToDoCalendar/blob/master/ToDoCalendar/ToDoCalendar.Photino/Program.cs#L19

Something like this:

public interface IWindowService
{
    void Move(double deltaX, double deltaY);
    void Resize(double width, double height);
}

public class WindowService : IWindowService
{
    private readonly PhotinoWindow _window;
    private int _left = 0;
    private int _top = 0;

    public WindowService(PhotinoWindow window)
    {
        _window = window;
    }

    public void Move(double deltaX, double deltaY)
    {
        _left += (int)deltaX;
        _top += (int)deltaY;
        _window.SetLeft(_left);
        _window.SetTop(_top);
    }

    public void Resize(double width, double height)
    {
        _window.SetWidth((int)width);
        _window.SetHeight((int)height);
    }
}

In Program.cs add ServiceLocator.Initialize(new PhotinoServiceProvider(new WindowService(window)));

Then add a Thumb control in xaml <Thumb Width="20" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" DragDelta="Thumb_DragDelta"/>
And move on dragging

        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            if (ServiceLocator.Provider.GetRequiredService<IWindowService>() is IWindowService windowService)
            {
                windowService.Move(e.HorizontalChange, e.VerticalChange);
            }
        }

[TKTSWalker]

Thank you for your help and i'm sorry for asking for so much 😭!

For my final request, i'm hoping to allow for items in a placement grid to be placed (Similar to a menu in Resident Evil for example)! This has been one of my biggest challenges I have little idea on how to implement! Would you have any tips and suggestions?

Thank you so much again!

[avdynut]

Can you explain what you want to create? Like drag-n-drop items into a grid?

[TKTSWalker]

Pretty much!

[avdynut]

Probably PanelDragDropTarget could help or a custom drop target. Check the examples of drop targets in Silverlight Toolkit Samples: https://sl-toolkit-samples.azurewebsites.net/?20240429