What is a PWA and How You Can Create, Export, and Customize One

What is a Progressive Web App (PWA)?

Progressive Web Apps are web applications that deliver an app-like experience directly in a browser. They combine the best features of web and mobile apps, offering users a fast, reliable, and engaging experience.

They work like regular mobile applications, with features like responsive design (meaning they work the same across different devices and screen sizes). Some offer offline capabilities, push notifications, as we are all used to by now, as well as fast performance and security, since everything is delivered via HTTPS to ensure safety and user data protection.

PWAs are gaining popularity because they bridge the gap between web and native apps.

Companies like Twitter, Starbucks and Spotify use PWAs to enhance their user experience.

Key PWA benefits include:

• Cross-platform compatibility
• Offline Functionality
• Push notifications
• Cost efficiency
• SEO Friendly

As mentioned, PWAs can be exported as “native” apps for all major platforms, such as Android, iOS, Meta Quest and also Windows. When it comes to Windows, these are delivered as the new modern MSIX package type.

Prerequisites and Best Practices for Creating PWAs

To create a Progressive Web App (PWA) from a website, you need to meet some technical requirements and best practices.

1. You must use HTTPS for security.
2. You need to create a site manifest, named manifest.json. It includes details like the application name, icons for different screen sizes, the start URL (the page that opens when the PWA is launched), and Display Mode (for example standalone for a native app feel).
3. Implement a service worker in your PWA – a script that runs in the background and handles the caching and offline functionality, background synchronization and push notifications.

Once those are in place, the next recommended steps are:

• Responsive design
• Fast and reliable performance
• App-like experience

A popular tool for creating PWAs from websites is PWABuilder from Microsoft. You can use it online at pwabuilder.com or download the necessary tools on-prem from their GitHub Repo.

How to Create a PWA Application for Spotify Using PWABuilder

To create a PWA application for Spotify we choose the PWABuilder.com option. Once you open the link, paste the Spotify URL in the field, where it says “Enter the URL to your PWA” , and click “Start”.

PWABuilder will analyze the website, suggest recommendations, add a service worker, and implement the detected app capabilities.

You can then continue to edit your manifest, assign a new service worker, or adapt the app capabilities. Once you’re ready, click the “Package for Stores” button at the top.

PWA Builder lets you generate the package for:

• Windows
• Android
• iOS
• Meta Quest

Since we’re focusing on Windows, we’ll choose the Windows Package option.

After generating, an archive will be downloaded which contains the following files:

You can now submit this package into the Microsoft Store. For more details, read this specific Microsoft documentation.

Editing PWA MSIX Packages with Advanced Installer’s Built-In Integration

Starting in Advanced Installer 22.6, you can edit your PWA MSIX packages before either submitting them to the Microsoft Store, sideloading them into a desired infrastructure, or publishing them on your own website.

Using the Spotify example, after downloading and extracting the archive, you’ll see Spotify.sideload.msix.

To edit the package, right click the file and choose Edit with Advanced Installer.

When you go to the Application Details page, you'll notice that the application entry has now a PWA-based entry. You need to provide a Host ID and the proper parameters for the application itself to run.

Another difference you might notice is in the Declarations page. The App Extensions point now to a certain ID which needs to be declared and that opens this particular PWA.

Since this is generated with PWABuilder, the ID of the App Extension points to the Edge browser. You can change this to another browser if needed.

To test the sideloaded app, remember that downloaded MSIX files aren’t signed.

The ones which are targeted for the Microsoft Store will be digitally signed by Microsoft once it’s uploaded and approved on the Microsoft Store. However, the sideloaded one needs to be signed manually. We added a certificate under the Digital Signature Page, saved the MSIX, and installed it.

Once we opened the new shortcut added to the Start Menu, this showed up:

Conclusion

Progressive Web Apps (PWAs) use web and mobile technologies to offer users versatile, fast, and secure applications. With features like responsive design, offline capabilities, push notifications, and app-like functionality, they bridge the gap between native and web apps.

Tools like PWABuilder make it easy to create and export PWAs for multiple platforms, including Windows, Android, iOS, and Meta Quest.

Advanced Installer adds further flexibility by allowing developers to customize and prepare MSIX packages as needed. As PWAs continue to grow in popularity, they provide a modern solution for businesses and developers for delivering powerful, user-friendly applications.