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
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    MooTools &#038; Printing &#8211; Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

  • By
    iPad Detection Using JavaScript or PHP

    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...

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!