Noloco
Ask the CommunityHire an ExpertLoginSign up
  • Noloco Overview
  • πŸš€Quickstart
    • Start with your data
    • Start with AI
    • Start with a template
  • Data to App
    • Database Consolidation
  • App Settings
  • Components
    • Containers
    • Video
  • Templates
  • πŸ”—Data Sources
    • Data Overview
      • Setting a Collection's Primary Field
      • Syncing
    • Noloco Tables
      • Field Types
      • Relationships
      • Automatic Links
      • Rollup Fields
      • Lookup Fields
      • Formulas
      • Noloco AI
      • Import a file
    • Airtable
    • Google Sheets
    • SmartSuite
    • MySQL
    • PostgreSQL
    • REST APIs
    • HubSpot
    • Xano
  • πŸ“„Pages
    • Collection views
      • Show collection record count
      • Empty State
    • Blank pages
    • iFrame embeds
    • External links
    • The Home Page
    • User Profile Page
    • Parent pages & folders
    • Page visibility rules
    • Cloning pages
    • Renaming pages
    • Hiding pages
    • Sidebar dividers
    • Tabs
  • πŸ“‚Collections
    • Adding collection views
    • Display
      • Rows
      • Cards & columns
      • Tables
      • Kanban boards
      • Calendar
      • Timeline
      • Gantt
      • Split-view
      • Charts
      • Maps
      • Pivot Table
      • Single record view
      • Grouping records
      • Record Colors
    • Filters
      • Logged in user
      • Relative Filters
      • Record values
    • Filter fields
    • Sort & limit
    • Row Action
    • Column Summaries
  • πŸ“Forms
    • Forms
      • Customizing Form Fields
      • Passing Linked Record Values to a Form
      • Dynamic Form Field Filters
      • E-Signature Fields
    • Public Forms
  • πŸ“ƒRecord Pages
    • Overview
    • Visibility Settings
    • Hidden Field Values
    • Record Comments
  • ✏️Field Formatting
    • Field visibility conditions
    • In-line editing
    • Conditional Highlight Colors
    • Dates & Time Zones
  • πŸ“ŠCharts
    • Overview
  • πŸ“‚Data Management
    • Export Data
    • Import Data
  • πŸ‘₯Users & Permissions
    • User Table
    • User Management
    • User Roles & Permissions
      • Record-level permissions
      • Field-level permissions
    • Open Sign Up
    • Offboarding Users
    • Testing as other users
  • ⏩Actions
    • Action buttons
      • Create records
      • Update records
      • Bulk actions
      • Barcode Scanner
      • Add a Comment Action
  • ⚑Workflows
    • Workflows
      • On-demand workflows
      • Comment Added Trigger
      • Watched Fields
      • Trigger webhooks
      • Send automated emails
      • For each item in a list...do...
      • Only continue if
      • Create a Record Action
      • Update a Record Action
      • Delete a Record Action
      • Deactivate a User Action
      • Reactivate a User Action
      • Send an Invitation Email Action
      • Add a comment to a record
      • Send a Push Notification
      • Ask Chat GPT Action
      • Summarize Text Action
      • Correct Grammar Action
      • Extract Keywords Action
      • Analyze Sentiment
      • Finish Text Action
      • Send a message to a Slack Channel
      • Send a message to a Slack User
      • Generate a PDF with DocsAutomator
  • πŸ””Notifications
    • Notifications
    • Notification Preferences
  • πŸ“‘API Documentation
    • API Overview
      • Fetching Records
      • Fetching a Record
      • Creating a Record
      • Update a Record
      • Deleting a record
  • βš™οΈSettings
    • General Settings
      • Live Mode
      • Custom Logos
    • Theme & Design
    • Progressive web apps
    • Navigation Settings
    • Spaces
    • Email Settings
    • Custom Code
    • Custom Domain
    • Login & Signup
      • Sign in Options
      • Single Sign On
      • 2FA - Two Factor Authentication
      • Client Portal User Add-On
    • Login Screen
    • User Lists
    • Integrations & API Keys
    • Billing & Usage
    • Support
    • Publishing
      • App Version History
  • πŸ”„Integrations
    • Zapier
    • Make (Integromat)
    • Sign in With Google
    • Intercom
    • SMTP Emails
    • Documint
  • βš™οΈAccount
    • Workspaces
    • Pricing
      • Client Portal Add-on (Legacy)
    • Transferring an App
    • Onboarding Call Preparation
Powered by GitBook
On this page
  • What is a PWA?
  • Benefits of PWA
  • Enabling PWA
  • Instant PWA Functionality
  • Cross-Platform Compatibility
  • Native Push Notifications
  • Frequently Asked Questions
  1. Settings

Progressive web apps

Progressive Web Applications (PWA) are becoming increasingly popular due to their ability to offer a seamless user experience across all devices.

PreviousTheme & DesignNextNavigation Settings

Last updated 4 months ago

In this guide, we will take you through everything you need to know about PWAs and how to enable them in your app.

What is a PWA?

A PWA, or Progressive Web Application, is a web application that uses modern web technologies to deliver a native app-like experience to its users. PWAs are designed to work on any device, regardless of the operating system or screen size. PWAs can be accessed through web browsers and can be installed on the user's device, giving them an app-like experience. As a result, users of your app will have the option to install it, just like a native app.

Benefits of PWA

We have integrated PWA to provide users with a seamless and fast experience. Some of the benefits of PWA:

  • Faster load times: PWAs are designed to load quickly, even on slow network connections.

  • Push notifications: PWAs can send push notifications to the user's device, increasing user engagement.

  • App-like experience: PWAs offer an experience similar to a native app, with a smooth and responsive interface.

Enabling PWA

In order to install a PWA your app needs to be exactly 192 x 192px

Enabling PWA for your app is easy and straightforward. Follow these steps to enable PWA:

  1. Go to your app settings page and select the Progressive Web App option from the sidebar.

  2. Switch the toggle to enable PWA. Please make sure that you have added a title, a description, and a favicon icon and have published your app.

  3. Now, just head to your app and do a reload. You will see a prompt to install the app.

Installing PWA on desktop

Installing PWA on mobile

Instant PWA Functionality

Enabling PWA for your Noloco app is seamless. Simply enable it from the PWA settings in your app. Your app users can then install it directly from their browsers, when they open your app, making it accessible from their home screens.

Cross-Platform Compatibility

Whether your users are on iOS, Android, Windows, or MacOS, they can download and engage with your app as if it were a native application, ensuring a uniform experience across all devices.

Native Push Notifications

Keep your app users engaged with native push notifications. Whether it’s for comments, mentions, or any custom Noloco notifications, this feature ensures that your users stay informed and engaged with your app, wherever they are.

Notifications will still appear in your notification centre, but if notification permissions are given to your app, then notifications will be sent as native notifications, whether the app is open or not.

Frequently Asked Questions

My PWA won't install

Please ensure that you are using a favicon with dimensions 192 x 192px in your project if you intend on installing it as a PWA

How do I install a PWA on iOS?

Simply follow these steps to install your PWA on iOS:

  1. On your iOS device open Safari.

  2. Go to the app URL.

  3. At the bottom of the screen, tap the Share icon (with the arrow pointing up)

  4. Scroll down the list of options, then tap Add to Home Screen.

  5. Tap on Add at the top right.

What plan do I need to enable PWAs?

PWAs are currently available to users on all Noloco plans but please check our for the latest availability

βš™οΈ
pricing page
favicon