A progressive web app is basically a website with additional benefits for mobile devices. These PWA benefits include push notifications, offline access, an option to install a progressive app to the home screen of your device, and a few more. Just like websites, PWAs are written in ‘web languages’, HTML, CSS, and JavaScript. That makes it possible to launch a PWA in different browsers on desktops, laptops, and mobile devices.
PWA (Progressive Web Apps) basic knowledge
- App Manifest
- The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched.
- Service Workers
- A service worker is a type of web worker. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.
- Business Value
- PWAs provide numerous advantages to companies, such as: increase of mobile traffic, improvement of load and installation speed, reduced use of device storage, average conversion increase, average session increase, engagement increase, lower bounce rate when compared to that of mobile websites, increase in page views
Modern Browser APIs
- Storage
- Internet connections can be flakey or non-existent on the go, which is why offline support and reliable performance are common features in progressive web apps. Even in perfect wireless environments, judicious use of caching and other storage techniques can substantially improve the user experience. There are several ways to cache static application resources (HTML, JavaScript, CSS, images, etc.), and data (user data, news articles, etc.).
- Web Sockets
- A WebSocket is a persistent connection between a client and server. WebSockets provide a bidirectional, full-duplex communications channel that operates over HTTP through a single TCP/IP socket connection. At its core, the WebSocket protocol facilitates message passing between a client and server.LocationsBrowsers offer a common JavaScript geolocation service you can use to enrich your HTML driven experiences. A common use of geolocation is to show where stores are located and possible driving directions. Identifying the real geographic location of an Internet-connected device is possible by linking to the location of the IP address, MAC address, or via Wi-Fi positioning methods.
- Device Orientation
- Web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. In particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
- Payments
- The Payment Request API allows merchants to easily collect payment information with minimal integration. The API is an open and cross-browser standard that replaces traditional checkout flows by allowing merchants to request and accept any payment in a single API call. The API eliminates manual and tedious entry by storing the user's information securely in the browser. The browser passes addresses and credit card (or other payment) details directly to the website. And, because the browser is collecting payment information from the user, making a payment goes from " n " taps to one tap.
- Credentials
- The Credential Management API lets a website store and retrieve password, public key, and federated credentials. These capabilities allow users to sign in without typing passwords, see the federated account they used to sign in to a site, and resume a session without the explicit sign-in flow of an expired session.
- PRPL Pattern
- PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster: Push (or preload) the most important resources. Render the initial route as soon as possible. Pre-cache remaining assets. Lazy load other routes and non-critical assets.
- Notifications
- Notifications can be used by the service worker to show new information to the user, or at least alert them when something has been updated. Notifications can work without push, but are very useful when combined with them.
- Push
- Push is used to deliver new content from the server to the app without any client-side intervention, and its operation is handled by the app's service worker.
General
- Testing
- PWA testing strategy can have 2 areas of activity: standard web application testing (functional testing; non-functional testing (UI Testing, Cross-browser testing, Performance testing) and PWA features testing (installation on the home screen, offline mode, push notifications)
- Dev Workflow
- PWA Development: creation of the PWA framework and architecture; design of database structure; development of the PWA module, classes and libraries; completion of the development and implementation of all functionalities.
- Lightweight Injection Tokens for Libraries
- Lightweight injection tokens helps optimize the bundle size of client applications that use your library. The lightweight injection token design pattern is especially important for library developers. It ensures that when an application uses only some of your library's capabilities, the unused code can be eliminated from the client's app bundle.
Have a PWA engineer assessed, or find one.
Independent experts from our network check these skills in a 60 to 90 minute live interview and write a report with a recommendation.