Turning web content into a Linux App..

I was wondering today what I could use to take a 24hr streaming service from something like youtube and have just the stream, not the YouTube bit run as a native Linux Application.

# Disclaimer

Remember this is my journey, i've written this as a guide for myself and it might help others. If your setup isn't the same or you break your system because you just copied and pasted things without understanding what you are doing. Welcome to Linux.

This is not a personal afront against your beliefs. I'm open to opinion and grown up discussion, but cannot be bothered with trolls.

Also I know I can't spell and my grammar is terrible, you don't need to tell me.

# Please NOTE

I do not work for, am affliated with, or make any money from Nativefier

Seems the de facto way for doing this is Electron, however, I come from the sysadmin/there must be a tool to make that easier school of thought. I

A quick Google showed there are various methods of doing this and the one which seemed the easiest to get working was Nativefier

jiahaog/nativefier

Make any web page a desktop application. Contribute to jiahaog/nativefier development by creating an account on GitHub.

GitHubjiahaog

It's an NPM based application which will turn a URL into a Native platform App.

Under OpenSuse the install of NPM is

sudo zypper in npm

to install Nativefier the command line format is

nativefier -p <platform "linux"> -a < Architecture "x64"> <URL>

So to Turn Youtube.com into a native app you'd run

nativefier -p linux -a x64 https://youtube.com

Running this will create an Electron App which opens to the youtube front page.

My requirement was to have an app that ran twit.tv's Livescream off Youtube So I ended up finding the Embed code of the Livestream Video

Then ran as root

 nativefier -p linux -a x64 https://www.youtube.com/embed/rXNigcDdTz8 --tray

The --tray icon puts a systray icon to Quit and Hide the Electron Application

This started packaging

packaging [==============================                    ] 60%Packaging app for platform linux x64 using electron v5.0.13

Once completed there was a folder in my home directory

TWiTLive-YouTube-linux-x64/

cd TWiTLive-YouTube-linux-x64/

and running (not as root)

./TWiTLive-YouTube

Resulted in this app

And this in the Systray

So Nativefier does a really good job of also identfying the right systray icon too.

The help content lists some interesting values

Usage: nativefier [options] <targetUrl> [dest]

Options:
-v, --version output the version number
-n, --name app name
-p, --platform 'osx', 'mas', 'linux' or 'windows'
-a, --arch 'ia32' or 'x64' or 'armv7l'
--app-version The release version of the application. Maps to the ProductVersion metadata property on Windows, and CFBundleShortVersionString on OS X.
--build-version The build version of the application. Maps to the FileVersion metadata property on Windows, and CFBundleVersion on OS X.
--app-copyright The human-readable copyright line for the app. Maps to the LegalCopyright metadata property on Windows, and NSHumanReadableCopyright on OS X
--win32metadata a JSON string of key/value pairs of application metadata (ProductName, InternalName, FileDescription) to embed into the executable (Windows only).
-e, --electron-version electron version to package, without the 'v', see https://github.com/electron/electron/releases
--no-overwrite do not override output directory if it already exists, defaults to false
-c, --conceal packages the source code within your app into an archive, defaults to false, see https://electronjs.org/docs/tutorial/application-packaging
--counter if the target app should use a persistent counter badge in the dock (macOS only), defaults to false
--bounce if the the dock icon should bounce when counter increases (macOS only), defaults to false
-i, --icon the icon file to use as the icon for the app (should be a .png)
--width set window default width, defaults to 1280px
--height set window default height, defaults to 800px
--min-width set window minimum width, defaults to 0px
--min-height set window minimum height, defaults to 0px
--max-width set window maximum width, default is no limit
--max-height set window maximum height, default is no limit
--x set window x location
--y set window y location
-m, --show-menu-bar set menu bar visible, defaults to false
-f, --fast-quit quit app after window close (macOS only), defaults to false
-u, --user-agent set the user agent string for the app
--honest prevent the nativefied app from changing the user agent string to masquerade as a regular chrome browser
--ignore-certificate ignore certificate related errors
--disable-gpu disable hardware acceleration
--ignore-gpu-blacklist allow WebGl apps to work on non supported graphics cards
--enable-es3-apis force activation of WebGl 2.0
--insecure enable loading of insecure content, defaults to false
--flash if flash should be enabled
--flash-path path to Chrome flash plugin, find it in Chrome://plugins
--disk-cache-size forces the maximum disk space (in bytes) to be used by the disk cache
--inject path to a CSS/JS file to be injected (default: [])
--full-screen if the app should always be started in full screen
--maximize if the app should always be started maximized
--hide-window-frame disable window frame and controls
--verbose if verbose logs should be displayed
--disable-context-menu disable the context menu
--disable-dev-tools disable developer tools
--zoom default zoom factor to use when the app is opened, defaults to 1.0
--internal-urls regular expression of URLs to consider "internal"; all other URLs will be opened in an external browser. (default: URLs on same second-level domain as app)
--proxy-rules proxy rules. See https://electronjs.org/docs/api/session?q=proxy#sessetproxyconfig-callback
--crash-reporter remote server URL to send crash reports
--single-instance allow only a single instance of the application
--clear-cache prevent the application from preserving cache between launches
--processEnvs a JSON string of key/value pairs to be set as environment variables before any browser windows are opened.
--file-download-options a JSON string of key/value pairs to be set as file download options. See https://github.com/sindresorhus/electron-dl for available options.
--tray [start-in-tray] Allow app to stay in system tray. If 'start-in-tray' is given as argument, don't show main window on first start
--basic-auth-username basic http(s) auth username
--basic-auth-password basic http(s) auth password
--always-on-top enable always on top window
--title-bar-style (macOS only) set title bar style ('hidden', 'hiddenInset'). Consider injecting custom CSS (via --inject) for better integration.
--global-shortcuts JSON file with global shortcut configuration. See https://github.com/jiahaog/nativefier/blob/master/docs/api.md#global-shortcuts
--browserwindow-options a JSON string that will be sent directly into electron BrowserWindow options. See https://github.com/jiahaog/nativefier/blob/master/docs/api.md#browserwindow-options
--background-color Sets the background color (for seamless experience while the app is loading). Example value: '#2e2c29'
--darwin-dark-mode-support (macOS only) enable Dark Mode support on macOS 10.14+
-h, --help output usage information

Its quite useful it has a lot of these, as one website I was using stated, if we take a site like OneNote which doesn't have a native Linux Application and just ran

nativefier onenote.com

This creates a problem, as the site explains

While the program picks up all the relevant data, it doesn’t keep  your main browser’s passwords and cached login credentials. Therefore,  you’ll need to log in.

Oops. Clicking the sign in button takes you to another Microsoft web  site and that causes the program to open that in your regular browser.  Logging in there doesn’t help you any.

Due to the expansive options of Nativefier we can however run a command like

nativefier onenote.com --internal-urls ".*(\\.office\\.com)|(\\.onenote\.com)|(go\\.microsoft\\.com)|(\\.live\\.com).*"

Which essentially says

if the URL ends in .office.com, .onenote.com, or .live.com, it is internal. It also catches go.microsoft.com.

Thoughts

I can see by my intital google search there are plenty of ways to do what I wanted to, PWA's in Google etc. The Nativefier was a very quick easy "lazy mans" method of giving me a quick and dirty Icon within a Native app to watch some Live streamed content in a window..

I'm also accutely aware that that URL is subject to change, and will work round that.

Next Steps

I'm going to expand on this over the next few days to see if i can use OpenSuse's tools to create an RPM of my Electron app and use that to install off my own repository using Sonotype Nexus3

Useful URL's

jiahaog/nativefier

Make any web page a desktop application. Contribute to jiahaog/nativefier development by creating an account on GitHub.

GitHubjiahaog