The new Microsoft Edge browser – which is now based on the open source chromium engine – includes the ability to turn any website into its own app on your Windows 10 machine.
But why would you want to turn a website into an app?
Many apps that we use today, are not much more than websites in a wrapper. With the latest web technologies, websites can act very much like apps do. They can cache the user interface to run faster, be personalized to your needs, track your location, and annoy you with notifications.
But a website can sometimes get lost in the web browser interface. It’s always underneath the browser address bar and the toolbar, and it’s probably one of dozens of tabs that you have open at any time. Not to mention, managing all these different sites through a single app can lead to a very cluttered work space.
So it would be nice to have a direct way to get to that website as an app. This is especially true on Windows, where many apps developers don’t bother to make their app available in the Windows store.
But thanks to the new Microsoft Edge; we can turn any website into an app ourselves. No more waiting for the devs to support our favorite app.
Install a website as an App
To install a website as an app on your Surface; start by opening the new Microsoft Edge and navigating to the website that you want to use.
Click on the 3 dot menu in the top right corner of the browser, and point to apps. Click on Install Website as an app.
The website will open in it’s own dedicated window – without the browser interface.
On the Windows Start Menu, you’ll see the app appear in the programs list, and you can now pin it to your start menu or your task bar.
Now that you can run that website as an app directly from its own shortcut, it’s no longer lost in your sea of browser tabs. It’s in it’s own window. Any notifications that come from this website will appear as coming from the app itself. Making it very easy to turn them on or off for that one specific app.
Progressive Web Apps
So we’ve turned a website into an app. But is a website really the same as an app? Well, sometimes, and maybe…
On some websites, you’ll see an icon in the address bar when you visit them – saying an app is available. If you see this, the website you’re visiting is purpose built to be an app. It is a progressive web app, or a PWA. In fact, many apps that you’ll download from the Windows Store, and even the store on your mobile device are progressive web apps.
If you are using a website that was built as a PWA, you will see this small popup in both Edge, and Chrome.
PWAs can run just like apps do on your device – even when you’re not online.
Our top list of PWAs
Here are some examples of PWAs that you can install on your Windows 10 device.
Twitter – twitter.com
Again, you can get this one through the Windows store, or just through the browser. It’s the same app.
Outlook.com – outlook.office.com/mail/inbox
If you’re choosing an email client on Windows 10, this one is a great option. Outlook.com has come a long way in recent years in Office 365. It now supports dragging and dropping emails – for example, I could drag an email from my inbox over to my calendar or task list, just like I can do in the desktop version of outlook. So on Windows there are dozens of good email clients – Not just Outlook Desktop and the inbuilt mail app… But now you can even use outlook.com as an app too.
The Office App – www.office.com
This is a handy dashboard for Office 365 users – and you can install it from Windows Store, or just directly through your Microsoft Edge browser because it is a PWA. It shows all of your recent docs in OneDrive, and it gives you easy access to all of the 365 apps.
Sketch.io – sketchpad.app
Sketch.io is a pretty interesting online drawing app that can be installed directly on your device as a PWA. It even supports pressure sensitivity for drawing with your Surface Pen.
Spotify open.spotify.com
The Spotify Web player can be installed as an app. This is a good option for the Surface Pro X where the desktop Spotify client can be a little bit sluggish.
Uber – uber.com
It’s been a while since I’ve called an Uber this year, but it’s nice to have this option on my Surface just in case!
Pinterest – www.pinterest.com.au
I don’t really use Pinterest, but there is a PWA for it. Check it out at the Pinterest Website.
Google Photos – photos.google.com
Google Photos is one of the few PWAs that Google have created from their suite of apps. It’s a bit strange because Google really led the introduction of PWAs, but they have not created many of their own. For example, unlike Outlook, Gmail does not have a PWA. Nor does Google Docs. It’s a shame really, although you could install them as apps anyway through Microsoft Edge.
Starbucks – app.starbucks.com
Starbuck never really made it big here in Australia. We have very particular coffee tastes down under, and their initial push to set up Starbucks stores everywhere here fell flat. There are a few Starbucks stores around. But I know it’s on every street corner in the US, so this will be handy for those in the US especially.
2048 Game – 2048.love2dev.com
In poking around the web, I found this developer who created the 2048 game as a PWA.
Sound Slice – www.soundslice.com
In doing research for this video I found a number of PWA lists, and Sound Slice caught my attention. I haven’t it yet, but it looks to be quite an interesting music learning app. So that’s probably worth a look too.
Google News news.google.com
And lastly, there is Google news that you can use on your Surface as a PWA. Many of the news sites open in the Google News PWA as mobile sites. So it’s quite a good option for reading the news on your Surface.
For any of these PWAs, just visit one of those websites in Edge, or Chrome, and look for the prompt to install. The apps will then show up on the programs list on your start menu.
Beyond PWAs
Beyond Progressive Web Apps, here are some handy regular websites that I have installed as an app to give you some ideas:
Tinkercad – www.tinkercad.com
TinkerCad is a simple 3D design tool from AutoDesk. It works really well with touch on Surface! And the large screen and proper mouse support on Surface really lends itself to this kind of app far better than a smaller tablet does. Even though it’s not a PWA, it’s great to get the browser interface out of the way and reclaim some design space.
Kindle Cloud Reader – read.amazon.com
Unfortunately Amazon’s PC based Kindle Reader app is garbage. It’s a clunky mouse and keyboard app that looks like it was designed in 1985. It’s an embarrassment, and it’s the sole reason that I started buying eBooks on Kobo. Fortunately the web reader for Kindle is not too bad, however you must be connected to get started with your Kindle reading.
BOM – www.bom.gov.au
I’ve installed the Australian government weather service website as an app. It’s a handy to have a quick shortcut for us here in Melbourne, because one of our favorite things to do is talk about the weather! We’re famous down here for our four seasons in one day!
Messenger – messenger.com
That’s Facebook Messenger’s app. Even though it’s not a PWA, getting the browser out of the way helps me to focus on video calls in messenger!
So there’s my quick list of PWA’s and websites that you can install as apps on your surface. One benefit of using a Windows 10 device as a tablet is you don’t have to be restricted to apps from the store. You can run Windows that way if you want to, but you have the choice. You can now get apps through the store, download them from company websites, or install PWAs and websites as apps through your browser.
If you have any use cases or other PWAs that you use, subscribe to our YouTube Channel and comment on our video on this topic.