If you don’t know PWABuilder yet, I invite you to read this article for more details.
PWABuilder 2.0 and beyond!
Progressive Web Apps open many new doors for Web Developers. We are now getting the advanced APIs that we have needed…
To start, you will go to the PWABuilder site, then you will enter the URL of your website and click on “Start”.
After that, you will click on “Build My PWA”. Once it’s done, you’ll get this image 👇.
Now click on the windows arrow.
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.
Now we will be able to run our “test_install.ps1” script in powershell like this 👇.
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👇.
Then run the “test_install.ps1” script in powershell again. You will get this result.
Finally, look in your start menu and you will see your application.
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”.
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.
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.
Tutorial: publishing a Chromium-based PWA in the Microsoft Store
To go further in the development of PWAs for windows and take advantage of the windows APIs, I advise you to read this article👇.
This document is intended as a starting point for engaging the community and standards bodies in developing…
Thanks for the reading.