Progressive Web Apps are Web Applications, which meet the technical requirements defined in the official Checklist you can find here. Even tough they are Web Apps, they behave and feel like a native app, because they have implemented features like:

  • Usable when offline
  • Service Worker
  • Shows install prompts
  • Can be added to the home screen
  • Sends Push Notifications
Fast loading

The basis of PWA are fast loading times. Specifically: loading time for the first visit should be <10s, even on a 3G network. This can be achieved by optimizing the webpage or with tools like AMP, which can help to reduce the page loading time to 3s. In order to test, if your website verifies as fast enough, you can check it with the Chrome extension “Lighthouse” in the Developer Console.

The PageSpeed Insight Tool can help you to recognize what is to improve and what steps you can take to a better performance.

The Lighthouse Tool can run an overall performance test on your web app. Lighthouse generates an extensive Report for you, including PWA, SEO and Accessibility.

Usable when offline

The most significant factor of PWA is that they can be accessed and used while being offline. This is achieved with the Service Worker, which will download the page in the background. When the user now visits the page again while not being connected to the internet, he can still view and interact with it.

The Service Worker

A Service Worker is a programmable network proxy that lets you control how network requests from your page are handled. With a Service Worker, you can do the following:

  • Using the Fetch API, so we can serve resources from the cache when the user is offline
  • With the Push API we can display the Push
  • Notifications to the user
  • Background Sync API to send data when online, but saved in the PWA when offline
Installation prompts

It’s nice to be able to use a page when being offline, but no one types in a URL when being offline – because users are simply not used to that. That’s why they should be able to install the app – and that’s what they can do.

With the installation prompt, they can download the app for offline usage and the app icon will be added to the Home Screen – just like a native app.

Installation
  • Downloads content page
  • Prompts user to install the app and to add it to the home screen
  • If the user installs it, the app icon will be added to the Home Screen
Launches from the home screen

To make the Web App feel truly native, the Home Screen Icon is a Must. Combined with the Launch screen, this is what sets it apart from websites.

Push notifications

Push notifications are the one helpful tool to get people’s attention.

If you are interested to learn more about the topic, read our second article about Progressive Web Applications.

News from ERNI

In our newsroom, you find all our articles, blogs and series entries in one place.

> Load more

ERNI Schweiz

Casinoplatz 2

3011 Bern

Phone: +41 58 268 12 00

Email: [email protected]

ERNI Suisse

Bâtiment L

Route des Acacias 43

1227 Geneva

Phone: +41 58 268 11 03

Email: [email protected]

ERNI Suisse

Voie du Chariot 3

1003 Lausanne

Phone: +41 58 268 11 03

Email: [email protected]

ERNI Schweiz

Brünigstrasse 18

6005 Lucerne

Phone: +41 58 268 11 03

Email: [email protected]

ERNI Schweiz

Geschäftshaus Airgate

Thurgauerstrasse 40

8050 Zürich

Phone: +41 58 268 12 00

Email: [email protected]

ERNI Deutschland

Trakehner Str. 7-9

60487 Frankfurt am Main

Phone: +49 69 79 53 28 01

Email: [email protected]

ERNI Deutschland

Design Offices München – Arnulfpark

Luise-Ullrich-Str. 20

80636 München

Phone: +49 89 55 06 28 208

Email: [email protected]

ERNI Slovakia

Ševčenkova 34

851 01 Bratislava

Phone: +421 2 32 55 37 37

Email: [email protected]

ERNI España

Edificio El Triangle

Plaça Catalunya 1-4, 3º planta, Módulo A y B

08002 Barcelona

Phone: +34 93 667 77 76

Email: [email protected]

ERNI España

Carrer Pallars, 208, Bajos

08005 Barcelona

Phone: +34 93 667 77 76

Email: [email protected]

ERNI España

Calle de Alfonso XII 62

Oficina 3101

28014 Madrid

Phone: +34 901 848 787

Email: [email protected]

ERNI España

Sant Cugat ERNI Office

Plaça Xavier Cugat, 2 EDIF B Planta Baja

08174 Sant Cugat del Vallès

Phone: +34 93 667 77 76

Email: [email protected]

ERNI Romania

Calea Dorobantilor no. 98-100

3rd floor, in Olimpia Business Center

400609 Cluj-Napoca

Phone: +40 744 319 228

Email: [email protected]

ERNI Singapore

7 Straits View

Marina One East Tower #05-01

Singapore 018936

Phone: +65 9161 9863

Email: [email protected]

ERNI Philippines

9th Floor, 500 Shaw Zentrum Building

500 Shaw Boulevard

Mandaluyong City, Philippines 1555

Phone: +63 2 531 59 82

Email: [email protected]