Progressive Web Apps

Progressive Web App (PWA) is a web application designed to provide the best user experience on mobile devices - similar to native applications.Progressive web apps allow us to bring a native-like experience to our web apps.

PWA can work without an Internet connection, and also do not require work in a web browser. From the user's point of view, they do not differ in the use of anything from any other launched application. Application developers can now write one product that will work on Chrome OS, Android, iOS and Windows. Regardless of whether we are talking about phones, tablets, desktops or game consoles. The problem of economical profitability of writing a given application to one or the other ecosystem disappears. It just will work.

Why an app?

Some of the most-common features of such applications:

  • fast and responsive - a lot depends on the skills of programmers, frameworks we use, etc.
  • using encrypted communication - the Let's Encrypt project allows you to generate free SSL certificates
  • the ability to add to the "home screen"
  • push notifications
  • short charging time

Each PWA must have several specific characteristics. Here is a list of features needed to be able to specify a page as a Progressive Web App:

  • It is independent of the browser. The application must work for every user, regardless of what they are displaying.
  • It is safe. Each PWA must use the HTTPS protocol to ensure secure data transmission.
  • It's responsive. The site must be friendly to mobile devices, act quickly and pass between specific elements without any problems. If it is not possible to display the whole page in a short time, a placeholder must appear while it is loading.
  • The page URL loads even when the device is offline. That's right. The application must use the so-called "service workers" to be able to save parts of the page and run them independently of the connection.
  • Be able to display to the user a notification that will allow him to add it to the home screen of his device.
  • Load quickly. During the first opening, the site should become interactive in less than 10 seconds on a device connected to the 3G network (naturally it should be even faster on newer versions).
  • Each page has a URL that can be reached directly after opening it in a new browser window.

For programmers, the common code-base will be an undoubted plus. With PWA, we're actually creating one application that runs on all platforms (Desktop, iOS, Android etc.)

How does it work?

  • Progressive enhancement
  • Responsive
  • Served over HTTPS
  • Has a Web App Manifest
  • Uses a Service Worker
  • The Web App Manifest is a simple file in the JSON format describing the basic elements of the application that will be used to install our application on the user's home screen. In the manifest we declare the name of the application, icons, the way of displaying the application and many more.

What’s a Web App Manifest?

  • JSON file
  • Provides metadata about an application
  • Contains settings for the app like experience of your PWA

A very important component of the PWA application is Service Worker, who is responsible for saving application files to Cache Storage.
Service Worker (SW) is a script running in the background and works independently of the scripts posted on the site. Its operation is similar to a proxy server. It intercepts queries sent from the application to the server, can store them in the cache memory, synchronizes the application state with the server status and sends push notifications to the user. Once the file has been downloaded by the browser, the Service Worker saves it to the cache to use it in the future when the user will not have connection to the network.

What does a service worker do?

  • Intercept network requests
  • Cache resources
  • Retrieve resources
  • Deliver push notifications

Vice President of Product Management for Google Chrome, Rahul Roy-Chowdhury said: "We're working hard at Google to improve the way the network works today and build better internet in the future. As a result of these activities, we are entering a new era of web development that leads to innovative technologies such as AMP and PWA. "

PWA or mobile application

Both solutions have their own unique features and typical defects, so you have to think about what you want to achieve and adapt the solution to that. You want to create a portal with news - PWA is the perfect choice. However, if you want to build an interactive solution that communicates with other devices and applications - you will have to bet on a traditional mobile application.

Of course, PWA is not ideal, otherwise everyone would prepare one cross-platform application. First of all, unlike native applications, Progressive Web Apps does not support communication standards like NFC or Bluetooth. PWA will also not extract from the device a lot of data about the user - phone number, contacts or information about other applications - and these are data very desirable by marketers, allowing for better understanding and segmentation of clients.

Standard Progressive Web App is the future of using the Internet on mobile devices. Due to the speed, reliability and ability to engage users, it is definitely worth replacing the current mobile site with a progressive application. The results obtained by companies that have already implemented this technology show that it is also a profitable decision. The ease of PWA installation can make us persuade users to download it, who for some reasons (eg lack of space in the phone's memory) were not inclined to download the native application.

https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

results matching ""

    No results matching ""