You want to make your website available offline?

Then progressive Web Apps could be something for you!

Have you ever wanted to browse your favorite web shop during a long flight, but you weren’t able to do so because you didn't have internet? We have the solution for this problem with the latest web technologies.  

In the next few minutes, I'd like to introduce you to the basic concept of Progressive Web Apps, including all their advantages and disadvantages. And maybe after reading this blog you consider to equip your website with these  technologies.

What are PWAs?

Progressive Web Apps are web applications which are combining not only the benefits of a native app but also those of a responsive website. They feel like ordinary appsusing almost the same features and are available offline as well as on slow internet connections. Everything we expect from ordinary apps can be achieved through a normal website (via Chrome, Edge, Firefox, etc.) thanks to modern technologies.

Character

But what distinguishes a PWA?

Responsive: Whether laptops, tablets, televisions, mobile phones or any other monitor with a browser, PWAs work on any device. It adapts to a vessel like a liquid.

© www.giphy.com

Linkable: Share the apps? Nothing is easier than that – you just copy the URL and send it.

Visibility: PWAs are easier to market than mobile apps. Since they are essentially normal web pages, they are also to be found in search engines. So you can also use our tips from «SEO with Pimcore». At the moment they are only available in the Google Play Store and hopefully soon in the App Store too.

Reliable: Like all common mobile applications, the PWAs can be used offline or with a bad connection.

Progressive: On old browsers and devices they run as usual and on the newest ones the functions are fully used.

Captivating: You can lure the user back to the website with push notifications generated by you. This feature currently only runs on Android devices.

Secure: The connection between you and the app is protected against third parties trying to gain access to your data.

Benefits

Updates are a thing of the past as Progressive Web Apps are automatically updated. Not only does this save time to keep apps up to date, but PWAs also use up to 92% less disk space.

And then there's the app fatigue. Smartphone users have already installed the apps they frequently use. The app store is rarely called and therefore hardly any new apps are installed. PWAs do not have to be searched for in the store. Search engines can be used to easily find the page you are looking for. Then you can create a link on the smartphone home screen with just one click. Now the website can now be opened like a native app. You can then add it to your home page with a single click.

The development costs, compared to the development of two native apps for iOS and Android, are much lower. Of course, this depends on the size of the website. 

The costs for an «offline-availability» of a small landing page will obviously cost less than that of a complete webshop.

© www.giphy.com

Constraints

Now all this now sounds like every customer's dream come true, but unfortunately I have to disappoint you. Like everywhere else, there is a downside.

Not all the features we know from ordinary apps can be used by PWAs. For example they don't have access to the contact list or can't send SMS messages. Fortunately, many of these functions are rarely used.

And unfortunately there is also a spoilsport here. In this case it is Apple. IOS and Apples browser Safari are just supporting some of the functions. For example, push notifications, background synchronization and Bluetooth are not available. Luckily they are also making progress and will hopefully jump on the PWA bandwagon soon. The list of supported functions could be extended considerably.

What now?

You have now received some information about what PWAs can and cannot do. The main purpose of PWAs is to improve the user experience. This can be done in many different ways. To give you a better idea, I would like to give you three examples of developed and successful PWAs. They all differ a little in their implementation.

From the bottom up

If you are already thinking about a new website, now is the perfect opportunity to get started.

One example is AliExpress. Almost a year ago you decided to convert your webshop into a PWA. Before that, you tried a normal website optimized for mobile use. This went through the pants due to a bad user experience.

They decided to invest in a cross-browser Progressive Web App. The decision greatly improved the web shop's usability.

  • 104% increase in conversions for new users
  • 2 times more pages visited per session.
  • 74% increase in session duration per session.

A simple version

Another variant is to design a simpler version of the website or to provide a core function (news area, calculator) as a PWA. 

Continental created its own corporate magazine on the mobility of the future. Thus, they were also able to catapult the website a bit into the future. The news can be read offline and push notifications allow them to draw the user's attention to new contributions and therefore increase the number of visitors.

A single function

The user experience can be significantly improved with just a few functions. This is the perfect solution for larger companies that don't want to rebuild a complete page.

One example is «The Weather Company». They have decided to make the most effective feature available offline for them and their customers.

With their push notifications the user has the abilitiy to see the weather from several subscribed locations directly on the start screen of their device. Just as normal apps already do.

The impressive thing? They started with over 60 languages and had over 1 million opt-ins in the first three months.

Conclusion

Progressive Web Apps offer many advantages. But one of them stands out the most in my opinion. To provide the customer with the best possible web experience, whether with push notifications or offline functionality.

However, you have to keep in mind that the use of PWAs still has some limitations. Apple is still not a friend of it and is lagging behind.

Whether you choose a Progressive Web App or stay within the common apps is up to you. But the examples are showing that it can be worth it if you dare to implement a PWA.

If you're still not convinced and want to read more PWAs success stories, check out pwa.rocks or pwa.bar for more examples.

Do you have any suggestions or questions? I will be happy to provide you with more information in the comments.

Your Comment

Whether constructive criticism, questions due to ambiguities or simply a few words of praise – we thank you already for your comment. After a short check we will publish it.

Share

    Back to all blog posts

    General Data Protection Regulation of the EU