Progressive web app

from Wikipedia, the free encyclopedia
Progressive web app

Progressive Web Apps Logo.svg
Basic data

Publishing year around 2015
Execution environment Web browser
programming language JavaScript , JSON

A Progressive Web App ( PWA ) is a website that has many features that were previously reserved for native apps . It can therefore also be described as a symbiosis of a responsive website and an app . Progressive web apps can be created like a website with HTML5 , CSS3 and JavaScript . In addition, so-called serve ServiceWorker through optimized caching the offline functionalities. For communications between Web client and Web server that is HTTPS protocol prescribed.

More and more people are using the smartphone to access the internet . In Germany, the proportion of internet users via smartphones already affected around 69% of all internet users in 2014. So far, the problem for website operators has been that both a responsive or mobile website and a native app had to be developed if they wanted to assert themselves on the market. A PWA should make the double development superfluous, since it can be called up like a website via URL and at the same time provides offline functionalities.

Term / definition

The term “Progressive Web App” is partly made up of the Web Apps (dt. Web applications), which are developed with the help of the web technologies HTML , CSS and JavaScript . The other part results from the concept of progressive enhancement , which was introduced in 2003 by Steven Champeon. This is a method for developing websites that requires that the basic functions of a web application can be run in any browser. Novel functions should only be used to improve the user experience if they are supported by the browser. This procedure is necessary because Progressive Web Apps etc. a. with service worker techniques that only work in modern browsers.

The following definition summarizes all relevant properties of progressive web apps:

"Progressive web apps are responsive web applications transmitted via HTTPS, which use the capabilities of the browser for progressive improvement according to the principle of progressive enhancement, whereby offline functionality via service workers, an installation based on a web app manifest and push notifications create a reliable, motivating and native user experience is guaranteed. "

functionality

A progressive web app is started by e.g. B. enters the URL of the web server in the browser and sends the first request . The web server receives the request and forwards it to the PWA, which here functions as a web application . This generates or loads the HTML source code of a website, which is sent back from the web server to the user's browser (HTTPS response).

The user sees a website that is adapted to his device due to the responsive design . Although the Progressive Web App was accessed via a URL, the user can drag an icon onto the screen of the smartphone or receive push notifications and also use the page offline. The technology based on progressive enhancement is intended to offer users the best possible user experience , depending on the device used .

Technically, this is implemented with HTML5, CSS3, JavaScript, Service Worker and optionally a framework such as Angular or a library such as Polymer . Access to the native file system or the address book is only possible with Progressive Web Apps in test versions such as Google Chromium .

Service worker

A service worker is a piece of JavaScript that a web browser executes in the background. It provides essential functions for progressive web apps such as caching for offline use. Once accessed online, content can be displayed the next time you visit the site without an internet connection (offline operation). Push notifications known from native apps are also possible with service workers. Service workers are specially programmed, registered in the JavaScript of the site and installed. Service workers require HTTPS, which is why every Progressive Web App runs with HTTPS. Numerous frameworks, such as B. Angular with the Mobile Toolkit, provide service workers so that you do not have to develop them yourself.

App shell

App Shell (or Application Shell) is the minimal HTML, CSS and Java Script that is required for the correct running of the user interface of the progressive app. The first shell load should be extremely fast and cached immediately. This means that the shell files are loaded once over the network and later saved in a local repository. Each time the app is opened again, the shell should load it very quickly from the cache.

The architecture of the application shell separates the core of the application infrastructure and the user interface from the data. The user interface and infrastructure are cached locally using the service worker; any other loading of the app only loads the required data instead of all data.

The purpose of the application shell is similar to uploading an app package to the app store when developing a native app.

Characteristic

In addition to their properties as websites, progressive web apps provide many special functions that were previously only known from native apps.

Add-To-Homescreen / Installability

A progressive web app can be installed via "Add-To-Homescreen". The manifest file is used to e.g. B. to create a splash screen with an icon.

Either a notification that the device is ready for installation (on mobile devices) appears in the browser or an installation function appears in the browser menu or the URL line.

Push notifications

Push notifications are also known from native apps. Operators of the Progressive Web App can use it to draw users' attention to promotions , discounts or events, for example , and thus increase the interaction rate .

Offline functionality

With the service worker caching function, content that has been called up is also available offline . This feature is also reminiscent of native apps that do not require an internet connection . Progressive web apps consistently take an offline-first approach.

Advantages of Progressive Web Apps

Cost reduction

Instead of implementing for Android, iOS, Windows and the web, only the PWA needs to be developed. In contrast to apps, Google and Apple do not earn money from in-app purchases.

App-like design

The user experience and the interaction patterns of a PWA can be recreated using native apps and thus create the same user experience.

Hardware access

PWAs also offer the possibility of implementing various native functions. Sensor data and cameras can be accessed or push notifications can be created.

Simplified publication

PWAs can be in the Google Play Store, but they don't have to go through the lengthy publishing process of Google Play, Windows Phone Apps or Apple's App Store.

Offline mode

With the help of service workers, a PWA works offline, which can potentially increase customer retention and retention rates.

Improved performance

PWAs are faster than common web apps. Conversions, user experience and retention rates benefit from this.

Web traffic can be used.

They can be linked and can benefit from search engine optimization.

support

Full support for Progressive Web Apps is currently only available with pre-release versions. Chrome and Firefox are fully compatible, there are positive signals from Safari and Microsoft Edge will also use Google's Chrome modules in the future. Offline functionality has been available on iOS since version 11.3 implemented Service Worker and the web app manifest in Safari 11.1.

Since PWAs rely on progressive enhancement , they can also be used in browsers that do not support the service worker technology; only then an internet connection is necessary.

Examples

Successful Progressive Web Apps were published by the Washington Post , Flipkart and Booking.com. Flipkart is often used as a showcase, as the Indian online shop was able to achieve a 70% increase in conversion rate and three times the time spent on the pages . The number refers to the users who used the Add-To-Homescreen function. The existing Progressive Web Apps also include Twitter and Trivago .

Online directories

Since there are no official stores for the PWAs such as the App Store or Google Play , there are some online directories that list these apps.

The largest directory of Progressive Web Apps that lists all PWAs that can be installed is findPWA (400+ Apps, 01.2020). Other directories such as pwa.bar or Appscope also list apps that are only web apps.

literature

  • Tal Ater: Building Progressive Web Apps: Bringing the power of native to the browser . O'Reilly, Sebastopol 2017, ISBN 978-1-4919-6165-0 .
  • Christian Liebel: Progressive Web Apps: The Practice Book . 1st edition. Rheinwerk Verlag, Bonn 2019, ISBN 978-3-8362-6494-5 .

Web links

Individual evidence

  1. ↑ Christian Liebel: Progressive Web Apps, Part 1: The Web is becoming (more) native. Retrieved October 30, 2017 .
  2. ↑ Mobile Internet users - share in Germany 2014. In: Statista. Retrieved June 23, 2016 .
  3. ↑ Steven Champeon: Progressive Enhancement and the Future of Web Design . 2003.
  4. ↑ Kevin Frank: Creation and evaluation of a guide for the use of Progressive Web Apps . December 20, 2018, p. 16 , urn : nbn: de: kobv: 522-opus4-21937 ( kobv.de ).
  5. ↑ Christian Liebel: Google Project Fugu: Die Macht des Kugelfisch. In: heise.de. Retrieved December 19, 2018 .
  6. ↑ Introduction to Service Worker: How to use Service Worker. In: HTML5 Rocks. Retrieved June 23, 2016 .
  7. ↑ Why you should develop progressive web applications. In: Ackee Blog. January 8, 2020, accessed on May 11, 2020 (German).
  8. ↑ a b c d e f g Progressive Web App. In: GoingMeta.io. Accessed April 14, 2020 (German).
  9. ↑ Is ServiceWorker ready? In: jakearchibald.github.io. Retrieved June 24, 2016 .
  10. ↑ Christian Liebel: iOS 11.3: Welcome, Progressive Web Apps! Retrieved on February 15, 2018 (German).
  11. ↑ The Washington Post introduces new Progressive Web App experience (washingtonpost.com, May 19, 2016, accessed June 25, 2016)
  12. ↑ Progressive Web App: A New Way to Experience Mobile ( Memento from June 23, 2016 in the Internet Archive ) (tech-blog.flipkart.net from November 9, 2015, accessed on June 25, 2016)
  13. ↑ Progressive Web Apps with Service Workers (booking.com April 21, 2016, accessed June 25, 2016)
  14. ↑ developers.google.com
  15. ^ Farin Heinje: About - findPWA - Directory for Progressive Web Apps. Retrieved January 12, 2020 .