Go to file
Ronan Jouchet c9ee6667d4
Revamp and move to TypeScript (#898)
## Breaking changes

- Require **Node >= 8.10.0 and npm 5.6.0**
- Move to **Electron 8.1.1**.
- That's it. Lots of care went into breaking CLI & programmatic behavior
  as little as possible. **Please report regressions**.
- Known issue: build may fail behind a proxy. Get in touch if you use one:
  https://github.com/jiahaog/nativefier/issues/907#issuecomment-596144768

## Changes summary

Nativefier didn't get much love recently, to the point that it's
becoming hard to run on recent Node, due to old dependencies.
Also, some past practices now seem weird, as better expressible
by modern JS/TS, discouraging contributions including mine.

Addressing this, and one thing leading to another, came a
bigger-than-expected revamp, aiming at making Nativefier more
**lean, stable, future-proof, user-friendly and dev-friendly**,
while **not changing the CLI/programmatic interfaces**. Highlights:

- **Require Node>=8**, as imposed by many of our dependencies. Node 8
  is twice LTS, and easily available even in conservative Linux distros.
  No reason not to demand it.
- **Default to Electron 8**.
- **Bump** all dependencies to latest version, including electron-packager.
- **Move to TS**. TS is great. As of today, I see no reason not to use it,
  and fight interface bugs at runtime rather than at compile time.
  With that, get rid of everything Babel/Webpack.
- **Move away from Gulp**. Gulp's selling point is perf via streaming,
  but for small builds like Nativefier, npm tasks are plenty good
  and less dependency bloat. Gulp was the driver for this PR: broken
  on Node 12, and I didn't feel like just upgrading and keeping it.
- Add tons of **verbose logs** everywhere it makes sense, to have a
  fine & clear trace of the program flow. This will be helpful to
  debug user-reported issues, and already helped me fix a few bugs.
    - With better simple logging, get rid of the quirky and buggy
      progress bar based on package `progress`. Nice logging (minimal
      by default, the verbose logging mentioned above is only used
      when passing `--verbose`) is better and one less dependency.
- **Dump `async` package**, a relic from old callback-hell early Node.
  Also dump a few other micro-packages unnecessary now.
- A first pass of code **cleanup** thanks to modern JS/TS features:
  fixes, simplifications, jsdoc type annotations to types, etc.
- **Remove GitHub integrations Hound & CodeClimate**, which are more
  exotic than good'ol'linters, and whose signal-to-noise ratio is too low.
- Quality: **Add tests** and add **Windows + macOS CI builds**.
  Also, add a **manual test script**, helping to quickly verify the
  hard-to-programatically-test stuff before releases, and limit regressions.
- **Fix a very small number of existing bugs**. The goal of this PR was
  *not* to fix bugs, but to get Nativefier in better shape to do so.
  Bugfixes will come later. Still, these got addressed:
  - Add common `Alt`+`Left`/`Right` for previous/next navigation.
  - Improve #379: fix zoom with `Ctrl` + numpad `+`/`-`
  - Fix pinch-to-zoom (see https://github.com/jiahaog/nativefier/issues/379#issuecomment-598612128 )
2020-03-15 16:50:01 -04:00
.github Issue templates: nits 2020-03-10 09:19:02 -04:00
app Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
docs Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
icon-scripts Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
src Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
test-resources Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
.dockerignore Run Nativefier with Docker (#311) 2017-05-19 21:21:16 +08:00
.editorconfig Integrate prettier 2018-05-24 00:02:44 -07:00
.eslintignore Use original eslint module for linting instead of gulp 2016-05-27 02:23:37 +08:00
.eslintrc.js Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
.gitignore Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
.npmignore Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
.npmrc Upgrade dependencies and default to latest Electron 1.7.9 (PR #483) 2017-11-14 08:05:01 -05:00
.prettierrc.yaml Integrate prettier 2018-05-24 00:02:44 -07:00
.travis.yml Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
CHANGELOG.md Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
Dockerfile Fix #461 & address #375 in Docker: move Dockerfile to Debian and use wine32 (#488) 2017-11-24 10:28:59 -05:00
LICENSE.md Split docs into multiple files 2016-03-13 15:27:32 +08:00
README.md Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
package.json Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00
tsconfig.json Revamp and move to TypeScript (#898) 2020-03-15 16:50:01 -04:00

README.md

Nativefier

Build Status npm version

Dock

You want to make a native wrapper for WhatsApp Web (or any web page).

nativefier web.whatsapp.com

Walkthrough animation

You're done.

Table of Contents

Introduction

Nativefier is a command-line tool to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, macOS and Linux.

I did this because I was tired of having to ⌘-tab or alt-tab to my browser and then search through the numerous open tabs when I was using Facebook Messenger or Whatsapp Web (relevant Hacker News thread).

Changelog. Developer docs.

Features:

  • Automatically retrieves the correct icon and app name.
  • JavaScript and CSS injection.
  • Many more, see the API docs or nativefier --help

Installation

  • macOS 10.9+ / Windows / Linux
  • Node.js >=8
  • Optional dependencies:
    • ImageMagick to convert icons. Make sure convert and identify are in your $PATH.
    • Wine to package Windows apps under non-Windows platforms. Make sure wine is in your $PATH.
npm install nativefier -g

Usage

Creating a native desktop app for medium.com:

nativefier "medium.com"

Nativefier will 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 --name "Medium" as part of the command line options:

nativefier --name "Some Awesome App" "medium.com"

Read the API documentation (or nativefier --help) for other command-line flags that can be used to configure the packaged app.

To have high-resolution icons used by default for an app/domain, please contribute to the icon repository!

Note that the application menu is hidden by default for a minimal UI. You can press the alt keyboard key to access it.

How it works

A template app with the appropriate plumbing is included in the ./app folder. When nativefier is run, this template is parameterized, and packaged using Electron Packager.

In addition, I built GitCloud to use GitHub as an icon index, and also the pageIcon fallback to infer a relevant icon from a URL.

Development

Help welcome on bugs and feature requests!

Get started with our docs: Development, API.

Docker Image

The Dockerfile is designed to be used like the "normal" nativefier app. By default, the command nativefier --help will be executed. Before you can use the image, you have to build it:

docker build -t local/nativefier .

After that, you can build your first nativefier app to the local $TARGET-PATH. Ensure you have write access to the $TARGET-PATH:

docker run -v $TARGET-PATH:/target local/nativefier https://my-web-app.com/ /target/

You can also pass nativefier flags, and mount additional volumes to provide local files. For example, to use a icon:

docker run -v $PATH_TO_ICON/:/src -v $TARGET-PATH:/target local/nativefier --icon /src/icon.png --name whatsApp -p linux -a x64 https://my-web-app.com/ /target/

License

MIT