Go to the profile of Mingyang Li
Mingyang Li
A student.

Introducing Windows Web, a Win10-like Desktop for WebApps on iPad

Won’t it be cool to run (at least simulate) Windows on an iPad?

Won’t it be convenient to have a centralized access to your favorite webapps?

Won’t it be awesome to take more detailed window control on iOS?

Here is my answer.

Problem

  1. I would love it if my iPad Pro could show more than 2 apps at the same time.
  2. iPad Pro offers screen-splitting feature that displays 2 apps side-by-side. It’s very handy (It only takes a simple swipe to divide your iPad Pro into 2 iPad minis.), but sometimes it’s just not the optimal layout. I often find myself in the need of running at least 3 apps in parallel. For example, I need to time myself transcribing a speech from a video, which requires me to keep the Youtube app, a notepad and a timer (Of course I can use my phone as a stopwatch, but it clutters my workspace.) visible at all times. It would be great if I could manage windows as I would do on Windows (R).
  3. Many apps simply do not need that much screen estate.
  4. Mobile apps are generally less cluttered than their their desktop counterparts for that they work on smaller devices: Distracting visual elements are usually hidden in a menu or completely removed. This helps with users’ productivity and gives those apps a clearer look.
  5. I could barely think of a reason why a minimalistic timer app should conquer a whole column on my screen — a button that is the size of my palm? Nonsense. This app would make more sense to occupy an area no bigger than a 500px square. Such layout customization is yet impossible on iOS. My iPad needs a better window manager.

Now we know that mobile apps boost productivity and so does multitasking with >2 apps. What happens if they happen together? The marriage between Chrome OS and Android apps gives an answer.

But I use an iPad! :(

Solution

It is impossible for me to get desktop-level window management over native apps without jailbreaking, so I can only operate on webapps.

Before AppStore came to iPhoneOS, developers created webapps to supercharge iPhones. They are have unique advantages compared to native apps: they take virtually no storage space and can be updated frequently. Most importantly, webapps are universal: they offer nearly identical user experience across platforms — an webapp would behave the same way on a phone as it does on a desktop. However, remember that iPads came wayyyy after native apps, so webapps were not fully prepared for big screens. While making webapps for first-generation iPhones, few developers cared about responsiveness. This wasn’t a problem until iPads came into being: webapps running on iPads waste lots of screen estate.

I came across an elegant mock-up of Windows 10 desktop on CodePen by Keith Pickering featuring 3 fake apps.

Based on its structure, I did the following over a terrible hackathon:

  • Replacing dummy windows with real webapps.
  • Optimizing it for touchscreens, specifically for iPad as a webapp.

The result is Windows Web (which is of course not a Microsoft product), a webapp platform/launchpad with the look&feel of Windows 10. It is an open-source project, and really easy to add more apps to.

Installation

As you would normal do to install a webapp on iOS:

  1. Open this link in Safari on your iPad.
  2. In “share” menu, choose “add to homescreen”.

A new app would be added to your homescreen with a Windows logo (sorry; I know I shouldn’t). Try play around with it :)

Background

It wasn’t a random brain-stormed idea at all. In fact, I had been designing my own desktop UI ever since primary school age. (Sounds like something a young geek would do, eh?)

While teaching myself jQuery during middle school, I made a console-based, OS-like, desktop-only webapp named Consora. It’s also open source. Like you would on *nix platforms, you can install software packages with the ins command.

My first webapp was a synced lyric reader with real-time auto-scrolling.

All these little side projects gave me experience that rendered helpful while building Windows Web in one day.

Future

After all it’s only a hackathon project. There are so many entries on my to-do list:

  • Add more useful apps.
  • Make apps quittable.
  • Make Windows Web remember the desktop state across refreshing (iOS reloads webapps every time a user switch between apps).
  • Make apps “installable” on the client’s side.
  • Figure out a way to avoid abusing Microsoft’s trademark.

Any ideas on how I can improve my Windows Web? Feel free to contact, comment or open an issue on GitHub.