11.04.2023

What are Progressive Web Apps?

iteo Technology & Software

What are Progressive Web Apps?

What are Progressive Web Apps (PWA)?
PHP/Angular Developer
image
Imagine an application written in one technology. Available as a web application and having its own version that can be installed and works as a native mobile application of the device. Is the perfect world already available?
What are Progressive Web Apps?

It is a website built with HTML CSS and JavaScript programming languages enhanced with modern APIs.

This allows it to look and behave like a native device application with a single codebase.

Look

Users are used to the appearance of the application. Each device (mobile/tablet/pc) is different in terms of ux/ui, so we have make sure that users feel at home. Responsive Web Design is common in the web world but offline support is something we have to deal with to make our website look like a native mobile application. Once installed, the application runs as a browser but it has a hidden navigation bar, which makes it impossible to see the difference compared to other applications.

Behavior

Installation on the device is the basis. We can install the application from the browser and make it available in the google/apple/microsoft store. This provides us with many possibilities previously available only for native applications. Keyboard shortcuts, normally reserved when launching into a browser, become available. Progressive Web Apps may register to accept content from other applications or be the default application for handling various types of files.

The browser api also provides the ability to use the device’s functions, but I will discuss this topic later.

Technology

Look

PWA apps are supported on the application side in javascript and communicate with the browser api. Frontend frameworks like Angular, React, Vue, etc help you work on behaviors.

Behavior

The browser is very important here (type and version) due to the fact that it supports behaviors to varying degrees. The biggest limitations are on iOS. For example, to add a shortcut to the application there, you need to use safari (there is no such option on chrome) or the app store, but more about it later.

Pros and cons of using PWA

Pros of using PWA

  • It is a website so it can be indexed by search engines (positioned in Google) SEO
  • One application code which gives us easier maintenance, faster development and one technology for web and mobile
  • Updates are the same as a website. You do not have to wait for the acceptance of the store and maintain old versions of the application

Cons of using PWA

  • Slower introduction of technical innovations provided by mobile, e.g. a new feature will come to mobile, and half of the competition with a native app will already have it before it is introduced to PWA
  • High browser and operating system dependency
  • Different functionality support for mobile. Mostly lack of support for many elements in ios
  • There is no official path to adding apps to the apple store
Features

As for January of 2023 we can use:

  • Media capture: Media capture allows apps to use the camera and microphone of a device. After recording a video you can play it, download it or record another one
  • Geolocation: The Geolocation API enables users to share their location with a web app. You will see your current location on a Google Map
  • Web share: The Web Share API invokes the native share mechanism of the device and allows users to share text, URLs or file
  • Web Authentication: Web Authentication API (WebAuthn) enables passwordless authentication through iOS FaceID, your device's fingerprint reader or an external USB Security Key. Register a credential using a button and choose if you would like to authenticate using FaceID, your fingerprint or USB Security Key. After that, you can authenticate using the registered credential
  • Audio recording: This demo captures audio through the device's microphone and enables recording using the MediaRecorder API. It provides real-time frequency analysis and displays the recording audio as a waveform using the Web Audio API. The recorded file can be downloaded or saved to the device's file system using the Native File System API when supported
  • Audio: The Media Session API allows an app to display controls for media playback on a device's lock screen
  • Payment: The Payment Request API provides a browser-based method to enable users to make payments on the web, using a credit card, Apple Pay or Google Pay for example. Safari on iOS currently only supports Apple Pay
  • Sensors: The DeviceOrientationEvent gives information about the physical orientation of the user's device
  • Device motion: The DeviceMotionEvent gives information about the speed of changes for the position and orientation of the user's device
  • Multi touch: On a device with a touch screen, place two fingers in the square to see a red circle appear. Move your fingers to change the size and position of the circle
  • Speech recognition: Speech recognition is part of the Web Speech API and provides the ability to recognize voice context from an audio input

For now there are also some features that are not available at all:

  • Geofencing: The Geofencing API allows authorized Web applications to define geographic areas and receive notifications when the device enters or leaves these areas without the need to periodically query the Geolocation API
  • Native File System: The Native File System API allows apps to access the native file system of a user's device after permission has been granted

Not available for Android:

  • Augmented reality: Augmented reality enables apps to place virtual objects in reality. On a supporting device, tap the image, after which the camera will open and place the objects in the view

Not available for iOS:

  • Notifications: The Notifications API enables web apps to display notifications, even when the app is not active. These notifications can be displayed as a result of receiving a push notification from a server
  • Barcode and QR code reader: The Barcode Detection API detects barcodes and QR codes in images
  • Web Bluetooth API: The Web Bluetooth API enables apps to connect to Bluetooth Low Energy (BLE) devices and read values from or write values to it
  • Contact picker: The Contact Picker API allows apps to select the user's contacts after permission has been granted
  • Vibration: The Vibration API enables web apps to make a mobile device vibrate
  • NFC: The Web NFC API enables web apps to read and write to NFC tags when they are in close proximity to the device, usually 5-10 cm or 2-4 inches
  • Screen Wake Lock: The Screen Wake Lock API enables web apps to prevent devices from dimming or locking the screen when the app needs to keep running
  • Network information: The NetworkInformation API provides information about the connection of a device, allowing web apps to adapt functionality based on network quality
Who uses it?

Uber

As the company expands to new markets, its Uber web was rebuilt from scratch as a PWA to offer a comparable booking experience to the native mobile app. The Uber PWA is designed to make car booking viable on low-speed, 2G networks. Built around the concept of an app-like experience which is accessible on all modern browsers, the PWA is great for riders on low-end devices, which may not be compatible with the native Uber app.

By bringing the native experience in a super-lightweight web app, Uber has enabled quick ride requests regardless of location, network speed, and device. The core app of only 50kB allows it to load within 3 seconds on 2G networks.

Debenhams

Fashion, beauty and home retailer. Leading international multi-channel brand. Over 240 stores across 27 countries.

Goals: Improve mobile customer experience. Accelerate shoppers’ path to purchase

Approach: Partnered with Sapient.Publicis. Built a Progressive Web App (PWA) using the Mobify Platform

Results:

40% increase in mobile revenue

20% increase in conversions

Above-market online growth

Twitter and others

Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their platform-specific desktop experience with a Progressive Web App and saw a 27% increase in return visits.

Suits you?

Whatever we make,  using the right tools for the job is paramount.

I hope I have helped to explain how PWA works. 

Is it a good fit for you? You’re the best person to answer this question. Good luck!


https://iteo.com/blog/post/what-are-progressive-web-apps-pwa/?utm_source=social&utm_medium=professionals_uk&utm_campaign=blog_what_are_progressive_web_apps_pwa
 

  • Web Apps
  • Progressive Web Applications
  • software and app development
  • experienced website designer
  • Software Agency
iteo Web Designer & Developer

Iteo is a digital product studio with a team of 300 on board.

We specialise in custom software solutions, consulting, frontend development, back end development,…

Follow us for more articles and posts direct from professionals on      
  Report
Property

Understanding the Importance and Types of Emergency...

Why Do We Need Emergency Lighting? Emergency lighting plays a critical role in ensuring life safety first in any…
Employment & HR

Labour’s new Employment Rights Bill: challenges employers...

The introduction of Labour’s Employment Rights Bill on 10th October 2024 has created a significant shift in how…

More Articles

Business Management

The Value of a Sustainability Strategy in the Tender Process

In today’s competitive landscape, businesses face increasing pressure to demonstrate their commitment to…
Business Management

Unlocking the Power of Raw Financial Data

At Master of Coin Consulting, we offer independent strategic finance advice to help micro to medium-sized businesses…

Would you like to promote an article ?

Post articles and opinions on Professionals UK to attract new clients and referrals. Feature in newsletters.
Join for free today and upload your articles for new contacts to read and enquire further.