- HOME
- PROFILE
- GLOBAL THEMES
- SOLUTIONS
- INDUSTRIES
- PRODUCTS
- Hidden Menu
- Brand Overview
- Services Overview
- E-SPIN Product Line Card
- E-SPIN Ecosystem World Solution Portfolio Overview
- GitLab (DevOps, DevSecOps, VSM)
- Hex-Rays (IDA Pro, Hex-Rays Decompiler)
- Immunity (Canvas, Silica, Innuendo)
- Parasoft (automated software testing, AppSec)
- Tenable (Enterprise Vulnerability Management)
- Veracode (Application Security Testing)
- Cybersecurity, App Lifecycle, AppSec Management
- Infrastructure, Network, Wireless, Cloud Management
- Platform products
- Hidden Menu
- e-STORE
- CAREERS
- BLOG / NEWS
- CONTACT
Progressive Web Application (PWA)
First introduced by Google in 2015. A progressive web app (PWA) is the set of mobile web application development techniques that entails building apps that feel and look like native ones. Using a web stack (JS, HTML, and CSS), progressive web apps combine a rich functionality and smooth user experience associated with native apps.
Since then, web developers is active in leverage PWA to develop single web application that can be cross web, mobile and desktop environments platform, that offer various new feature and benefits.
Features Overview
Full responsiveness and browser compatibility. PWAs work with all browsers and are compatible with any device, regardless of screen size and other specifications. Tablet and mobile users will have the same experience. You can even adjust the app to the desktop if needed.
Connectivity independence. Progressive web applications can work both offline and on low-quality networks.
App-like interface. These apps mimic navigation and interactions of native apps.
Push notifications. If used as a part of a good messaging strategy, push notifications can keep customers interested, motivating them to open and use an app more.
Self-updates. Able to update themselves automatically, apps stay fresh.
Safety. These apps are served through HTTPS, so unauthorized users can’t access their content.
Discoverability and easy installation. While search engines classify PWAs as applications, they are not distributed via app stores. These apps can be shared through a URL instead so they’re easily found. The installation is simple and entails visiting a site and adding it to a device home screen.
Benefits
Specialists who follow the progressive web apps trend use a web stack for their development. This approach takes less effort and time, so it’s more cost-efficient.
The reason is that developers don’t need to build the app for multiple platforms because a single progressive app can perform well on both Android and iOS and fit various devices.
Discoverability, one of PWAs’ core features, increases their competitiveness over native apps. This advantage is especially meaningful considering that each additional step to download an app reduces the number of its potential users by 20 percent.
Since PWAs aren’t installed on a device or shared via Play or Apple stores, their customers are several steps closer to launching them. They don’t have to visit an app store, click the “install” button, and accept various permissions. All they need to do is to visit the website, add the app to a home screen, come back to the home screen, and open the website.
In addition to skipping the app store, surfing, and installation, PWA users free themselves from updating (or accepting the update offer) for the app each time a developer releases new versions. Users always have access to up-to-date solutions. This feature allows companies to avoid the problem referred to as software fragmentation when they have to maintain old versions of apps or risk the loss of users until they start the update.
As per general research and founding. 80 percent of mobile users intentionally move apps to the home screen. So, the ability to be added to the home screen makes PWAs more competitive with web apps. There have to be other reasons people decide to try the app, of course. The frequency of use (61 percent), the simplicity of access (54 percent), and speed of access (49 percent) are the top factors influencing their decision. The chances for better distribution are, therefore, higher for PWAs. Push notifications also fuel user interest in the app.
Major companies who used it have already benefited from launching progressive apps. The eCommerce giant’s conversion rates have increased by 104 percent, the time spent per session increased an average of 74 percent across all browsers. Besides this, users started visiting twice as many pages each session.
Architecture and Technical Elements
The Web App manifest
The Web App manifest — a JSON file — is the first component that gives the progressive its native app interface appearance. With the manifest, a developer can control the way the app is displayed to the user (i.e. full-screen mode without visible URL bar) and how it can be launched. The file allows a developer to find a centralized place for the web app’s metadata. The manifest usually contains starting URL, an app’s full and short name, links to icons and icons’ sizes, type, and location. A developer can also define a splash screen and a theme color for the address bar.
Google shows the features the Web App Manifest supports
To apply these settings, a developer only has to add a single link to the manifest in all website pages headers.
Service Worker
A service worker is another technical element that supports one of the main features of progressive web applications — the offline work mode, background syncs, and push notifications typical for native apps. The service worker is a JavaScript file running separately from the web page/app. It responds to user interactions with the app, including network requests made from pages it serves. Because the service worker runs only to process a specific event, its lifetime is short.
Offline work mode. The service worker allows for caching an application shell (interface), so it loads instantly on repeat visits. The necessary dynamic content (i.e. message or payment history, shopping cart, avatars) is refreshed every time the connection is back. These mechanics allows for decent app performance and improved user experience. For example, a messenger user won’t see the difference between the online and offline modes regarding interface: It still works; a message history is available. However, messaging requires connection.
Push notifications. Push notifications are an efficient tool for user re-engagement through the content and prompt updates from websites they like. Progressive web apps can send push notifications even when the browser is closed, and the app isn’t active.
Background synchronization. The service worker is also in charge of this feature. It delays actions until stable connectivity is back. For example, the message sent right before the connection fails will be marked as sent and then will be delivered as soon as service is restored. So, servers can send periodic updates to the app allowing it to update itself when the connection is restored.
The application shell architecture
Building and maintaining PWAs entails separating static content from dynamic content.
The illustration by Google explains that the app shell is generally static, while the content can change
So, the use of the application shell architecture (that is the base of the UI) we mentioned above is the only approach to their development.
The app shell consists of core design elements required to make the application run without the connection.
The app shell approach works especially well for JavaScript-heavy apps consisting of one page and apps with relatively stable navigation and changing content.
Transport Layer Security (TLS)
PWAs leverage the Transport Layer Security (TLS) protocol. TLS is the standard of secure and robust data exchange between two applications. The integrity of the data requires serving the website via HTTPS and installing an SSL certificate on a server.
WPA Security Testing
Progressive Web Applications are pure web-based apps that act and feel like native apps. They can be added as icons, opened in full-screen mode (without the browser), have a pure native app kind of user experience, and generate notifications. WPA nearly no take local space, are fast, are rich like web apps, and improve the whole process of update and release to change a feature or look and feel... but do not forgot it still ... web application, so you need to perform web application security testing.
While testing a progressive web application, you need to test for these given points:
- The site is served over HTTPS: Safety is one of the major concerns in a progressive web application, hence you need to make sure that your web application is served over HTTPS. How to test: You can use Lighthouse by Google Developers, jitbit, seositecheckup, digicert, ssl shopper, ssl labs, etc., to test if your website is served over HTTPS or not.
- Web pages are responsive: Make sure that your web application shows a responsive behavior across all mobile and desktop devices.
- Offline Loading: All your web pages or at least some of the web pages must work even when your app is offline. You need to make sure that your web app responds with a 200 when it is offline. How to test: Again, since Google is massively pushing the PWA ecosystem, they have some of the best tools for testing PWA apps. For example Lighthouse. An alternative is Wiremock.
- Cross Browser Compatibility: You need to test your web app for cross-browser compatibility to ensure that your web app gives a seamless user experience across all browsers.
- Metadata for ‘Add to Homescreen’: You need to test if the web app provides metadata for ‘Add to Homescreen.’ How to test: You can use Lighthouse to test for metadata for ‘Add to Homescreen’ functionality.
- Page transitions should be smooth: Transitions are key to perceived performance, hence they shouldn’t feel laggy as you move around, even on slow internet connection. How to test: This should be done manually on a slow network. When you click on any button or link it should immediately respond either by transitioning immediately to the next screen and, while waiting for the app to respond, show a placeholder loading screen or a loading indicator.
- Each page must have a URL: Every page on your web app must have a URL and all the URLs must be unique. How to test: Test it by checking that every page is linkable by a URL and can be shared on social media or other platforms. The URLs can also be opened directly in new browsers.
Shareability: Content should be easily shareable even through full-screen mode and it should form cards for all the social media platforms. How to test: Test manually by sharing content from full-screen mode. Test for cards can be done as:
- Facebook: Debug the URL by entering the post to be shared and verifying if cards have been generated or not. Test it here.
- Twitter: Check if the type of card for your content is added to the HEAD element of the page:<meta name="twitter:card" content="summary" />
- Availability of Schema.org Metadata wherever needed: Your web app should be able to create a rich card if applicable. It helps to improve the appearance of your website by different search engines. How to test: You can use Google’s Structured data to ensure image, description, title, etc., are available.
- Push Notifications: If push notifications are applicable for your web app they should not be overly aggressive. How to test: Test the push notifications opt-in flow. There should be clear instructions stating what the site wants permission for and why the user should enable the push notifications.
E-SPIN Value Proposition
E-SPIN in the business of deliver end to end cybersecurity testing, include application security testing (AST), cover dynamic AST, static AST (secure code review / multi platform and programming technology support), interactive AST, mobile AST, source code analysis (SCA), IDE DevSecOps CI/CD integration, vulnerability security/assessment to penetration/exploitation testing, infrastructure/network/server/host/database testing to malware analysis and reversing for customer in all kind of industry and sectors for specific to generic requirements.
Feel free to contact E-SPIN for your specific project or operation requirements.