Multi-Tenant PWA with Manifest API
In this article, we going to review how we implement a multi-tenant and customizable PWA in BAJE using a dynamic manifest in Next.js.
What's a multi-tenant application?
It's common for SAAS services to let the user fully customize their page. Let the users change the theme, logo, name, or even domain.
At BAJE, we ship business landings fully customizable and also promotes the user to install PWAs for each business for better retention. A business landing demo.
And Whats Web Manifest?
The web app manifest is a JSON file that tells the browser about your Progressive Web App (PWA) 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, among other things.
So, The Problem!
Web Manifests are static JSON config, linked is the document head.
Everyone who installs a particular business landing sees the BAJE name and logo, not that business! And also opens BAJE home page, not the business page (because of start_url)!
And The Simple Solutions!
BAJE is a Next.js applications. One of our reasons for choosing Next.js was SSR. We call business config API on the server side for a better UX and SEO (just like others!)
- At first, we needed a JSON config maker. So with the power of the Back-end for Front-end we implemented a Next.js API route. Which gets business details like name and logo in query params and returns the JSON config (the manifest). All the parameters are optional to make it works on all pages like the home page (and return BAJE default manifest). We call it “Manifest API”.
- In the document head, we should link our manifest. Instead of linking our static file, we call manifest API to have a “Dynamic Manifest”. So browsers when reading the manifest, calls manifest API and every page has its own unique manifest and PWA configuration on demand (no need to many many static files for each page!)
Time to say goodbye.
Feel free to get in touch with me o Telegram.
