PWA Showcase
Hello all! I am Jaylyn Barbee, a rising senior at Duke University and I have had the amazing opportunity to intern at Microsoft on the PAX Web team this past summer. While the experience was completely online, the amount I learned is unparalleled. Each of my team members helped me out in one way or another during this whole experience so before I go any further I just want to say Thank You to all of them for being so supportive!
The project I worked on was the PWABuilder PWA Showcase! The PWA Showcase is a catalog of high quality PWAs (Progressive Web Apps) that allows for developers to share their work and browse the work of others! Adding PWABuilder to the story, developers will be able to convert their sites into PWAs that are Showcase ready and then share their work for everyone to see. Some of my favorite examples of the PWAs featured in the Showcase are “Dino Game” (which is the game that Chrome allows users to play when internet is not available) and Instagram. This shows the range that PWAs have.
Note: The PWA Showcase is currently in Beta and we will be approving submissions very soon, feel free to go ahead and start submitting your apps though! Keep an eye on our Twitter Account for updates.
The PWA Showcase is a PWA itself. It was built using the PWABuilder pwa-starter, available here, which comes kitted with lit-element for building your pages and components, a router (Vaadin Router), a service worker (powered by Workbox), install and share components and even nav transitions between pages! The starter kit is a straightforward way to begin building high quality PWAs even if you have little to no experience. I picked it up in my first week or two with NO experience doing front-end web development and have also used it to work on two side projects outside of work this summer.
Because of the built in service worker set up in the pwa-starter, users can fully browse the Showcase while offline and, if it were put through PWABuilder, it would also be ready to be packaged for the major app stores. It is also fully responsive so it will look nice no matter what size device you are using it on.
To submit your PWA, all you need is app URL. The walk through below will use PWABuilder itself as an example.
Step 1: Sign in in the top right-hand corner
Step 2: Copy and Paste your URL into the text box. Pressing submit (or enter) will cause three tests to run to ensure that you have a “Name”, “Description” and “Icon” in your manifest. This is just so we have enough to build your product description page. If you are missing any of these, you will be linked to PWABuilder to help you add these attributes.
Step 3: Select the Browsers your app supports. After passing the above three tests, a new half of the page will appear. The first section is Browser Support: this is where you can say if your app does or does not work in certain browsers. This just prevents users from being blindsided when using your app.
Step 4: Next is the screenshots box. If you do not have screenshots we use the PWABuilder screenshots service to generate a screenshot of your home page on both desktop and mobile. If you already have included screenshots in your manifest, those will be displayed in the carousel.
Step 5: The last step in the submission process is selecting the categories your app falls in. These are the “common” categories found in the web manifest spec page for categories. After you are done with the categories, you can submit your PWA.
Step 6: To wrap up the process, you will see a preview of your Product Description page and also be linked to a GitHub Pull Request which we advise you to “Watch” so you can be notified when actions occur with your app submission.
With PWABuilder + PWA Showcase, we have really created a one stop shop for all things PWA. You can build your PWA, package it for the Google Play Store AND submit it to our catalog to be shared with other developers. Down the line, there will be a route directly in the PWABuilder site to submit your PWA without leaving the site.
These past 12 weeks I have spent working on this project I have learned the power of Progressive Web Apps and hope that you can see that too, thanks for checking out my project!
