Building AJIO lite
Ajio is India’s leading fashion and life style marketplace which caters to India’s fashion hunger. We at Ajio had understood the importance of performance in Retail, user network speeds and capabilities of lightweight smartphones has a significant impact on sales. Thus, we began a project to harness the capabilities provided by the browser and leverage it into making a performant, immersive and engaging web application.
Progressive Web Apps: Progressive Web Apps are Progressive, Responsive, Connectivity independent, Fresh, App-like, Safe, Discoverable, Re-engageable, Installable and Linkable. If you are new to PWA, progressive-web-app-pwa-the-complete-guide is good place to start.
Let’s break it down step by step:
Project setup: Since we were already using service worker, we used InjectManifest of workbox-webpack-plugin in webpack to inject assets-manifest into our service worker.
new InjectManifest({
swSrc: path.resolve(__dirname, '<Exising-Service-Worker-file>'),
swDest: "sw.js",
importsDirectory: 'swassets',
precacheManifestFilename: 'wb-manifest.[manifestHash].js',
importWorkboxFrom: 'cdn',
}),Web App manifests: The manifest for web application is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps, direct what the user can launch and more importantly how they can launch it.
PWA manifests include several values such as application’s name, description, icons, start_url, scope, background_color, theme_color etc.
Snapshot of the current PWA manifest of ajio.com
{
"name": "AJIO Lite",
...
"icons": [
{
"src": "/img/icons/Ajio48.png",
"type": "image/png",
"sizes": "48x48"
},
......
],
"start_url": "/",
"scope":".",
"display": "standalone",
"orientation": "portrait-primary",
"background_color": "#fff",
"theme_color": "#3f51b5",
"dir": "ltr",
"lang": "en-US",
...
}Depending on the manifest configs, we can get the features like “install to home” widget, splash screen etc.
You can go through the details of all keys in the manifest file here. Also Manifest can be generated and validated online.
App Shell: The app “shell” is the minimal HTML, CSS and Javascript required to power the user interface. It gets cached for subsequent requests, providing repeat users with instant page loads.
Offline Theme: A baseline experience if users are offline using a css filter, toggled by online/offline event listeners.
Network Status: Whenever network connection changes from online to offline or offline to online, we inform the user about the current network connection status using the Network Information API. Also, during offline to online status change, the user is given the option to reload the page.
Offline Page: By default every page is cached once it’s visited. Thus if the network status becomes offline, the user can continue to visit the older(visited & cached) without trouble. In case the page is not cached in the browser, a fallback offline page will be displayed.
Service Worker: A service worker is a type of web worker that the browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Service worker behaves like a proxy server, and intercepts network requests, caching or retrieving resources from cache, and delivering push notification.
Caching Strategies: Following are the caching strategies we used. If you are more interested about caching strategies, you can go through the documentation of workbox strategies.
- Cache Only: The request is fulfilled from the browser cache only.
2. Network Only: If a specific request needs to be fulfilled from network.
3. Cache First(Cache Falling Back To Network): If the response is available in cache, then the request will be fulfilled using the cached response, otherwise, there will be a network request to fulfil the request and the response will be cached for the subsequent request. For example, a cache-first strategy is recommended for assets which are non-critical like fonts, images etc.
4. Network First(network, falling back to cache): The request will try to fetch the response from the network, if the request is successful, the response will be sent to the webpage and also cache for a future fallback. If the network fails to return a response, the cached response will be used. This is used when an updated response is required for every request.
5. Custom(extension of staleWhileRevalidate): This is extended version of of stalewhilerevalidate. Since we have multi page application, we have to cache html for each route. Therefore caching strategy depends on multiple factors like validate cache, expiration time, network status, api failure, cache busting, fallback page etc. As a result, we have implemented custom strategies. If you want to write your own routing strategy using workbox please refer to workbox routing.
Assets Categorization: We have categorized all types of assets into versioned and non-versioned. Versioned assets are further categorized into pre-cache and runtime-cache. Although, all types of assets maintains lifetime, max-entries and caching-strategy.
★ Versioned: Versioned is used for cache update. When new deployment happens, hash keys of the assets urls are updated.
★ Pre-cache: Service workers have the ability to cache a set of files when the service worker is installed. This is often referred to as “pre-caching”.
(Note: We have not used workbox pre-cache to store all static assets by default, we have change the default behaviours).
★ Runtime-cache: Caching when application is running eg. apis responses.
★ Non-Versioned: There are few assets which don’t need to be versioned like images.
Background-sync: We have added background-sync functionality to sync data when users do add-to-cart in offline mode using workbox-background-sync.
workbox.routing.registerRoute(
new RegExp('(?:http://.*)?/api/' + '<URL>/' + '.*'),
new workbox.strategies.NetworkOnly({
plugins: [
new workbox.backgroundSync.Plugin(<QUEUE_NAME>, {
maxRetentionTime: 24 * 60
})
]
}),
'POST'
);Offline-tracking: We have added functionality to update google analytics data when users navigate on offline mode using workbox-google-analytics.
workbox.googleAnalytics.initialize({
parameterOverrides: {
cd[dimension]: 'offline'
}
});GPU Rasterization: By including meta-tag, we got significant boosts in performance when GPU handled rasterization compared to CPU
Secure: HTTPS encryption ensure a secure browsing session for our users.
Push-notification: We used a 3rd party application for ajio’s push notifications.
Introducing the Ajio Lite Team: Dushyant Gaur, Deepak Jain, Indu Pal, Gautam Paul, Ambesh Singh, Durga Prasad, Ritesh Singh, Amritanshu Verma, Malapaka Sharma, Vikram Aditya, Ashish Ranjan, Ashik Kispotta.