insanelab.com insanelab.com

April 25, 2018 - Web development

Progressive Web Apps (PWAs) Make Their Way to iOS and Nothing Can Stop You Now

These days, we live by our phones and die by our phones. We spend countless hours looking at a pocket-sized screen. This wasn’t the case in the era of loud dial-up modems and ugly, one-inch antennas protruding from our devices. One thing that remains unchanged is that we still consume a lot—even more than we used to. The way we consume, however, has changed a ton. So, the business had to adapt.

Mobile-first had already become a thing a few years ago. We design websites following responsive web design, we implement Accelerated Mobile Pages, and finally, we develop mobile apps—all for consumers’ comfort, all for lower bounce rates and more conversions.

A considerable amount of time before the App Store came to life, Steve Jobs had announced a solution for mobile user engagement that only a few years later would gain some traction—not just among consumers, but, more importantly, among Apple’s developers and managers too.

As Apple shifted its focus to the App Store and native mobile apps, the idea was sidetracked for thousands of days. The solution would have been forgotten, if it wasn’t for Google, which a couple of years ago coined the name Progressive Web App (PWA).

Progressive Web Apps have since only increased in popularity. This paved the way for Apple to finally make use of its own invention, as the Cupertino-based company announced a few days ago. Or did they?

How Is a PWA Different from a Native App or a Mobile Page?

Before we get to Apple’s latest announcement, let’s make sure you’re up to speed with the technology that’s become so popular over the last couple of years.

A Progressive Web Application is an app that you don’t install on your device. To get it, you simply tap the “Add to Home Screen” button when browsing a web page.

“Isn’t that just a shortcut to the website?” – you would ask, probably.

No, it’s actually way more than a shortcut.

iOS users may be surprised to find out that, for some time already, websites have been serving Android users a mobile app under the tap of the “Add to Home Screen” button. It’s a web app designed in the most mobile-friendly way possible. Its goal is to make the service even more accessible to mobile users than a mobile page would. Ideally, it also has all the features that a native app, downloaded from an app marketplace, would have. We’re talking stuff like push notifications and background synchronization.

It’s not easy to choose between a PWA and a native app. In this article, we try to solve the challenge for you. 

What separates a PWA from a mobile page is also the need to be connected to the Internet—or actually the lack of such requirement. Like it is the case with native apps, PWAs are able to store data in the cache, so pretty much every piece of data that the app has downloaded during your last session will still be there, even if you come back without an Internet connection.

Finally, using Progressive Web Apps gives you a native-like experience. Even though you’re basically still browsing the web, you can explore PWAs without the mobile browser’s HUD overlaying the app.

iOS 11.3. Where WebClip Meets PWA

iPhone X

As mentioned earlier, Apple has finally caught up with Google when it comes to the technology it basically created, envisioning PWAs as the solution for mobile apps.

Why did it take Apple more than 10 years to evolve this idea, and about three years to catch up with Google? It can be argued that it was a smart business decision to focus on the App Store, a marketplace that brought in a steady stream of money. Progressive Web Apps bypass the App Store but give users a similar product, so the technology may be considered a rival to Apple’s idea for getting apps.

Speaking from a tech perspective, Apple didn’t support the Service Worker API, which is responsible for storing data in the cache, background sync and push notifications. The newly introduced iOS update, version 11.3, is responsible for the past tense in the previous sentence. Interestingly enough, Apple hasn’t announced the Service Worker support since releasing the newest iOS.

So you’re telling me that iPhone finally supports PWAs, and Apple didn’t boast about it?

I am. Well, to some extent.

Digging through the files revealed that Apple’s version of a PWA is called WebClip. Unfortunately, WebClip is not yet a match for the PWAs known from Android. The biggest differences between the two are the lack of push notifications on iOS and no banners notifying users of a PWA’s availability in Safari.

Additionally, WebClips don’t integrate with Siri and some other iPhone features like FaceID, TouchID or Bluetooth. They can, however, take advantage of geolocation, camera or Apple Pay.

Even though Apple’s take on Progressive Web Apps seems quite incomplete, and maybe even disappointing, we shouldn’t be discouraged. The lack of publicity regarding this feature or even a mention in the update documentation may mean that Apple has only just begun the implementation of PWA. It will certainly be interesting to see what Apple does with it from now on.

For what it’s worth, we can finally put our hands on Progressive Web Apps on iOS, and future updates may expand their functionality.

Why would you want to ride the PWA wave, though? Take your pick.

How Does a PWA Improve Your Business?

The Washington Post PWA Case Study. You can find the document at developers.google.com / Google

Progressive Web Apps, even if new, already have a proven track record of bumping significant business metrics. The web is full of PWA case studies, like the one from The Washington Post, which you can sum up with phrases like longer time spent in the app, higher conversion rate, lower bounce rate, or higher engagement.

There are a few more factors worth mentioning. For starters, the reach. PWAs are designed for all platforms at once, so you can reach your customers no matter whether they use iPhones or Android phones.

Then, there’s the SEO. Google is all in on factoring mobile friendliness and page speed when it comes to determining the SERP. Even though having a PWA is not yet confirmed to be a factor, something tells us that it will eventually. PWAs are speedy, so it makes sense to use them for better SEO.

Finally, it is believed that each additional step separating a customer from your service will throw off about 20% of your potential customers. PWAs bypass installation, so there’s one step already. Overall, they make consumers’ lives easier when it comes to connecting with you.

If you’re wondering about PWA’s adoption – just check out pwa.rocks for a variety of examples from well-known brands.

Progressive Web App. Why Should I Get One Now?

There’s no denying that PWAs still leave some to be desired. The technology is simply not yet developed as much as native apps are, not to mention Apple is only just starting to implement them in iOS.

As of now, developers don’t have as much of a freedom when designing a PWA like they do with native apps for iOS or Android.

Furthermore, PWAs’ integration with devices’ hardware features is still hit or miss. The lack of cooperation with mobile accessories is certainly another limitation for the developers.

With that said, though, Progressive Web Apps as they are have already proven to be effective. They are lightweight, so consumers don’t have any roadblocks to obtain them, and they don’t come at a steep price for those interested in implementing them.

That’s because PWAs utilize just one code base for all devices, meaning that you don’t have to develop them separately for iOS and Android or desktop, like you do with native apps. The necessity of developing an app separately for different operating systems significantly increases the costs, as well as the time needed to create it.

PWA on iOS: What You Need to Know

  • Support for PWAs on iOS is still in beta – but it’s finally there
  • The app can store as much as 50 MB of offline files
  • For now, there’s no access to Bluetooth, Touch and Face ID, ARKit, and Beacons
  • BUT! Apps can access geolocations, magnetometer, accelerometer, gyroscope, camera, audio output, speech synthesis, Apple Pay, and more

Moreover, whenever you need to update a native app, you’re faced with a long process. We’re not even talking about the iterations of an app, and the development process itself, but about the reviewing process.

Before consumers can get their hands on the upgrades, the App Store/Google Play have to approve it, and even this doesn’t guarantee the users get an update, as in most cases they have to find the update and apply it themselves.

How does this process look with PWAs? Well, you update the files, and the next time a user launches the app, they get to use the newest iteration. That’s it.

Gone are the days of running App Store expeditions to find an interesting app. You already know which apps you need, and that’s what you download. That’s why the popularity of native apps is decreasing, and why we predict the PWAs will get even more popular.

Sounds like a reason to get one.

What is your challenge?

Tell us with any means provided. We'd love to hear from you!