Test your PWA generated by PWABuilder on Windows 10.

Test your PWA generated by PWABuilder on Windows 10.

Test your PWA generated by PWABuilder on Windows 10.

If you don’t know PWABuilder yet, I invite you to read this article for more details.

PWABuilder 2.0 and beyond!

To start, you will go to the PWABuilder site, then you will enter the URL of your website and click on “Start”.

Image for post

After that, you will click on “Build My PWA”. Once it’s done, you’ll get this image 👇.

Image for post

Now click on the windows arrow.

Image for post

As you can see on the picture, there are “Download” and “Generate”. Click on the “Download” option to download the application files. If you already have a windows developer account, you have to choose the “Generate” option. At the end of the download, be sure to unzip the file.

Before running the “test_install.ps1” script in powershell, we will activate the windows development mode.

Image for post

Now we will be able to run our “test_install.ps1” script in powershell like this 👇.

Image for post

If you get the message “Missing AppxManifest.xml”, in panic. To fix the problem, just open the “test_install.ps1” script in a code editor and change the path to the AppxManifest.xml file, such as ceci👇.

Before

Image for post

After

Image for post

Then run the “test_install.ps1” script in powershell again. You will get this result.

Image for post

Finally, look in your start menu and you will see your application.

Image for post

Before we finish, we will see some details about the application installed.

  • To change the application icon.

Open the file “appxmanifest.xml” located in the appxmanifest folder in a code editor and modify the content of the attributes “Square150x150Logo and Square44x44Logo”.

Image for post

At the end, you still have to run the “test_install.ps1” script in powershell to take the changes into account.

  • The difference between a PWA Windows Appx and a PWA installed from a browser on windows.
Image for post

On your left, you have a PWA installed from a browser on windows and on your right, you have the PWA Windows Appx we just installed. As you can see on the image above, the PWA windows Appx does not have the functionality of a web browser. On the other hand, the PWA windows Appx has the return (back arrow) functionality of windows.

Image for post

To go further in the development of PWAs for windows and take advantage of the windows APIs, I advise you to read this article👇.

MicrosoftEdge/MSEdgeExplainers. This document is intended as a starting point for engaging the community and standards bodies in developing…

Thanks for the reading.