What is a PWA?
A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.
PWA features narrow the gap between user experience in web-based and native applications.
Since a progressive web app is a type of webpage or website known as a web application, they do not require separate bundling or distribution.
Your PWA Specifications
Key Features
Offline Analytics
So you’ve got a progressive web app, complete with a service worker that allows it to work offline. You’ve also got existing Google Analytics set up for your web app, and you don’t want to miss out on any analytical insights coming from usage that occurs while offline.
But if you try to send data to Google Analytics while offline, those requests will fail and the data will be lost. It’s adding code to your service worker to store Google Analytics requests and retry them later when there’s hopefully a network available.
Web App Manifest Display Modes
Display mode decides what browser UI is shown for your web app. The choice of the display mode depends on your app, and this article when help you understand the difference between each of them.
There can be four display modes:
- Standalone
- Fullscreen
- Minimal-UI
- Browser
Standalone Display Mode
This is the default setting of SuperPWA. In this display type, the web app looks and feels like a native app.
- The web app runs in its own window separate from the browser.
- The browser UI elements like the address bar and navigation are hidden.
- The status bar of Android UI which shows the battery percentage etc. are still visible.
Fullscreen Display Mode
If you want your web app to use the entire screen, this is the mode you need. As the name implies, your web app will open in full screen.
- The entire display area is used by the app.
- Browser UI elements like address bar and navigation are hidden.
- Android status bar is also hidden.
Minimal-UI Display Mode
In the minimal-UI display type, the web app will appear more or less like the “Standalone” mode, but some browser UI is retained.
What is retained, will depend on the browser. For example, in Chrome, the address bar is displayed, but it cannot be typed into and the browser menu is available for navigation.
- “Standalone” mode + some browser UI elements.
- User experience varies across browsers.
Browser Display Mode
If you choose “Browser” as the display type, your web app will behave like a bookmark and the standard browser experience will be retained. Using the Browser display mode will prevent the “Add to Home Screen” notice from appearing.
- All browser UI is retained.
- The Add to Home Screen Notice is never displayed.