Progressive Web Application

Note - In order to use this module, you need to have Firebase Project Credentials/ API Keys which will be used in the module configuration.

Firebase is a development platform for mobile and web which provides an API that allows application data to be synchronized across clients and Firebase's cloud. Firebase is owned by Google and lets you store and sync between your users in real-time. The Realtime Database is one big JSON object that the developers can manage. With just a single API, the Firebase database provides your app with both the current value of the data and any updates to that data. It also helps you to send push notification. 

Progressive Web Application extension provides PWA mobile app for your online store. This allows customers to download and install the PWA on their smartphones without the hassle of app marketplaces like Google Play and Apple Store. PWA delivers an app-like experience to users using modern web technologies. Customers can easily add PWA to the mobile home screen and experience the seamless possibilities of a progressive web application. The admin can configure the app name, app icon, splash screen background color, and theme color. Moreover, the admin can send push notifications on PWA.

Business Value

Let's take a scenario wherein the customers want to enjoy a fast and smooth experience from your website. But, sometimes due to some poor network connection, they are not able to access your store. In this situation, Progressive Web Application allows the store owners to turn their store into a PWA and let the users enjoy a fast and smooth experience on your website even with poor internet speed. Thus, when a customer opens your website on his mobile browser, the customer can add your website to the mobile home screen. 

Now the customer can tap the PWA icon of your website to experience the power of a progressive web app. The website will soon launch just like a native application without being installed on the customer’s mobile phone. Using this module, the admin can easily configure the module from the backend. The admin can upload the app icon, splash background color, decide the app name, send a push notification, and set the theme color. Now it will convert your website into a progressive web application.

Account & Pricing

An additional account is required to send the push notification to PWA. The needs API credentials from the Firebase.

• You need create Google account or use existing one.
• You may check Firebase pricing. There are two pricing plans available - Spark Plan - (Free) and Blaze Plan - (Pay as you go).
• For more information, you can contact Firebase support.

Features List

• More user-friendly than a web application.
• Works lightning fast if compared to the website.
• Supports push notification for Android devices.
• Completely responsive on all the platforms.
• Launches without the internet or low-quality internet.
• Looks and feels like a native application.
• Users do not need to update the progressive web application.
• No app store requires managing the application.
• Increases user engagement in the store.
• Increases store revenue due to user engagement.
• The application name can be entered by the admin.
• The admin can upload and change the application icon.
• The splash background color of the Progressive Web Application can also be changed by the admin.
• The theme color of the PWA can be selected by the admin.
• Select the orientation of PWA as Any, Natural, Landscape, and Portrait.
• Select the display type for PWA  Fullscreen, Standalone, Minimal UI, and Browser.
• The admin can upload the splash screen image for iOS.
• The admin can change the version number when want to refresh the service worker cache.
• Workbox Cache Strategies integrated with this module to make quick execution for better performance.
• Also improves website performance by caching assets in the first-page load. Workbox Background Sync Plugin is an absolute solution for resuming the interrupted network.
• Workbox Run-Time Caching to collects all the assets during page load and adds to browser cache.
• Cache Expiration Plugin to put restrictions on a cache and define how long it should allow details to be stored in a cache or how many items should be stored in a cache.

How Does The Extension Works?

PWA App Configuration

To implement the Progressive Web Application for your website. The admin needs to do some simple configuration and then it is ready for the customers. After the successful installation of the module, the admin can configure the module from the back-end. Set the name and short name of the application. Set sender ID and the Server Key for sending the Push Notification.

Decide the splash background color and the theme color from the configuration. PWA orientation can be set as Any, Natural, Landscape, and Portrait. PWA display type can be defined as Fullscreen, Standalone, Minimal UI, and Browser.

Send Push Notifications

The admin can send notifications to their customers. The notification can be managed by the admin from the backend. The admin can add, delete, and edit the notifications.

Set the title and the body of the notification along with its target URL. Also, the icon for the push notification can be set by the admin. The customers will receive the push notification once the PWA is installed on their smartphones. The customer can land up to the target URL once a link on the same in the notification.

Add To Homescreen

The user can easily use and install the PWA by adding the website to the Home Screen. The customer can also edit the name of the application while adding it to the home screen. The PWA launches the same as a native application. The application launches with a splash screen with an icon image.

Offline Mode

One of the best features of the PWA is that it works in poor internet connection as well in offline mode. The users can access the application in poor connectivity. Using the PWA, the users can easily access the store even in offline mode. The pages of the web store, which are already cached, don't need to load every time. The users can easily navigate through the pages, which they already visited in the offline mode.

PWA With Workbox Technology

Workbox handles cache updates for you and offers premium features to build high-level Progressive Web App. Also, helps to improve PWA performance and provides numerous ways to create an offline-first experience - precaching, runtime caching, strategies, request routing, background sync.

Workbox Run-Time Caching For Superfast Loading

Runtime caching implementation helps to improve the performance of the Progressive Web Apps. It facilitates to advance the PWA app with faster page loading. A premium feature of the service worker is it allows implementing runtime cache. Enables to cache assets in the first-page load. Runtime Caching refers to add a response to a cache as you go.

Workbox Precaching To Serve Cached Data

Artificially speed up the internet connection with pre-caching, web pages are cached (momentarily saved) so that they load promptly the next time you visit that page. Useing a service worker to cache resources on the user's device because accessing cache memories is more immediate than accessing the main memory. Prefetching allows applications to maximize performance and minimize wait times by preloading resources that users will need before they request them.

Workbox Cache Expiration Tool

Allows to put restrictions on a cache and define how long it should allow details to be stored in a cache or how many items should be stored in a cache. Restrict the number of cache entries. Restrict the time-range of cached entries. Helps to remove old entries for the new response.

Strategies for Faster Results

Cache strategies improve the responsiveness of the website. Caching allows content to be regained faster because an entire network request execution is not necessary. Drafting used cache strategies. Cache First - To fulfill the request using the cached response without using the network. Network First strategy is an essential solution for requests that are performing repeatedly. Network Only - To fulfill the specific request from the network. Cache Only - To assures that responses are received from a cache.

Resume Interrupted Network with Background Sync

Performed search request fails instantly due to the dropped internet connection or server down problem. So the implemented Background Sync is an absolute solution to this problem.  Backgroud Sync for the search page is implemented. Let the service worker detect the failed network request and register to receive a sync event for delivering the requested search result when connectivity has returned. Sync events automatically replay failed requests even if the user has left the app to deliver the requested search result.

Benefits

For Store Owner

• The cheapest and fastest way to build a mobile app for your e-commerce website.
• No need to publish the application on Google Play or App Store.
• The PWA will allow more user engagement apart from the native application, thus increasing the sales conversions.
• You can customize the app name, upload & change the app icon, set the splash background, and theme of the PWA according to your store theme. 
• Send the push notifications to the customers and keep them engaged. The admin can send the promotional offers, coupons codes, or discount information directly on the PWA.

For Customers

• Get the comfort and ease of access to shop on mobile.
• No need to install the app from Google Play or App Store, as it can be easily downloaded from the mobile web browsers.
• It takes less storage space as compared to native applications.
• Works similar to a native app giving them a richer app experience.
• Poor network connection support.

Live Demo

You can check the live demo from here. 

Support Policy

• You get free 3 months of technical support included.
• You can buy a 6 or 12 months extended support agreement.
• For issues, please create a ticket or send an email to support@webkul.com
• Free lifetime updates of the module.