javascripthtml.net-corescript-tag

What does this specific script tag do? What is the app:// protocol?

I'm working with a new Open Source library / framework named Photino (cross-platform desktop apps built with HTML5 frontend and .NET core). Github repo is here.

HTML As User Interface

When a Photino application starts, it loads an HTML page which becomes the desktop app's User Interface.

Template Projects

The Photino project provides template projects and the basic one (built with command $ dotnet new photinoapp -o <projname>) contains a index.html page that contains the following script tag:

<script src="app://dynamic.js"></script>

What I've Tried From everything I can tell the project doesn't use this anywhere.

  1. Searched through source code of entire project.
  2. Read all Photino documentation.
  3. Searched web extensively

However, I cannot find any reference to :

  1. the app:// protocol
  2. dynamic.js
  3. anything explaining what this might be

I'm assuming it can just be removed from the project, but I'm curious about what the project template creators might have intended. Have you ever seen this before? Do you know what it is used for?

Solution

  • The app is being used as a key to set up a protocol handler to your application.

    From that linked document:

    A protocol handler is an application that knows how to handle particular types of links: for example, a mail client is a protocol handler for "mailto:" links.

    The photino.NET sample program.cs has below statement.

    var window = new PhotinoWindow()
    .SetTitle(windowTitle)
    // More statements here left out for brevity
    .RegisterCustomSchemeHandler(
        "app", (object sender, string scheme, string url, out string contentType) =>
    {
        contentType = "text/javascript";
        return new MemoryStream(Encoding.UTF8.GetBytes(@"
            (() =>{
                window.setTimeout(() => {
                    alert(`🎉 Dynamically inserted JavaScript.`);
                }, 1000);
            })();
        "));
    })

    It is the RegisterCustomSchemeHandler that registers the protocol handler using that app key.
    It sets up a callback function that will be called when given app key gets found in a page that is being loaded.

    The source code of RegisterCustomSchemeHandler mentions:

    Registers user-defined custom schemes (other than 'http', 'https' and 'file') and handler methods to receive callbacks when the native browser control encounters them.

    The index.html from that sample has below script tag.

    <script src="app://dynamic.js"></script>

    This triggers the callback, which returns the client side script that you want to get executed for given script tag.

    For above example the url argument in (object sender, string scheme, string url, out string contentType) will contain app://dynamic.js.

    The provided sample ignores the incoming value and just returns a constant/hard-coded script, but you might decide upon returning the content of a file that matches given url.

    That part after app:// in a script tag can be any string value of your choice that might be meaningful for your application.