166 lines
10 KiB
HTML
166 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Nativefier by jiahaog</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
|
|
</head>
|
|
<body>
|
|
<section class="page-header">
|
|
<h1 class="project-name">Nativefier</h1>
|
|
<h2 class="project-tagline">Wrap any web page natively without even thinking, across Windows, OSX and Linux</h2>
|
|
<a href="https://github.com/jiahaog/nativefier" class="btn">View on GitHub</a>
|
|
<a href="https://github.com/jiahaog/nativefier/zipball/master" class="btn">Download .zip</a>
|
|
<a href="https://github.com/jiahaog/nativefier/tarball/master" class="btn">Download .tar.gz</a>
|
|
</section>
|
|
|
|
<section class="main-content">
|
|
<h1>
|
|
<a id="nativefier" class="anchor" href="#nativefier" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Nativefier</h1>
|
|
|
|
<p><a href="https://travis-ci.org/jiahaog/nativefier"><img src="https://travis-ci.org/jiahaog/nativefier.svg?branch=development" alt="Build Status"></a>
|
|
<a href="https://codeclimate.com/github/jiahaog/nativefier"><img src="https://codeclimate.com/github/jiahaog/nativefier/badges/gpa.svg" alt="Code Climate"></a>
|
|
<a href="https://www.npmjs.com/package/nativefier"><img src="https://badge.fury.io/js/nativefier.svg" alt="npm version"></a></p>
|
|
|
|
<p><img src="https://raw.githubusercontent.com/jiahaog/nativefier/master/screenshots/Dock%20Screenshot.png" alt="Dock Screenshot"></p>
|
|
|
|
<p>You want to make a native wrapper for WhatsApp Web (or any web page).</p>
|
|
|
|
<div class="highlight highlight-source-shell"><pre>$ nativefier web.whatsapp.com</pre></div>
|
|
|
|
<p>You're done.</p>
|
|
|
|
<h2>
|
|
<a id="table-of-contents" class="anchor" href="#table-of-contents" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Table of Contents</h2>
|
|
|
|
<ul>
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li><a href="#usage">Usage</a></li>
|
|
<li><a href="#optional-dependencies">Optional Dependencies</a></li>
|
|
<li><a href="docs/api.md">API</a></li>
|
|
<li><a href="#how-it-works">How It Works</a></li>
|
|
<li><a href="docs/development.md">Development</a></li>
|
|
<li><a href="#license">License</a></li>
|
|
</ul>
|
|
|
|
<h2>
|
|
<a id="introduction" class="anchor" href="#introduction" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Introduction</h2>
|
|
|
|
<p>Nativefier is a command line tool that allows you to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by <a href="http://electron.atom.io">Electron</a> in an OS executable (<code>.app</code>, <code>.exe</code>, etc.) for use on Windows, OSX and Linux.</p>
|
|
|
|
<p>I did this because I was tired of having to <code>⌘-tab</code> or <code>alt-tab</code> to my browser and then search through the numerous open tabs when I was using <a href="http://messenger.com">Facebook Messenger</a> or <a href="http://web.whatsapp.com">Whatsapp Web</a>.</p>
|
|
|
|
<p>View the changelog <a href="https://github.com/jiahaog/nativefier/blob/master/History.md">here</a>.</p>
|
|
|
|
<p><a href="https://news.ycombinator.com/item?id=10930718">Relevant Hacker News Thread</a></p>
|
|
|
|
<h3>
|
|
<a id="features" class="anchor" href="#features" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Features</h3>
|
|
|
|
<ul>
|
|
<li>Automatically retrieves the correct icon and app name</li>
|
|
<li>Flash Support (Needs Testing)</li>
|
|
<li>Javascript and CSS injection</li>
|
|
</ul>
|
|
|
|
<h2>
|
|
<a id="installation" class="anchor" href="#installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installation</h2>
|
|
|
|
<p>With <a href="https://nodejs.org/">Node.js</a> <code>>=0.12</code> installed,</p>
|
|
|
|
<div class="highlight highlight-source-shell"><pre><span class="pl-c"># for use from the command line</span>
|
|
$ npm install nativefier -g</pre></div>
|
|
|
|
<p>See <a href="#optional-dependencies">optional dependencies</a> for more.</p>
|
|
|
|
<h2>
|
|
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage</h2>
|
|
|
|
<p>Creating a native desktop app for <a href="http://medium.com">medium.com</a>:</p>
|
|
|
|
<div class="highlight highlight-source-shell"><pre>$ nativefier <span class="pl-s"><span class="pl-pds">"</span>http://medium.com<span class="pl-pds">"</span></span></pre></div>
|
|
|
|
<p>Nativefier will intelligently attempt to determine the app name, your OS and processor architecture, among other options. If desired, the app name or other options can be overwritten by specifying the <code>--name "Medium"</code> as part of the command line options, as such.</p>
|
|
|
|
<div class="highlight highlight-source-shell"><pre>$ nativefier --name <span class="pl-s"><span class="pl-pds">"</span>Some Awesome App<span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">"</span>http://medium.com<span class="pl-pds">"</span></span></pre></div>
|
|
|
|
<p>Read the <a href="docs/api.md">API documentation</a> for other command line flags and options that can be used to configure the packaged app.</p>
|
|
|
|
<p>If you would like high resoulution icons to be used, please contribute to the <a href="https://github.com/jiahaog/nativefier-icons">icon repository</a>!</p>
|
|
|
|
<p><strong>For Windows Users:</strong> Take note that the application menu is automatically hidden by default, you can press <code>alt</code> on your keyboard to access it.</p>
|
|
|
|
<p><strong>For Linux Users:</strong> Do not put spaces if you define the app name yourself with <code>--name</code>, as this will cause problems (tested on Ubuntu 14.04) when pinning a packaged app to the launcher.</p>
|
|
|
|
<h2>
|
|
<a id="optional-dependencies" class="anchor" href="#optional-dependencies" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Optional Dependencies</h2>
|
|
|
|
<h3>
|
|
<a id="icons-for-windows-apps-from-non-windows-platforms" class="anchor" href="#icons-for-windows-apps-from-non-windows-platforms" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Icons for Windows Apps from non-Windows platforms</h3>
|
|
|
|
<p>You need <a href="https://www.winehq.org/">Wine</a> installed, make sure that <code>wine</code> is in your <code>$PATH</code>.</p>
|
|
|
|
<h3>
|
|
<a id="icon-conversion-for-osx" class="anchor" href="#icon-conversion-for-osx" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Icon Conversion for OSX</h3>
|
|
|
|
<p>To support conversion of a <code>.png</code> or <code>.ico</code> into a <code>.icns</code> for a packaged OSX app icon (currently only supported on OSX), you need the following dependencies.</p>
|
|
|
|
<h4>
|
|
<a id="iconutil" class="anchor" href="#iconutil" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="https://developer.apple.com/library/mac/documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Optimizing/Optimizing.html">iconutil</a>
|
|
</h4>
|
|
|
|
<p>You need <a href="https://developer.apple.com/xcode/">XCode</a> installed.</p>
|
|
|
|
<h4>
|
|
<a id="imagemagick" class="anchor" href="#imagemagick" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="http://www.imagemagick.org/script/index.php">imagemagick</a>
|
|
</h4>
|
|
|
|
<p>Make sure <code>convert</code> and <code>identify</code> are in your <code>$PATH</code>.</p>
|
|
|
|
<h3>
|
|
<a id="flash" class="anchor" href="#flash" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Flash</h3>
|
|
|
|
<h4>
|
|
<a id="google-chrome" class="anchor" href="#google-chrome" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="https://www.google.com/chrome/">Google Chrome</a>
|
|
</h4>
|
|
|
|
<p>Google Chrome is required for flash to be supported. Alternatively, you could download the PepperFlash Chrome plugin and specify the path to it directly with the <code>--flash</code> flag. See the command line options below for more details.</p>
|
|
|
|
<h2>
|
|
<a id="how-it-works" class="anchor" href="#how-it-works" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>How It Works</h2>
|
|
|
|
<p>A template app with the appropriate event listeners and callbacks set up is included in the <code>./app</code> folder. When the <code>nativefier</code> command is executed, this folder is copied to a temporary directory with the appropriate parameters in a configuration file, and is packaged into an app with <a href="https://github.com/electron-userland/electron-packager">Electron Packager</a>.</p>
|
|
|
|
<p>In addition, I built <a href="https://github.com/jiahaog/gitcloud">GitCloud</a> to use GitHub as an icon index, and also the <a href="https://github.com/jiahaog/page-icon">pageIcon</a> fallback to infer a relevant icon from a url.</p>
|
|
|
|
<h2>
|
|
<a id="api-documentation" class="anchor" href="#api-documentation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>API Documentation</h2>
|
|
|
|
<p>See <a href="docs/api.md">API</a></p>
|
|
|
|
<h2>
|
|
<a id="development" class="anchor" href="#development" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Development</h2>
|
|
|
|
<p>See <a href="docs/development.md">Development</a></p>
|
|
|
|
<h2>
|
|
<a id="license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h2>
|
|
|
|
<p><a href="LICENSE.md">MIT</a></p>
|
|
|
|
<footer class="site-footer">
|
|
<span class="site-footer-owner"><a href="https://github.com/jiahaog/nativefier">Nativefier</a> is maintained by <a href="https://github.com/jiahaog">jiahaog</a>.</span>
|
|
|
|
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
|
|
</footer>
|
|
|
|
</section>
|
|
|
|
|
|
</body>
|
|
</html>
|