The PWABuilder components and demos showcase

As you may have seen, we recently did a HUGE release for PWABuilder. One of the things we released this time is a brand-new Components and Demos showcase, let us dive into the details!

Cool! What is it exactly?

The Components and Demos showcase is a “one-stop shop” for all of the PWABuilder components you may want to add to your PWA, such as the pwa-install component, the pwa-auth component and the pwa-inking component! You can grab the CDN link or npm command to install the component right from the “Install Component” button on each components page, making it quite easy to add these components to your PWA. For example, want an app-store like install experience for your PWA straight from the browser? All you must do is go here and you can quickly grab the component.

Also, we are huge fans of all the new and existing APIs on the web and we wanted a place to show demos using these new APIs, which is the new Demos section in the Showcase! The team and our friends over at Intel have added demos for APIs that the PWABuilder team finds cool and useful, such as the Web Shortcuts API, Picture-In-Picture API, the Background Fetch API, Web NFC and more!

Can I submit my own demo?

Of course! The PWABuilder project is very community driven, so we would love to have your demos on our showcase, all we ask is that your demo shows something new or exciting on the web and is open source! If you would like to submit a demo all you will need is a Github Account and then you can follow the instructions here. Feel free to look at our current demos to get an idea of the metadata you will need. We have tried to make the submission process as easy as possible, but if you run into any issues or have ideas on how it could be improved please feel free to open an issue with us on the repo.

How was it built? Web Components?

Now that we have looked at what the Components and Demos showcase is and talked about how you can submit your own demo, let’s talk a little about how we built the showcase.

As with most of our new stuff on the PWABuilder team, we built the showcase using the PWABuilder pwa-starter. The pwa-starter uses TypeScript, lit-element, and Rollup to enable you to deliver a modern, lightweight PWAs that load instantly, no matter what kind of device or network connection the user has. Because of the combination of TypeScript with lit-element, the pwa-starter provides developers with a familiar development experience. The pwa-starter also includes the pwa-install and pwa-update components to make sure your PWA has that app-like feel right out of the box.

What kind of performance can you expect when building a PWA with the starter?

If you would like to build your own PWA with the PWABuilder pwa-starter just go to PWABuilder and tap the Get Started button!

Thanks for checking out the new Components and Demos showcase from the PWABuilder team! We can't wait to see your demos and we hope that our component help make your PWA even better. Finally, if you do not have a PWA yet make sure to visit PWABuilder to get started on your journey!