Revealed: Your Glitch in Bio page is a PWA!

With the launch of our new “**Glitch In Bi**o” starter project, we’ve seen thousands of creators make link pages for their social media in an inspiring variety of ways. But there’s something interesting happening behind the scenes with Glitch in Bio that points to an exciting new opportunity for the open web.

PWAs, or progressive web apps, are a way of giving apps built on web technologies the same features and finishing touches as the native mobile apps we use on our phones and other devices every day. PWAs have been around for a while, but are still not as broadly adopted by users as they might be, because most of the time, it takes extra technical work to turn a regular web app or web page into a PWA. Often, that work falls onto the list of things we file under “I’ll do that later…”

The good news is, thanks to the defaults we’ve set on Glitch, every single one of the Glitch In Bio link pages that’s been built is already a PWA. It’s built right into the project. And it’s the first step on a larger path of giving every creator the benefits of PWAs without all the technical hassles of setup or configuration.

Why would you want your app to be a PWA? #

Having your app function as a PWA brings a number of advantages.

• Being a PWA makes your app installable on user devices vs just being accessible through the web browser. This creates a higher quality experience that’s more like native (and you can enhance it to leverage native functionalities like notifications).
• PWAs are more discoverable because they’re shareable by link and easily optimized for search engines, as well as being available through app stores, which means you can make it discoverable to a whole new audience, and even optionally monetize it!
• Last but not least, PWAs create a more resilient and inclusive user experience because your content is cached for offline use, so users can still access them even with restricted connectivity. Since Glitch in Bio is a generated static site, it’s highly performant and delivers content to the user super quickly by default.

OK, how does this PWA thing work? #

Your Glitch in Bio app is all set up to function as a PWA when you remix it, but you can of course edit or enhance its functionality. The site style is already responsive to display nicely on mobile devices, and will cache the default HTML and CSS.

There are only two additional files in your project, both inside the public folder:

• manifest.json which specifies the metadata required for the app to function as a PWA, including icons and the start URL
• sw.js–the service worker, which specifies caching behavior for the app, including when the user is offline Your project’s HTML page head imports both of these, in layout > head.html. To see the PWA behavior in action, open your browser dev tools and choose Application.

What do I need to do next? #

Your project will work out of the box as a PWA, but as you edit your Glitch in Bio project, there are a couple of details you might want to further customize in the PWA settings:

• **Icons: **If you add your own images, including them in the list of cached files in sw.js will make them available for offline use
• Metadata: If you take a look in manifest.json, you’ll see the settings that’ll determine how the app functions when installed on a user device, so you can update the text and images to suit your project
• Files: If you use additional files such as your own CSS theme, add them to the list in sw.js for caching too If you want to take things even further, you can submit your PWA to any app stores that serve your audience. There are simple instructions for submission to the Google Play store for ChromeOS, the Windows App Store, and even open source tools that will help you submit a PWA to the iOS App Store.

There are also lots of options when it comes to PWA behavior–your Glitch in Bio site will initially attempt to fetch the page from the web and only use the cache if there is no response. This is known as “network falling back to cache” but you can alter it to suit your own needs: check out the Google Developer guidance for more.

If you customize or extend the PWA component in your Glitch in Bio remix please let us know about it! We're eager to share your creativity with the rest of the community. You can also join the community in the Glitch forum to talk through your ideas for your page.