PWA Tailoring guide VS2019

[AngelMunoz]

Hello there!

VS2019 seems to have removed WWA project types and there seems to be no further plans to it as this response in the developer community forums
From what I understand from the case is that this is not a bug and it's more related to documentation itself

there is also this response

There is no PWA template in Visual Studio. To optimize a PWA application for Windows, you open Visual Studio to the directory hosting your existing PWA application, and then use the Windows Application Packaging Project to create a Windows package including the Windows manifest.
Here is more information on getting started with PWAs: https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/get-started

However I think the current content does not help to understand how can we continue working on Windows Tailored PWA's on VS2019 since the tutorial/guide mentions that VS2017 is required to finish (and I understand PWA's don't really need anything related to Visual Studio)

Or how could we use the Windows Application Packaging Project to continue to work on Windows Tailored PWA's with/without VS2019 or even vscode + edge dev tools (preview)

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: c306f3b9-d287-beba-eb3b-513e58df2440
• Version Independent ID: 787855c5-24d2-b772-e4c3-ce43118e5adb
• Content: Tailor your PWA for Windows - Microsoft Edge Development
• Content Source: microsoft-edge/progressive-web-apps/windows-features.md
• Product: microsoft-edge
• GitHub Login: @MSEdgeTeam
• Microsoft Alias: msedgedevrel

[AngelMunoz]

As a side/related question, is using a WebView a viable PWA strategy in a C# based UWP app?

[brodycj]

VS2019 seems to have removed WWA project types and there seems to be no further plans to it as this response in the developer community forums

Sounds like a very unfortunate step backwards, especially in comparison to Google Chrome (#177):

Google chrome is able to install PWA to desktop without any app runtime.
https://developers.google.com/web/updates/2018/05/dpwa

and Google Play Store:

• https://www.bram.us/2019/02/04/how-to-publish-your-pwa-onto-the-google-play-store/
• https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b

[osamum]

The following document says "UWP JavaScript apps are no longer supported in Visual Studio 2019".
https://docs.microsoft.com/en-us/visualstudio/javascript/javascript-in-vs-2019?view=vs-2019#projects

Therefore, the procedure using Visual Studio described here cannot be performed in Visual Studio 2019.
How can I do this work with Visual Studio 2019?

[raephi]

I have found a solution that works for me with Visual Studio 2019

1. Start Visual Studio 2019
2. New Blank App (Universal Windows) C# Template
3. Open Package.appxmanifest with View Designer (Shift + F7)
4. Visual Assets: add a 400 x 400 px picture click on Generate to create your app icons
5. If you want your App Icon in the Start Menu List to be full sized go under App Icon
   -> Remove the "Apply recommended padding" and press Generate
   -> see Microsoft Documentation for App icons and logos
   https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos
6. IMPORTANT Content URIs: add the domain where the page is running
   
7. Open Package.appxmanifest with View code (F7)
8. Remove Excecutable and EntryPoint under Applications
   
9. Insert your PWAs StartPage
   
10. Press F5 to Debug your App -> your Progressive Web App should now start
11. Now you can Associate Your App with the Microsoft Store or create a Sideloadable Package
    -> do this with a right mouseclick on your Universal Windows App -> Publish

Hope this helps somebody out there

[osamum]

raephi,
I tried your way with newest Visual Studio 2019.
I am able to create UWP and the UWP does able to use WinRT API.
This is wonderful way.

[aarongustafson]

Adding @davrous.

[davrous]

Thanks @raephi ! Nice workaround.

You potentially need also to set the WinRT permissions for the various domain names you'll ping in your PWA:

But this part is still exposed in the visual editor of the manifest under Content URIs.

[scott-stoltz]

I don't get how this could work, as removing "Executable" and "EntryPoint" in the manifest results in an invalid manifest: Error: "Project must have a reference to an application. Please add a reference under the 'Applications' node in the Solution Explorer."

This happens in VS2019.

[scott-stoltz]

Ok, realized that @raephi is using the Blank App template instead of Windows Application Packaging. I just tried that and it works, however, the Application tab of the manifest shows a big red X, next to it. I don't get why we have to use jenky work-arounds for something that should just work....? @davrous, are able to shed any light on all this for us?

[davrous]

Hi @scott-stoltz , it's because VS 2019 doesn't support this project template. @raephi hack is for VS 2019. The best solution remains to use VS 2017 and the Hosted Web App or Progressive Web App template.

[scott-stoltz]

Thanks for the reply @davrous. I've tried to use VS2017 and it's not working. I need to build a PWA app for Xbox. I'm using the instructions on the current page and this Xbox specific page: https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-edgehtml/xbox-considerations and it doesn't work. My JavaScript PWA app is deployed and just hangs at the splash screen with no error messages.

I tried just doing a UWP app with a WebView in the main page pointing to my web app on a cloud server and it loads. However, I need an actual debugging solution in order to develop anything. I have tried the Microsoft Edge DevTools Preview to attempt to connect remotely to the PWA on the Xbox....the app connects and authenticates to the Device Portal on the Xbox, but then just shows this error: "Retrieving tab list failed with code 404".

So, it appears that these very old solutions just don't work anymore. I'm currently researching third party PWA remote debugging options, but am not finding great solutions.

There is a lot of great new tech around web apps coming from Microsoft (Blazor!) and I have to assume that Edge on Xbox will be updated to the Chromium version in the near future. However, there is little to no details coming from Microsoft to indicate if there will be better PWA support for Xbox apps coming. If it's the case that it is in the works, then I would ask that MS release some more details so we can plan our projects better. If not, well then that would be very disappointing.

Any additional advice you can offer would be much appreciated.

[MarcAnt01]

Hi everyone, I am using latest VS 2017 but I don't see the option to add a start page. Can anyone help me?

[captainbrosset]

Apologies for this issue having gotten stale. I have read through the comments, and it is clear to me that a lot has changed since they were posted, and I don't think there is something actionable to do here. So I will be closing this issue, but please feel free to re-open one if there is still an issue with the Edge documentation site regarding the above discussion.

[AngelMunoz]

Hey @captainbrosset, I agree that the core issue (how to move away from WWA Projects in VS2019) has nothing actionable, but there's something it can be done in regards moving away from WWA projects today. The equivalent today would be something like:

• Enabling Javascript to communicate with the website in the WebView2
  • https://docs.microsoft.com/en-us/microsoft-edge/webview2/how-to/javascript
• Using WinRT/C# in the hosting app, be it UWP, WinUI, or WPF
  • https://docs.microsoft.com/en-us/windows/uwp/csharp-winrt/

Every time the website communicates with the WebView, if the hosting app can do something "native" It would call the corresponding WinRT API.

But these apply to any kind of website not just PWA's. Perhaps someone can open an issue related to that if they want to pursue that avenue, I'm not interested in these Microsoft technologies anymore but that's what I found out while moving away from WWA projects

[Jaifroid]

This might be of interest to those still looking for ways of using WinRT code in standard PWAs packaged for MS Store:

Call native-side WinRT code from web-side code