Convert Websites to Apps

By  on  

Convert website to app

Converting a website to a native app, whether on mobile or desktop, can be quite useful.  The problem with bookmarks, especially for software engineers, is that we often need to work in different browsers, so having everything in one browser's bookmark set can be a pain.  I'd also argue that websites with a specific purpose area great case for converting a website to desktop app.  I recently found nativefier, an open source utility that creates a native desktop app by wrapping the site in Electron.

Installation

You can use NPM to install nativefier and node-icns, which we'll use to create a custom icon for the app:

npm install -g nativefier # App creator
npm install -g node-icns  # Icon creator

The nativefier docs provide a method for creating the desktop app icon but ImageMagick and iconutils are required -- node-icns will save you some pain.

Create the App Icon

It's important to create the app icon before creating the app itself.  You can create an app icon with node-icns and an image of your choice:

# Generate icon set required by macOS
nicns --in app-icon.png --out app-icon.icns

Use a high-quality, square-shaped PNG -- transparency will be preserved and file size doesn't matter since the files will live on your machine.

Creating the App

nativefier provides a whole host of configuration parameters you can use to create your app.  Let's create an app using many of the useful parameters:

nativefier \
    --name "David Walsh Blog" \
    --verbose \
    --counter \
    --icon app-icons.icns \
    --fast-quit \
    --inject custom-css.css \
    --inject custom-js.js \
    --flash # gross
    "https://davidwalsh.name"

A directory named "{appname}-darwin-x64" will be generated and within that directory will be the app file, which you can drag to your Applications folder (or whatever your OS equivalent is) and to your dock.  You'll note that you can add custom user JavaScript and CSS files so that you can hide advertisements, modify colors and behavior, and so on.  The --counter argument is particularly interesting -- a web app like Gmail that updates its <title> tag as a pseudo-notification will trigger a red notification dot over the app icon when an update is made.

Web apps like IRCCloud and websites like DevDocs are perfect candidates for conversion to desktop app.

Thanks to Byron Jones for letting me know about nativefier!

Recent Features

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

Discussion

  1. Thanks for this, I had previously been appifying websites with fluid app http://fluidapp.com .

    Worth mentioning franz http://meetfranz.com for whatsapp/slack/skype and other messaging serivces

    Also devdogs https://github.com/ragingwind/devdogs is a desktop app wrapper around devdocs with a few extras

  2. That’s perfect with http://devdocs.io/ to have offline documentation (and it’s free compared to Dash :) ).

    • (well, I should have read the last paragraph of the blog post…)

  3. Clever idea indeed. Thanks for sharing this valuable information.

  4. Priya Akter

    Few days ago I’ve got an app from this.Just commented here to tell you that I really appreciate this work.It is very helpful to get an app for website from here.
    If you need any app for your website,just check out this link
    https://www.fiverr.com/al_walid_ashik/develop-an-android-app-for-your-website?funnel=69727045-d7b7-4e61-9296-4ebaa4c92267

  5. Pranab

    the nativefier is perfect for instantly creating website to web app..
    but there’s no “back” and “forward” button in the app..and even “alt+left-arrow” not working to go back to previous page..for these is there anything i need to include any command in node terminal?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!