I always have been interested in developing of apps, programs etc. but I really just got started three months ago with the development of our TheWinDuck app. Coding makes a lot of fun and now I want to share some of my knowledge with people who are interested in developing for the Windows Platform as well but do not know how to start.
In this second part of this new series ‘TheDevDuck’ I want to talk about Hosted Web Apps.
Hosted web apps are really cool: Simple to create, look great across all Windows 10 devices, and much more! For existing websites Windows 10 makes it easy for you to create a Universal Windows Platform (UWP) app that packages your website for publishing to the Windows Store. In this article I will describe how to create a Hosted Web App.
What is a Hosted Web App?
A Hosted Web App is basically a container app because the content of the app is hosted on a web server. Nevertheless, for the user it feels like any Store app. For developers, the app is a standalone instance of the web app with all the features and privileges of a Store app.
When the app is launched, the code is loaded inside the app from the web server at runtime. As a UWP app, it now has access not only to the standard web APIs like in a browser, but also the entire range of UWP APIs just like any other Windows 10 app (Live Tiles, Cortana…).
Before you can start developing a Hosted Web App, you need to download Visual Studio. I would recommend the Visual Studio 2015 Community Edition because it is free but has all features integrated.
After you have downloaded and installed Visual Studio, you really can get started.
Just 6 steps…
Now, you should see something similar to the screenshot down below.
In the next step you should delete any package code: You will not need it because the app content comes from a remote server and not locally from the app. Delete the css, js, WinJS file and the default.html document. All that should remain is the package.appxmanifest file, where you configure the app, and the image resources.
It is time to add your website to the app! Open the package.appxmanifest file and replace the default.html with the URL of your website.
To make your app work, you need to define the boundaries of you web app. They are really important to make sure that your website is actually displayed in the app. Therefore, open the Content URL tab in the package.appxmanifest and add any necessary URLs. You definitely must include the URL of the start page of your app. The WinRT Access should be set to All for each URL you have added.
Your app is now already a fully functional Windows 10 app but to make it look nicer, you can add logos to your app. Just go to Visual Assets in the package.appxmanifest and add the logos you want to add.
Congrats, now you have created a Hosted Web App! To launch and install the app on your devices. Choose the device, the app should be installed on (on your PC or on a connected devices) and press the green triangle button. Your app should be launched and installed now. Furthermore, it should appear in the app list.
In one of the next articles of this series, I am going to talk about how to bring an app from Visual Studio to the Windows Store and how to create installable packages of apps.
I hope that I was able to answer many questions concerning Hosted Web Apps with this tutorial. Nevertheless, if you still have any, do not hesitate asking me. You can do this both on Twitter (@Valentin_win10) or in the comments.
It would be really exciting to see some of your results so it would be great if you could send me screenshots on Twitter or per Mail.