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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

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!