I finally did it. MrPowerScripts.com is now a Progressive Web App. Did it take long? Nope. A couple of hours. I was trying to do it from memory. It should have taken about 20 minutes. Whoops. So it’s there, it’s working, it’s incredible, and what the hell is a PWA?
What is a progressive web app? (PWA)
You ever surf a website, and you like the content? And you would love to get notifications about when new content is released? Or the ability to interact with the site offline? So you check to see if they have an app, and if you’re lucky, they do! Cause that’s all the stuff that apps do.
But why do you need to download an entirely new app? The content was right there already. Native apps do provide additional advantages. They have access to local resources, processes can run in the background. You can’t do all that with a website.
But the content was RIGHT THERE ALREADY. Why do I have to open up a different app to download a new app to get a better experience with the content I was literally just looking at?
What if you could get the benefits of a native app directly from the website itself? So users click a button on your website that turns the site into a native app type of experience. That’s what a Progressive Web App does.
PWA support comes directly from browsers, so they work on both mobile and desktop. Progressive web apps turn your website into a native app-like experience on mobile, and they can also be installed as a “desktop app.” on your computer. Not every browser supports this feature. For instance, Chrome fully supports Progressive Web Apps on mobile and desktop versions. Firefox mobile has some support for PWAs, but they’ve had a three-year-old open issue for adding support in their desktop version.
You can see which browsers support the required features for PWAs here. The interesting part is that the Microsoft Edge browser has full support for PWAs. In contrast, Apple’s Safari browser has no support. Why is that interesting? If you read about the history of PWAs they were conceptualized as the first “app” experience on the iPhone. Though they faded out of favor for the “native” solution, we’re now using. iPhone apps were supposed to be web apps build with basic HTML, CSS, and javascript through AJAX calls. Despite dragging along through the years, there’s a wide range of growing use and support for PWAs.
What are the advantages of a PWA vs. Native app
Native apps will always perform better, but many types of websites can benefit from adding PWA support. Such as content-focused sites, like news outlets. Adding PWA support will let users add your “web app” to their mobile home screen or desktop shortcuts for quick access. It also allows your website to open up as a full screen. So to the user, it will have an app-like experience. They can access it with the click of a button, and they’ll have the full phone real estate to view the content like a native app.
Also, through the use of a service worker, you can enable various caching strategies, so that content can be cached for offline viewing. Or the content can even be updated in the background. Allowing for the new content to open quickly. New standards like Trusted Web Activity (TWA) and tools like Bubblewrap by Google Chrome Labs team enable you to quickly turn your PWA website into an APK. Then you can upload your PWA APK to the Google Play store, where people can download it like a real native app. Also, like native apps, you’ll be able to send mobile and desktop notifications. Again, like a real native app!
Hopefully, we’ll see more support for Progressive Web Apps, as they help bridge the gap between native and web experiences. With the use of good old fashioned Javascript, HTML, and CSS. Native apps will always have their place because of the performance and resource limitations of PWAs. But you still have access to a lot of great features like notifications, and offline viewing. Also, PWAs can be installed from desktop browsers with a simple click. Can you install a play store app on your desktop that easily? Probably not.
PWAs are here to stay
PWAs aren’t going to go away any time soon, and the support is only growing. Many major websites like Twitter, Facebook, and popular open-source projects like Discourse already support PWAs. Exciting tools like Bubblewrap will help increase the versatility of PWAs. And we’ll likely continue to see standards like TWA develop to blur the lines between the native app and PWA experience.
Need help turning your website into a PWA? Join me on Discord
Top comments (0)