Creating a Hosted Web App for Universal Windows Platform (UWP)

Following the instructions on
https://microsoftedge.github.io/WebAppsDocs/en-US/win10/CreateHWA.htm
one can create a Hosted Web App for UWP (Universal Windows Platform)

However, the tricky part is to define the ACURs (Application Content URI Rules - https://microsoftedge.github.io/WebAppsDocs/en-US/win10/HWAfeatures.htm#keep-your-app-secure----setting-application-content-uri-rules-acurs)

  1. It took me a while to realize I should use
    https://cpa.bubbleapps.io/*
    in the “Content URIs” page show when you double-click package.appxmanifest in Visual Studio
    instead of using http://…
    and that I also had to use https://… and not http://… for the Start page setting at the Application tab in that same settings pane.

Guess I could have kept the start page set to http:// and have two rules for both https:// and http://, but adding just http://… rule wasn’t ok when the start page was set to http://, since http://… redirects to https://… automatically at Bubble server

  1. I see messages for example on the debug console in Visual Studio like:
    “fontinactive being called, Google says the fonts didnt render”

  2. also for facebook login, it seems added https://www.facebook.com/* is not enough

guess I should use browser dev tools to see all the URLs requested by the browser when I hit my bubble app, will update this topic with a screenshot of the ACUR settings when it works fully ok

1 Like

I’ve added the following URLs using the info from Firefox dev console (F12 key, Network tab):

there is a bug in the respective Visual Studio designer there, complaining about the cloudfront url without reason (doesn’t like it when it both starts with * and ends with .net for some strange reason), but still it saves the manifest fine and builds the UWP app ok

still have problems after launching though:

  • I see my Bubble app UI in the UWP app’s window and can interact with it but can’t login to it
  • I see some message in the Javascript console that “Google says the fonts didn’t render”
  • See other messages that seem to be related to the ACURs I’ve set or to IFRAMEs used by Facebok etc. (security issues maybe)

So I’m currently stack at the login screen after clicking on the app’s first screen

1 Like

btw, nice to see (as shown in the screenshot above), that dynamic localization via Transifex Live (Greek shown above [the app made in Bubble is in English]) works fine even when the Bubble app is in the form of a UWP Hosted Web App

for more on how to use Transifex Live with Bubble see here: Transifex Live integration

My next step is to make a separate Hosted Web App, this time via AppStudio (http://appstudio.windows.com) and see what code it generates (it also has option to generate ready-made compiled packages for uploading to Windows Store) and compare it (with free WinMerge tool) with the one generated by manifoldJS (http://manifoldjs.com) that I had used

not that the UWP Hosted Web App itself contains ANY code at all (it’s just a manifest file where you set for Start Page the https://… URL of the Bubble app in our case), but maybe manifoldJS spits out some wrong setting at the configuration files of the project or something like that

fingers crossed

Good news: using AppStudio online tool to make a UWP Hosted Web App to wrap a Bubble app URL (the https:// one) seems to work fine. So now I’ll compare with the one generated using manifoldJS which had issue with the login dialog of my Bubble app to see how they differ.

Microsoft’s AppStudio online tool even has option to not generate source code, but spit out a package ready to upload to the Windows Store (manifoldJS also has such option from the command-line [it is an NPM-based tool] btw. - they have a video showing the process on a MacOS-X machine at their site [MS is also backing that project])

1 Like

After comparing the UWP Hosted Web App versions I mention above, I realized the issue was with the ACURs. To fix them I had to remove the /* from their end
http://classprojectassistant.codeplex.com/SourceControl/changeset/4e8eabf89cdd0484daa2a2d1c62384c9a95904ea

The correct ones are shown here:

BTW, the version generated by AppStudio that was also working only had one rule for the URL:
https://cpa.bubbleapps.io
(in fact they had it with a / at the end, but it was obviously since I had specified a trailing / at the end of my app’s Start URL [it is more correct in fact with / at the end, webservers do append it if missing, but anyway the Bubble app will redirect to a URL at a deeper virtual path than / ])

rules for IFRAMEs contained in the navigated-to pages aren’t needed from what I’ve read, so probably the rules are for the navigation of the top-level (the app’s page) only