Limiting the Downasaur on Your Site - What is a Progressive Web App (PWA)?
Nobody likes the Downasaur. The Downasaur is the T-Rex that pops up on your Google Chrome browser when your internet goes down. There’s usually an accompanying “You are offline” message.
The Downasaur is a cute little guy (or girl - we don’t know how to determine Downasaur genders), but you don’t want him to pop up on your website when people are browsing. Studies show that 50% of users will leave a website if it takes longer than 3 seconds to load. If your website suffers from slow speeds, you could be losing out on traffic and sales.
The problem is worse when you’re browsing the web on your smartphone or tablet. Most people use their devices when they’re away from home, which means they’re more susceptible to slow internet speeds or loss of connection.
Thankfully, you can alleviate this problem by converting your website to a progressive web app, also known as a PWA. A progressive web app can make that Downasaur go extinct on mobile web browsers.
What is a PWA?
A PWA is a website that operates more like a mobile application.
Think about the apps you use on your smartphone or tablet. Many of us feel like we can’t live without them, and it’s no wonder - their benefits are vast. First, they’re stored and operated on your device, so they can interact with your device’s key features. Instagram, for example, can utilize your camera and photo library. Facebook can draw from your phone’s contact list.
Apps are also fast. Since you’re operating the app on your device, you’re not overly reliant on an internet connection. Even when your internet goes down, your app can probably still perform a few key functions that don’t require internet connectivity.
Apps are also very user-friendly. They’re designed with interfaces that are simple and easy to maneuver using touch screen, making them perfect for our on-the-go mobile lifestyles.
Now wouldn’t it be great if websites had some of those same great features? That’s the whole idea behind a progressive web app. Mobile apps can have their drawbacks, as do websites.
Cons of a mobile app:
- You lose storage space
- No real-time updates
- Low search engine visibility
Cons of a website:
- Dependent on web connectivity
- Not optimized for mobile devices
Progressive web apps bridge the gap between mobile apps and websites. A PWA is a website that you access on your mobile browser that has mobile app attributes. It aims to eliminate the weaknesses of both websites and mobile apps by creating a hybrid of the two and results in a more user-friendly experience.
What are the characteristics of a PWA?
Here are the key attributes of a PWA. These guidelines were established by Google engineer Alex Russell [1].
1. Responsive
A PWA should work with a touch screen interface on a smartphone, tablet, or computer monitor.
2. Connectivity independent
Progressive web apps should be able to work even when they’re offline. You’ll get high performance from the website even when you’re not connected to the web. It should be just as fast as if you were surfing the web on your high-speed desktop computer.
3. App-like interactions
PWAs should have the same interface that mobile applications do. It’s frustrating when you’re browsing a website on your mobile device but the website isn’t optimized for mobile use. Usually, the font is too small and it’s difficult to tap any of the buttons.
PWAs are designed with an interface that’s similar to the traditional mobile app, with large buttons and navigations features that enable you to tap and swipe your way around the site.
4. Fresh
PWAs are automatically updated. You don’t have to update them through an app store on your device.
5. Safe
Progressive web apps are protected by TLS encryption. Your data will be secure when you’re using the app.
6. Discoverable
PWAs are recognized as applications by search engines because they’ve been registered with a web app manifest.
7. Re-engageable
PWAs can utilize an operating system’s re-engagement methods. Re-engagement is when an app provides an incentive for a user to begin another session on it. Push notifications are the most common form of re-engagement. Lots of apps use push notifications to inform users of new content available on the app.
8. Installable
A progressive web app can be installed and launched from the home screen of the device. PWA’s should be downloadable directly from the web browser. You shouldn’t have to download them from an app store.
You don’t need to have installed a PWA to use it. At first, the PWA acts like a traditional website that you reach via your device’s web browser. If you like the PWA and use it frequently, you’re able to download it directly to your device. The PWA should wait until your third visit to prompt a download, but not all PWA’s follow this guideline.
9. Linkable
You should be able to share a PWA through email, messaging, or social media without requiring others to download the app. PWAs must be able to operate without being installed on a device; in that respect, it’s more like a traditional website.
What does a JavaScript service worker do?
Every PWA must utilize a JavaScript service worker. The service worker is a script that stores website data in a cache while the user is browsing. If the internet connection is lost, the service worker can retrieve website data from the cache. This makes a PWA operational even when there’s no web connection.
Let’s say that you’re browsing a PWA on your smartphone. It’s the official website of a music festival you’re going to next month. You’re navigating through the website, viewing pages about the tickets, venue, and parking. Meanwhile, the service worker stores this data in a cache.
Suddenly, your web connection goes out. But, unlike other websites, the PWA is still functional. The service worker pulls the web pages from the cache so you can still browse the website.
Does a PWA have any drawbacks?
The main drawback to PWAs is that they require more battery power than the traditional website that’s visited on a mobile web browser. This has to do with all the extra capabilities that a PWA has, like the interface and the service worker.
The second drawback is that PWAs won’t be able to benefit from app store traffic. Although they’re recognized as apps by search engines, they can’t be downloaded from an app store.
What are some existing PWA’s I can visit?
Of course! PWAs haven’t received widespread use - yet - so they can be difficult to find. After all, PWAs aren’t sold on app stores. They’re simple websites that you download straight from the web browser. A few popular PWAs include:
- Twitter Lite
- Tinder
- Uber
- Trivago
But there are plenty of other PWAs out there. To find them, visit:
View those sites on your mobile device, of course! Hopefully, there will be hundreds if not thousands of new PWAs hitting the web each year. One of them could be your own website.
[1] InfrequentlyNoted.com; Progressive Web Apps: Escaping Tabs Without Losing Our Soul
1560796860815369.jpg)
