
Show HN: Nativefier – Wrap any web page natively - skewedlines
https://github.com/jiahaog/nativefier
======
katabasis
This is amazing. I work in digital publishing at an art museum, and we are
creating digital books as static HTML/CSS/JS files which rely on client-side
interactivity for most features.

Some people have asked about getting a desktop version of these books which
they could download locally (scholars doing fieldwork, etc). I knew something
like this was possible using Electron, but I figured I'd have to build it from
scratch if I wanted it.

Instead I just pointed this script at the beta version of our latest
project[1] and the project built flawlessly in under a minute.

Nice work! I know that the web as a platform has its problems, but it is the
only truly universal runtime we have right now, and tools like this help
realize this potential more fully.

One question: is there a way to package pre-built copies as .dmg or .exe files
so that non-technical users can download an app that is ready to go, without
having to run the build script themselves?

[1]:
[http://gettypubs.github.io/Terracottas/](http://gettypubs.github.io/Terracottas/)

~~~
skewedlines
I'm glad you like it! I think such an installer feature could be added in by
integrating with [https://github.com/loopline-systems/electron-
builder](https://github.com/loopline-systems/electron-builder), I'll see if I
have time in the next few days to add this in before school starts.

------
rcthompson
Hey, cool, it opens external links in my default browser. That's all I've ever
wanted in a web-page-to-app tool. It's surprising no one has gotten this right
before. Both Mozilla's Prism and Chrome's webbapp-izer functionality get this
wrong.

Edit: It doesn't support HTTP authentication, though. Any page that is
supposed to present an HTTP auth dialog just goes straight to a 401. This
means I can't wrap my personal Transmission/Syncthing servers using
nativefier. Edit 2: Looks like this will be fixed soon[1].

[1]
[https://github.com/jiahaog/nativefier/issues/19](https://github.com/jiahaog/nativefier/issues/19)

------
mxuribe
I had originally mis-read this: I read it as a super-simple wrapper that
converts web pages/apps into a native _mobile_ app. But it seems it actually
creates a _desktop_ application. I understand the use-case: avoiding bouncing
between web browser tabs, but I guess I don't see that as annoying enough. I'm
sure there are other use-cases that I'm not thinking of.

~~~
Kiro
> I read it as a super-simple wrapper that converts web pages/apps into a
> native mobile app.

I would love that. Just one command and you're done.

~~~
czechdeveloper
I'm sure I've seen something like that. But I can't remember the name. Maybe
someone else?

~~~
ParadoxOryx
I've seen this on HN before -
[https://github.com/mess110/glassic](https://github.com/mess110/glassic)

------
c17r
There's also Fluid ([http://fluidapp.com](http://fluidapp.com)) of which I've
been a happy user for years.

~~~
bigethan
I'm a big fan of fluid as well. But it's always annoyed me because it's a
older version of safari. Electron uses Chrome!

~~~
mwcampbell
How can Fluid be using an old version of Safari? Does it bundle its own build
of WebKit? Or are all Mac apps that use the public WebKit framework using an
older version of WebKit than Safari itself?

------
woodruffw
I'm not convinced that this process qualifies as making a web page "native".
After all, this just seems to spawn a new browser instance with some UI
stripped away. None of the normal qualities of native applications (native
performance, hardware access, exposure to system interfaces/toolkits) apply.

~~~
ashark
I'd say if your GUI layer is based on the HTML DOM then you're certainly not
"native", for any useful definition of "native". Except maybe on ChromeOS, I
suppose.

------
_droptable_
Honest question: Are Chrome apps "File->Create Application Shortcuts" not
available on Mac OS X?

Because on Linux you can create such apps very easily with this Chrome
feature, and I'm pretty sure even cookies/history is separate from the main
Chrome instance.

Or is this better/different in some way?

~~~
websirnik
Not available on Mac OS X

~~~
est
make it available:

chrome --app=[http://google.com](http://google.com)

------
mikewhy
I tried doing the same thing using Electron. CPU usage isn't ideal, context
menus wouldn't work, keyboard focus was an issue. Eventually I dropped it and
have been using MacPin[1] for a while. There is also WebShell[2]

[1]: [https://github.com/kfix/MacPin](https://github.com/kfix/MacPin) [2]:
[https://github.com/djyde/WebShell](https://github.com/djyde/WebShell)

~~~
vmateixeira
I believe this uses Electron under the hood.

~~~
mikewhy
It does, therefore:

\- CPU usage is much higher than something using WKWebView

\- OS Back/Forward shortcuts don't work

\- No context menus

\- CMD+Click opens in your regular browser

Which makes it a no-go for me, but YMMV.

------
nixy
I just tried it, skeptical that it would be _that_ easy. Well, one command to
install and one to build. Worked exactly as I advertised. Nice!

------
Gys
So instead of having one browser with ten tabs you can create ten different
'browser apps'. Ok....

~~~
mosburger
I use Fluid ([http://fluidapp.com](http://fluidapp.com)) for a similar purpose
as Nativfier... it's because my brain is hard-wired from years of use to
equate Cmd-Tab (or Alt-Tab) with "task switch." My brain thinks of e-mail as a
separate thing from my work (editor and browser), and I personally don't like
conflating my browser with different tasks like e-mail.

I know I could just learn Ctrl-Tab or Alt-{ or whatever to cycle through
dozens of tabs, but Cmd-Tab works for me. Different strokes for different
folks.

I'll probably check Nativfier out because Fluid hasn't been updated
significantly in a while and uses an old renderer, and it's a bit laggy w/
HuBoard (the front-end to GitHub issues that we use at work - it's pretty JS-
intensive)

------
lucaspiller
Google Maps, like most web apps, incorrectly determines my language based on
IP address. I can't find a way to change it from the UI, but you can force it
to English with this:

    
    
        nativefier "http://maps.google.com/?hl=en"

~~~
vidarh
If you use Chrome, and are _not_ logged in to a Google account, Google Maps
respects the Chrome language setting (just tested). Go to settings, "Show
advanced settings" at the bottom and search for "Languages".

If you _are_ logged in to a Google account, the language settings on your
Google account takes preference.

~~~
lucaspiller
That isn't the case for me. I have my OS and Chrome set to English [0], but
when, in Incognito mode, I go to
[http://maps.google.com/](http://maps.google.com/) it redirects me to
[https://www.google.it/maps/](https://www.google.it/maps/) and displays
everything in Italian (I'm in Italy at the moment).

[0]
[http://headers.cloxy.net/request.php](http://headers.cloxy.net/request.php)
says my browser is sending "Accept-Language: en-US,en;q=0.8"

------
nik736
That's really nice actually. I couldn't try it out but if it works I think
it's really cool. I just don't know what to think about my Apps being more and
more simply websites instead of Native.

------
anc84
What does native even mean here? It is just making a standalone browser that
will only talk to the website and whatever resources it references or somehow
make it all work locally, natively?

~~~
skewedlines
Yeap, it's just an easy way to create a browser that only talks to one website
in a separate and isolated environment from your default browser.

------
erlend_sh
So cool! Any chance it could work as a web app? The install process seems
fairly simply, but it's still command line.

Could be a really good adoption trick if you make a web app that:

1\. Lets me enter the basic info for a site I'd like to appify, e.g.
app.moqups.com

2a. If successful, great, here's a download for your app (and the app is added
to your list of supported web apps).

2b. Not successful: We urge to to send an email to the app creators so they
can troubleshoot this issue together with us.

------
monkmartinez
This project and the projects I see linked in the comments thus far (MacPin,
WebShell) are AWESOME. I really wish Python had a better story here, but I
digress.

Also, these types of projects are puzzling at the same time. I have been under
the impression (right or wrong), that people didn't like/want/need desktop
apps. With these types of projects I wonder if people don't know that they
want desktop apps...

~~~
mwcampbell
> I really wish Python had a better story here, but I digress.

I know it's a digression, but I'm curious. What do you not like about
packaging of Python apps on desktop platforms?

~~~
monkmartinez
That they are not portable to the web and vice-versa in Python, first. Second,
I can not do justice... so I will give you a great blog post that sums my
thoughts nicely: [https://glyph.twistedmatrix.com/2015/09/software-you-can-
use...](https://glyph.twistedmatrix.com/2015/09/software-you-can-use.html)

------
joeyspn
Really useful! I actually started to build a similar utility as a side project
with NW.js, but I never finished it because of lack of time... You should also
add the ability to add chromium flags...

[https://discuss.atom.io/t/how-to-access-chrome-flags-in-
elec...](https://discuss.atom.io/t/how-to-access-chrome-flags-in-
electron/16470)

------
kazinator
Say what?

What am I missing by having a simple web link on a desktop to any frequently
accessed web page I want?

Launch it, and there I am, in Google Maps or whatever.

Does this natifier actually suck down some of the JavaScript so that it is
locally hosted? If so, is there some check if the upstream software has
changed and needs to be re-natified?

------
andersonmvd
I liked it. Reading Medium posts on your app was better than in a chrome
browser. Congratulations. Side note: on Ubuntu there is no icon when I open
the app. If it could get the favicon would be great, as well as the back
button rather than pressing backspace.

~~~
skewedlines
Actually, I originally intended this mainly to wrap single page web apps that
tend to avoid using the back button and instead providing their own
navigational controls on the page itself, so I did not include them in the UI.
However, if desired, these basic navigational controls (back, forward, reload
etc.) can be found in the application menu.

Thanks for the feedback about the icon issue, I'll take note of that!

------
antoniuschan99
I like this, but wish it would automatically convert to the correct icon (it's
defaulting to the electron icon).

I see that there are commands in the docs to do this, will try it in a bit :).
Thanks!

Just tried using this for Hacker News and noticed I can't go back :(.

~~~
skewedlines
Yeah, that was one of the main concerns I had when I was developing this, it
would be lovely if the app itself could automatically source and add them in
automatically. It's really a hassle to manually add teh images, but I'm not
really familiar with how to convert them into the appropriate format in
Node.js in a quick and easy way. Will look into this in a future update!

------
jbi
This could be great for office users who are mostly using desktop
applications. Acceptance for web apps is sometimes still hard to get.

However, I haven't seen anything electron-based with proxy support. Any ideas
on that?

------
dieg0
Looks great, thanks for this.

Wonder if the executable file will work in other systems. For example if I
create an app for google.com and move that app to another system, will it
work? given that is the same OS.

~~~
skewedlines
Yeap, you can specify different build options such as OS (osx, windows, linux)
and processor architecture and pass it to a friend, but the main idea is that
it simplifies the process for you and automatically detects your current
platform.

------
sanj
Very cool -- I wrapped my first app and it worked great.

Sadly, when I gave to copy to a less technical coworker (ie, without node.js
installed) and it open with a blank window.

Is that expected?

------
willmacdonald
Are cookies shared between different apps ? One of the nice features of Fluid
Pro was keeping cookies segregated.

~~~
skewedlines
Cookies are isolated to the app it is built for, and right now the application
name is the unique identifier for the app. You're right in that the
application data should be segregated, and I'll look into a more robust method
of uniquely identifying each app that is built.

------
mwcampbell
This trend of a hundred desktop applications all bundling their own copy of
Chromium really bothers me. I know the situation sucks on Windows, but on Mac,
why not use the system WebKit framework? I know the decision was made upstream
of this project, in Electron, but this project will increase the proliferation
of app-private copies of Chromium.

For the past year or so, when thinking about software bloat, I always come
back to this sad bit of dialog from the novel _Off to Be the Wizard_:

Phillip (time traveler from 1984): What on earth can a person do with 4
gigabytes of RAM?

Martin (from 2012): Upgrade it immediately.

Do we really want to make that situation even worse?

~~~
skewedlines
I do agree with you on that, and there should be some form of Chromium that
can be shared across applications to reduce the bloat of such packaged apps.
Perhaps this is an issue with the architecture of Electron itself, which
requires all such apps to contain their own version of Chromium?

I wanted easy cross platform compatibility with minimal code, and Electron
seemed like a good choice across for apps across Windows, OSX and Linux.

~~~
mwcampbell
On OS X, a little Cocoa application in Objective-C using the system WebKit
framework would probably do the trick.

On Linux, a little GTK application in C using WebKitGTK would probably work.

On Windows... I don't know. I know from firsthand that embedding the IE engine
via the WebBrowser ActiveX control really sucks. I'm going to see if the
WebKit WinCairo port is any good these days.

If we must use CHromium, then the Chromium Embedded Framework is worth a look.
It's a DLL, so in principle, it can be shared between applications. You'd
still need some platform-specific code to create the window containing CEF,
though.

~~~
monkmartinez
All these "little native applications" require lots of work. If I want to
share these "little applications" with people that do not share my OS, I am
forced to make at least 2 different versions of the "little application"...
then maintain them.

Good enough, is good enough. Yes, the web is not as performant as native...
the question becomes; is it good enough? The bonus in wrapping Chrome is that
I don't have to dive into 3 or more system level API's to get a "little
application" up and running.

------
ehosca
i'm probably missing something here but how about just saving a bookmark on
the desktop?

~~~
jstx
You are missing that saving a bookmark to the desktop does not provide a
different instance of the browser when spinning up. It will just open a tab in
the first browser it finds.

Which is horrible if you consider something to be a core piece of software and
you are unable to effectively cmd-tab to it. This is more of an OSX issue than
windows, since windows will happily alt-tab amongst browser windows. OSX uses
a less intuitive cmd-` for tabbing through program instances and still
requires that the webapp is running in it's own window, in the same OSX window
"Space", it cannot be minimized, and which will crash with the browser itself,
irrespective of which tab is truly responsible [taking all your current state
data with it].

I'm all for webapps supplanting native apps. But even presenting them as such
requires something like Electron, and is completely counter to the trend of
managing all tabs [webapps] as crony components of a master "WebBrowser"
process.

------
Fudgel
Does it support flash yet?

~~~
bjacobel
"Yet"? We should be moving away from Flash, not towards it.

------
siquick
Excellent work - well done

------
zubairq
Absolutely incredible!

