Find out your personal offer in 2 minutes and get 10% discount

Use the Videobakers price calculator to get your quote directly online.

Start now
blog preview

22 Februar 2020

Progressive Web Applications (PWA) Revolutionize Apps

The discussions start even before the first line of code. Should a native app or a web app be developed? PWA should make the decision easier.

author avatar

Simon Ludwig

Native apps are tempting because they offer full access to system resources like NFC, Bluetooth, Wi-Fi, etc. Offline capability is also a huge advantage. Especially the "super well developed" German mobile network puts users of a website to a test of patience.

System resources and offline capability sound tempting, don't they? Then read on, because there's nothing free. This rule also applies in the world of software development.

Because even though the smartphone market is dominated by only two operating systems now, developing native apps is much more time-consuming than developing a website. The problems start with the choice of framework. Do I use React Native or IONIC? And what is this flutter anyway?

It continues with the development environment. You want to develop your app for IOS? Then you need an OSX development environment. Continuous integration and certificate handling are a few more buzzwords that make life difficult for us software developers with native apps.

Mobile First - Progressive Web App to the rescue

A long awaited alternative to native apps are website that behave similarly to native apps. The user should hardly notice that it is a website right now. Rather, the website should act like a real app. Progressive web apps try to address exactly this and promise solutions to some of the problems.

Advantages for the operator

Easy development through well-known programming languages

Javascript, HTML, CSS - Thats It. That's all you need to create a working PWA. But hand on heart, in times of Typescript, Less, Webpack and co. hardly anyone develops in pure Javascript and co.

Shoutouts here go to Preact, who make it extremely easy to develop a Progressive Web Application. It would go beyond the scope of this post to go into detail here.

More information about Preact

22

.

Preact Logo

Preact Logo

Continuous Integration (CI) Pipeline - Easy

Compared to developing a native app, setting up a Continuous Integration pipeline for a website is a breeze. Whether it's Bitbucket, GitLab, or Codrops. A detailed explanation of how you set up a Continuous Integration pipeline is beyond the scope, so we recommend this

post on setting up a CI pipeline

24

.

Fast iteration cycles

Fast iteration cycles are a boon for users and operators. Bugs need to be fixed quickly, new features should be delivered and tested as soon as possible. With a good PWA and a good

CI pipeline

26

nothing stands in the way of this.

Build Once run everywhere

The PWA offers another advantage. Because not only mobile devices benefit from the features. Google Chrome, Firefox and Co implement the standard like their counterparts on the mobile device.

Advantages for the user

Offline capability

Probably the most attractive plus point of a PWA is the offline capability. You heard me right. A website that works without the internet. The only operation: you must have visited the site once before.

For example, if you visit a website in the evening and are on the train the next day, without stable internet, you will be able to visit the website without internet access at all. Provided of course that the software developer of the website has developed the software correctly.

Service workers are responsible for the offline mode. Service Worker](https://blog.sessionstack.com/how-javascript-works-service-workers-their-life-cycle-and-use-cases-52b19ad98b58?gi=520cc0eba2aa) check if there is a network connection. If there is a network connection, the service worker downloads the file from the server. However, if there is no network connection, the service worker checks if the requested resource is available in the cache and delivers it.

App icon on the homescreen

A great advantage of an app, is the icon on the homescreen. Because the user may see it every day and visit your app more often. Progressive web applications also offer the possibility to place an app icon on the homescreen. Once the user visits the website, they are asked if they want to 'install' the app. Quite simply, a link is placed on the home screen.

Push Notifications

PWAs allow users to easily view push notifications. However, caution is advised here from a user experience perspective, as notifications are not always accepted with thanks.

Disadvantages

This all sounds very good, but unfortunately we haven't found the Holy Grail of app development yet. At least not yet. Although PWAs will probably replace a lot of native apps, there are some use cases where a native app is indispensable.

Access to system resources

Need access to operating system interfaces, like NFC? Currently, there's no way around a native app, unfortunately. But here too, salvation is on the way. In the near future, it will probably be possible to access some of the system resources (Bluetooth, NFC, etc.) from a website. You can find more information about that here:

WhatWebCanDo

29

App store

You want to see your app in the App Store? Again, there's no way around a native app then. Too bad.

Conclusion

Ultimately, it can be said that both native apps and for PWA currently have a raison d'être. The pros and cons of the technologies should be weighed carefully. Progressive web apps pave the way to unified software development.

Aktuelle Blogbeiträge

Aktuelle Blogbeiträge

blog preview

22 Oktober 2020

The right explanatory video speaker for your project

author avatar

Simon Ludwig

blog preview

18 Oktober 2020

Explainer video prices - Is it really cheap?

author avatar

Simon Ludwig

blog preview

9 Oktober 2020

In 5 steps to a unique explanatory video

author avatar

Simon Ludwig

blog preview

22 Februar 2020

Progressive Web Applications (PWA) Revolutionize Apps

author avatar

Simon Ludwig

blog preview

18 Oktober 2020

The optimal video format for social media platforms

author avatar

Simon Ludwig

blog preview

21 Februar 2020

The 10 best explainer video tools for explainer videos

author avatar

Simon Ludwig

blog preview

21 Februar 2020

Increase sales and higher conversion rates with video

author avatar

Simon Ludwig

blog preview

20 Oktober 2020

Project diary: Rent deposit account with Mietwise

author avatar

Simon Ludwig

blog preview

4 Dezember 2020

The Whiteboard Video - simple, but with Oho effect!

author avatar

Simon Ludwig