What are Progressive Web Apps?
This allows it to look and behave like a native device application with a single codebase.
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.
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.
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
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?
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.
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
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.
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!