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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

  • By
    Spyjax:  Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

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!