How to Build Progressive Web Apps in Joget (2025)

Progressive Web Apps (PWAs) are web applications enhanced with mobile app-like capabilities. In essence, a PWA combines the reach of the web with the engagement of native apps. 

Why build a PWA? In 2025, users demand seamless and speedy mobile experiences. PWAs meet this need by being reliable, fast, and engaging. They additionally eliminate the friction of app stores.

Notably, low-code tools are making PWAs more accessible – Gartner predicts 70% of new applications will be built with low-code or no-code platforms by 2025. 

Joget DX turns app building into a smooth experience where every app you create is instantly PWA-ready, no extra coding required. Behind the scenes, it wires up the manifest and service worker while the Process Builder takes care of workflows, streamlining the back end. 

Together, they deliver modern apps that feel effortless to build and run, giving you a front-end that shines and processes that quietly run themselves.

In this guide, we’ll cover everything from setting up Joget to enabling PWA features, offline support, testing, publishing, and troubleshooting, so you can build modern apps that run anywhere.

Basics You Should Know about Progressive Web Apps in Joget

Before diving deeper, it’s important to understand the essentials. Progressive Web Apps thrive on speed, offline support, and installability. 

In this section, we’ll break down these core features, highlight minimum requirements, and show you exactly how Joget fits into the picture.

• Installable like an App: PWAs can be installed to a device’s home screen or applications menu, giving a full-screen app experience. This is enabled via a web app manifest.
• Offline Access: Thanks to service workers, PWAs work offline or on poor networks. Content can be cached, allowing the app to remain usable without an internet connection.
• Fast and Responsive: PWAs are optimized for speed. They load quickly and respond smoothly to user input, matching native app performance.
• Push Notifications: PWAs can send push notifications (with user permission), re-engaging users even when the app isn’t open – a feature Joget supports via its notification plugin.
• Responsive Design: A PWA adapts to different screen sizes (mobile, tablet, desktop) gracefully. Joget’s UI components are mobile-responsive by default, ensuring a consistent experience across devices.

Minimum requirements to build a PWA

To qualify as a true PWA, certain building blocks must be in place. These requirements ensure the app is secure, installable, and works offline. Let’s quickly run through the essentials.

• Must be served securely over HTTPS.
• Needs a valid web app manifest (name, icons, start URL, display mode).
• Requires a service worker for offline capability.
• Joget auto-generates these essentials—no manual coding needed.

How Joget fits in: When you build an app in Joget, it automatically provides the manifest and service worker, so your app is instantly “PWA-ready.” The heavy lifting is done for you. Additionally, Joget’s visual Process Builder ensures that as users interact with your PWA, you can automate manual workflows in the background with simple drag-and-drop configuration.

In summary, Joget makes it easy to build the front-end and the automated process logic of a PWA in one go.

You can also refer to these official Joget resources on PWAs for installation and specification details. 

Setting Up Your Joget Platform for Progressive Web Apps

To get started building a PWA in Joget, you need the proper platform setup and version.

• Joget version needed: Make sure you’re using Joget DX 7 or above. 
• Basic setup steps: You can run Joget on the cloud or on-premises.

When it comes to running Joget, you’ve got flexibility. You can start instantly in the cloud or take the more hands-on route with a local installation, depending on your needs. For a step-by-step breakdown of the installation process, check out this detailed guide on Joget development.

1. Joget Cloud: Easiest for beginners – simply sign up at Joget’s cloud service and start building apps in your browser. This hosted option already provides HTTPS URLs, which is great for PWA testing.
    
2. Local Installation: For more control, install Joget on a server or locally. Ensure you have Java (JDK 8+), a MySQL/PostgreSQL database, and Apache Tomcat. From there, you can create apps.

Ensuring mobile view support: Joget apps come with responsive UI templates, so your PWA feels mobile-ready out of the box. 

The Universal Theme ensures forms and pages adapt seamlessly across devices, mimicking native mobile app design. With Joget’s integrated Process Builder and UI builder, you design once and deliver workflows instantly on both desktop and mobile.

Designing the PWA Layout with Joget

Designing a user-friendly layout is crucial for your PWA’s success. In Joget, you’ll use the visual builders to craft the UI and ensure it’s optimized for mobile.

Creating a mobile-friendly UI

• Use Joget’s Form Builder for quick drag-and-drop data entry forms.
• Arrange menus and pages with Userview or Page Builder.
• Keep layouts mobile-friendly: simple, clean, and readable.
• Preview designs across screen sizes for responsive assurance.
• Leverage sections and grids for smooth workflow automation.

  Using Joget UI elements

• Joget provides rich UI components like text fields, date pickers, uploads, etc.
• Use Datalist to build searchable, filterable tables for reporting dashboards.
• Create smooth navigation with Userview Menu items for forms and lists.
• Design app-like experiences: clear icons, short labels, grouped functions.
• Configure access control so different roles see only what’s relevant.

Tips for a smooth user experience

• Keep it Simple: Each screen should have a clear purpose. Don’t overcrowd pages with too much information.
• Optimize Forms: Use Joget’s form rules to show/hide fields as needed, keeping forms concise.
• Test Responsiveness: Joget allows direct access via the phone’s browser; see if buttons are easy to tap and if text is readable.
• Use Process-driven UX: Use Joget’s process-driven UX to link workflows with UI, ensuring instant status updates.
• Leverage Mobile Features: While Joget doesn’t automatically use device features like camera or GPS, you can incorporate them.

By thoughtfully designing your PWA’s layout in Joget, you ensure that users have a native-like experience. And thanks to the integrated Process Builder, every action on the UI can kick off behind-the-scenes workflows seamlessly.

Enabling PWA Features in Joget

One of Joget’s strengths is that PWA features are primarily built in. However, you should know how to configure or tweak these features for your app.
Joget userview builder PWA settings allow enabling or disabling PWA support and web push notifications by configuration.

A. Joget DX enables PWA features by default. 

Your app instantly gets a Web App Manifest and Service Worker once it’s published over HTTPS. In the builder, you’ll simply see toggle options like Disable PWA or Disable Push Notifications, leaving Joget to handle all the heavy lifting.

B. Setting the app manifest

The web app manifest defines how your PWA behaves once installed. Joget automatically generates this manifest using your app’s metadata, but you should still customize a few key fields.

• App Name & Description: Set these in your Joget app’s settings to ensure the install prompt looks professional.
• App Icon: Upload a clear square image (minimum 512×512px). Joget uses this in the manifest and across devices.
• Colors & Theme: Joget derives default theme and background colors from your chosen UI theme, but you can adjust them to match branding.
• URLs: The manifest automatically includes a start URL (your app’s homepage), but double-check it works correctly.

C. Defining icons, splash screens, and colors

The key visual elements for your Joget PWA are the app icon and color scheme. Upload a custom PNG icon in Joget’s settings, and the platform will automatically apply it to your PWA.

• Splash Screen: By default, Joget displays your app icon on a background that matches the theme color.
• Theme & Background Colors: These can be customized in manifest settings if exposed; otherwise, Joget will use the app’s primary UI color.
• Customization: For most apps, Joget’s defaults work well. If you want a fully custom splash screen, you may tweak the manifest or use a plugin.

D. Enabling push notifications

Push notifications make your Joget PWA feel truly app-like, sending real-time alerts directly to users. With a bit of configuration, you can notify users of new tasks, approvals, or updates without requiring them to check emails or dashboards constantly.

• Client Side: PWA support automatically sets up a service worker to handle push messages.
• Server Side: Use Joget’s Default User Notification plugin or a Push Notification plugin for sending alerts.
• Configuration: Add the plugin under Properties & Export in the Joget App Center, then configure it.
• Workflow Integration: Trigger push alerts via a “Push Notification” step in the Process Builder when key events occur.
• User Experience: Once installed, your PWA prompts users for notification permission, enabling real-time system alerts.

There’s no complex coding – Joget’s Process Builder and plugin ecosystem help you automate manual workflows like notifications and background updates simultaneously.

Adding Offline Support in Joget PWAs

A hallmark of PWAs is the ability to function offline. 
Offline support in PWAs may sound technical, but in practice it comes down to a few repeating patterns: caching what users see, storing what they do, and syncing when they’re back online. 
To make this easier to understand, here’s a table that breaks down each offline feature, how it typically works in PWAs, and how Joget implements it without requiring you to write code.

Example: Offline form submission workflow

Imagine a field service app built on Joget PWA. Offline support ensures technicians can keep working even when there’s no network. Here’s how the user flow looks:

• Start of Day (Online): Technician opens the PWA, and the latest forms/data are cached.
• On-Site (No Connectivity): Technician fills out the job completion form. Instead of failing, the submission is saved in an Outbox.
• Later in the Day (Back Online): The app automatically syncs all queued submissions without extra steps.
• Backend Processing (Joget Workflow): The system instantly marks the job as complete and sends a notification to the supervisor.

In summary, adding offline support in Joget is mostly a configuration step. 

Still, it yields a powerful benefit: your users can keep working without internet, and your processes (built with the Process Builder) will seamlessly catch up once connectivity is back. 

Testing Your PWA in Joget: A Complete Checklist

Before publishing, it’s essential to test your Joget Progressive Web App (PWA) thoroughly. Testing ensures that features like offline access, caching, and installability work as expected across devices. 

Steps to test your Joget PWA effectively

• Check installability: Open your app in Chrome/Edge and confirm you see the “Install App” option.
• Verify offline mode: Disconnect from the internet and see if cached pages, forms, and lists still load.
• Test form submission: Try submitting data while offline, then reconnect and confirm it syncs correctly.
• Cross-device checks: Test on both desktop and mobile, across different browsers, to ensure consistency.
• Performance audit: Use tools like Lighthouse to run a PWA audit for speed, accessibility, and best practices.

Before you launch your Joget-based Progressive Web App (PWA), it’s important to test it across multiple environments.
The table below breaks this into three categories: desktop, mobile, and browser DevTools.

By testing on multiple platforms and using the available tools, you can be confident your Joget PWA is ready. 

Publishing the PWA in Joget: Steps for a Smooth Rollout

Once testing is successful, it’s time to deploy or publish your Joget PWA for your intended users. 

Publishing a PWA involves making it accessible via a stable URL (with HTTPS) and informing users how to “install” or use it.

Hosting and domain setup

• Use the Joget Cloud-hosted URL or configure on-premise domain.
• Point your chosen domain or subdomain to the Joget server.
• Publish your Joget app via console for external accessibility.
• Add a reverse proxy like Nginx or Apache for SSL.
• Ensure HTTPS is mandatory, enabling secure PWA features and user trust.

HTTPS requirements

• Obtain an SSL/TLS certificate for your domain (Let’s Encrypt offers free options).
• Configure your web server or reverse proxy (e.g., Nginx, Apache) for HTTPS.
• Joget itself doesn’t manage SSL—set it at the Tomcat or proxy level.
• Test your PWA URL to confirm no mixed content warnings appear.
• Once HTTPS is live, all Joget DX apps become fully PWA-ready.

Finally, ensure that all your automated workflows (the processes you built with the Process Builder) are connected to any external systems as needed when in production.

Once everything is set, your Joget-powered PWA is officially live – accessible 24/7, installable on devices, and ready to streamline operations by automating manual workflows for your users.

Encouraging Users to Install Your Joget PWA

In publishing your PWA, a bit of user education helps. Some users may not be familiar with PWAs and might wonder, “Is this an app or a website?”. 
You can highlight that it’s a web app they can use offline and install for convenience. 
Also, emphasize that updates happen automatically (no need to download new versions from a store), which is a perk of PWAs.

How the Installation Flow Works for Users

• Modern browsers like Chrome automatically show an install prompt after users visit your app a few times or spend time on it.
• You can also trigger the beforeinstallprompt event in a custom UI (for example, an “Install our app” button), though with Joget, this is optional.
• A more straightforward approach is to add a help note or page inside your app that explains how to install it. Example: “On Chrome, tap the menu → Add to Home Screen.”
• Once installed, your Joget PWA opens in standalone mode like a native app with its own splash screen and icon.

Best Practices for Smooth Publishing

• Let users know the benefits of installing (offline access, quick launch, push notifications).
• Distribute your PWA’s URL via internal portals, emails, or dashboards to reach a wider audience.
• Verify that updates auto-propagate. Joget’s service worker typically refreshes the cache when you publish a new version, so users always get the latest build on their next visit. 
• If you need store visibility later, your Joget PWA can be wrapped in a native container (like Cordova or Capacitor) for submission—but this is optional.

This approach makes adoption frictionless while keeping maintenance light. Users enjoy app-like convenience without needing an app store download, and your updates reach them instantly.

Troubleshooting Common PWA Issues in Joget

Even with a robust platform like Joget, you might encounter some hiccups when building or using PWAs. Here are common PWA issues and how to address them.

Offline mode is not working.

• Ensure offline support is enabled and a PWA-compliant theme is selected.
• Verify that the service worker is registered and that files are cached properly.
• Confirm HTTPS usage, not IP address, for service worker.

App not installable

• Check that HTTPS is active and manifest fields (name, icons, start_url) are filled.
• Use Chrome DevTools > Application > Manifest tab to detect manifest errors.
• Run a Lighthouse PWA audit to identify unmet install criteria clearly.

Form submissions are not syncing

• Ensure the app goes online again, making Joget accessible.
• Check Chrome DevTools > IndexedDB for unsynced offline submissions.
• Provide a manual “Sync” button or refresh fallback option.

Push notifications are not received

• Confirm notification permissions are granted in browser/device settings.
• Check Joget’s Default User Notification plugin and test-fire a notification.
• Remember, iOS Safari supports push only on iOS 16+ opt-in.

Manifest or service worker errors

• Check the DevTools console and Application panel for manifest or worker errors.
• Ensure icons, URLs, and custom changes don’t break manifest validity.
• If updates fail, try refreshing twice or clearing site data to reset.

Most issues can be resolved by checking the fundamentals: 

HTTPS, manifest completeness, and using the platform as intended. Joget’s community forums and documentation are also helpful if you encounter a strange issue. 
By systematically troubleshooting, you’ll ensure your PWA provides a smooth, issue-free experience. Once resolved, the combination of Joget’s PWA features and Process Builder workflows will continue to automate manual workflows reliably for your users.

Suggested Reading
MVP Development For Startups: Everything You Need to Know

Real-World Examples: Using Joget PWAs to Automate Manual Workflows

To solidify the concepts, let’s look at some real-world scenarios where Joget-based PWAs, combined with the Process Builder, transform and automate manual workflows.

1. SSI Securities (CRM Mobile Access)

SSI Securities revamped its mobile client relationship workflows using a Joget PWA built with Process Builder, enabling field agents to access CRM data on mobile—online or offline.

Problem: Field agents wasted time logging into desktops or using paper logs while visiting clients, resulting in delayed reports and fragmented customer data.

Solution

• PWA enables offline access to client CRM forms and data.
• Form submissions cached offline, auto‑sync when network returns.
• Process Builder routes client updates instantly to CRM system.
• 80% reduction in agent reporting delays after PWA rollout.
• Real‑time syndication improved client satisfaction and follow‑up speed.

Result: SSI agents now submit on-the-go client updates instantly, cutting CRMs update lag and streamlining workflows. Response times improved, and customer engagement grew significantly.

Source: Joget case study on SSI Securities CRM via Joget PWA.

2. Malaysia Airlines (Government Travel System)

Malaysia Airlines built a Joget-based travel approval system to manage government official travel workflows—creating a mobile-accessible PWA that streamlined approvals, reporting, and ticketing across online and offline scenarios.

Problem: Processing high-volume government travel requests was slow, manual, and fragmented, requiring physical warrants, ticket reconciling, and heavy SAP system interactions.

Solution

• Joget PWA automated travel requests and warrant submission online/offline.
• Integrates with SAP and GDS for real-time ticket processing.
• Auto-matches 800,000+ warrants to SAP invoices in six months.
• 6-month development cycle enabled rapid rollout across agencies.
• Digital workflows eliminated manual matching and reconciliations.

Result: Malaysia Airlines' Joget PWA transformed travel workflows—processing over 800,000 warrants seamlessly, cutting manual workload and improving accuracy. Agencies now enjoy fast, mobile-enabled travel approvals with an audit trail.

Source: Joget Mini Case Studies booklet profiling Malaysia Airlines travel system.

Why Joget PWAs Deliver Real Business Value in 2025

Progressive Web Apps built on Joget combine sleek, mobile-friendly experiences with automated workflows. They simplify development, enable offline support, and handle notifications effortlessly. 

By 2025, organizations of all sizes can streamline operations, reduce manual work, and improve engagement. Joget’s low-code platform ensures you build fast, scalable PWAs that drive true digital transformation.

Need expert help? If you’re excited about building a Joget PWA to transform your business but aren’t sure where to start, consider partnering with professionals who specialize in this field.

Relinns Technologies is a certified Joget specialist that can help you develop custom PWA solutions tailored to your needs. They have deep experience in using Joget’s Process Builder to streamline operations across industries.

Why Choose Relinns?

• 90% of workflows built with Relinns’ solutions require zero coding for your team.
• 40% faster app deployment compared to traditional development, in Joget and PWAs.
• 75% fewer errors by automating manual processes with thorough testing.
• Integrations with 95% of CRMs, ensuring your PWA fits into your ecosystem.
• 60% quicker iteration cycles- update and extend your app rapidly via Joget’s visual tools, keeping you agile.

Relinns blends business insight with Joget expertise, helping you transform workflows into powerful PWAs. Embrace automation, scale efficiency, and delight users—your digital transformation starts faster with the proper guidance.
 

Frequently Asked Questions (FAQs)
 

How do Progressive Web Apps (PWAs) differ from traditional mobile apps?

PWAs combine web and app-like features, offering offline access, push notifications, and installability, without needing app stores. They are lightweight, fast, and cross-device compatible.

Can Joget PWAs handle high-traffic enterprise workloads securely?

Yes. Joget’s platform includes enterprise-grade security, scalable infrastructure, and compliance features. This makes PWAs capable of handling thousands of users with consistent performance and data protection.

Are Joget PWAs truly responsive across all devices and browsers?

Joget-built PWAs automatically adapt layouts to different screen sizes, ensuring seamless functionality across desktops, tablets, and mobile devices. They also support most modern browsers with minimal adjustments required.

What industries benefit the most from mobile-responsive web apps in Joget?

Industries such as healthcare, banking, field services, and retail adopt Joget PWAs for faster workflows, compliance tracking, mobile reporting, and real-time customer interactions without heavy IT investment.

How cost-effective is building a PWA on Joget compared to native apps?

PWAs eliminate app store fees, reduce separate iOS/Android development, and cut maintenance costs. Joget’s low-code platform further accelerates delivery, making the total cost significantly lower than native development.

Can Joget PWAs integrate with third-party enterprise tools like CRM or ERP?

Yes. Joget provides API builders and plugins, allowing seamless integration of PWAs with CRMs, ERPs, or HRMS systems.  This ensures automated data flow without disrupting existing IT systems.
 systems.