Skip to content
This repository has been archived by the owner on Jan 5, 2021. It is now read-only.

Latest commit

 

History

History
289 lines (287 loc) · 17 KB

CreateHWA.md

File metadata and controls

289 lines (287 loc) · 17 KB
Raw
layout title permalink lang redirect_to
index
Create a Hosted Web App
/en-US/win10/CreateHWA.htm
en-US
  1. Windows Apps
  2. Windows Bridges
  3. Windows Bridge for Hosted Web Apps
  4. Create your app

Create your Hosted Web App

Learn how to quickly create a Universal Windows Platform app for Windows 10 starting with just a website URL

Choose your development platform

Whether you're using Mac or Windows, you can create your very own Hosted Web App in a matter of minutes. Choose your development platform, then follow the below instructions.

Mac Windows

What you need to develop on Mac

  • A web browser.
  • A command prompt.

What you need to develop on Windows

  • Visual Studio 2015. The free, full-featured Visual Studio Community 2015 includes the Windows 10 developer tools, universal app templates, a code editor, a powerful debugger, Windows Mobile emulators, rich language support, and much more—all ready to use in production.
  • (Optional) Windows Standalone SDK for Windows 10. If you are using a development environment other than Visual Studio 2015, you can download a standalone Windows SDK for Windows 10 installer. Note that you do not need to install this SDK if you're using Visual Studio 2015; it is already included.

Option 1: ManifoldJS

ManifoldJS is a Node.js app that easily installs from NPM. It takes the meta-data about your web site and generates native hosted apps across Android, iOS, and Windows. If your site does not have a web app manifest, one will be automatically generated for you.

  1. Install NodeJS and NPM.

  2. Open a command prompt and NPM install ManifoldJS.

    npm install -g manifoldjs

  3. Run the manifoldjs command on your web site URL.

    manifoldjs http://codepen.io/seksenov/pen/wBbVyb/?editors=101

  4. Follow the steps in the video below to complete the packaging and publish your Hosted Web App to the Windows Store.

Option 2: App Studio

App Studio is a free, online app creation tool that allows you to quickly build Windows 10 apps.

  1. Open App Studio in your web browser.
  2. Click Start now!.
  3. Under Web app templates, click Hosted Web App.
  4. Follow the on-screen instructions to generate a package ready for publishing to the Windows Store.

Step 1: Pick a website URL

Choose an existing website that will work great as a single-page app. We highly recommend that you are the owner or developer of the site; this way you will be able to make all the necessary changes. If you do not have a URL in mind, we will be walking you through using this Codepen example as the website. Copy your URL, or the Codepen URL, to use throughout the tutorial.

Step 2: Create a blank JavaScript app

Launch Visual Studio 2015.

  1. Click File.
  2. Click New Project.
  3. Under JavaScript then Windows Universal, click Blank App (Windows Universal).

Step 3: Delete any packaged code

Since this is a hosted web app, where the content is served from a remote server, you will not need most of the local app files that come with the JavaScript template by default. Delete any local HTML, JavaScript, or CSS resources. All that should remain is the package.appxmanifest file, where you configure the app, and the image resources.

Step 4: Set the start page URL

  1. Open the package.appxmanifest file.
  2. Under the Application tab, find the Start page text field.
  3. Replace default.html with your website URL.

Step 5: Define the boundaries of your web app

Application Content URI Rules (ACURs) specify which remote URLs are allowed access to your app and to the Universal Windows APIs. At the very minimum, you will need to add an ACUR for your start page and any web resources utilized by that page. For more information on ACURs, click here.

  1. Open the package.appxmanifest file.
  2. Click the Content URIs tab.

  3. Add any necessary URIs for your start page.

    For example:

    1. http://codepen.io/seksenov/pen/wBbVyb/?editors=101

    2. http://*.codepen.io/

  4. Set the WinRT Access to All for each URI you added.

Step 6: Run your app

At this point, you have a fully functioning Windows 10 app capable of accessing the Universal Windows APIs!

If you are following along with our Codepen example, click the Toast Notification button to call a Windows API from hosted script.

Bonus: Add camera capture

Copy and paste the JavaScript code below to enable camera capture. If you are following along with your own website, create a button to invoke the cameraCapture() method. If you are following along with our Codepen example, a button is already present in HTML. Click the button and a take a picture.

{% gist 9f9c2e6881d09116cdb3 %}