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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    MooTools Gone Wild: Element Flashing

    If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...

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!