FM BetterForms Docs
BF Editorfmbetterforms.com
Engineering Reference Docs
Engineering Reference Docs
  • BF Streaming Proxy
  • Updating the Helper File
  • Connection Trouble Shooting Guide
  • Software Testing - Overview
    • Types of Testing
    • UX/UI Checklist
      • Pages
        • Login πŸ”‘
        • Pricing πŸ’΅
        • 404 πŸ€·β€β™‚οΈ
        • Contact Us ☎️
        • Sign Up πŸ‘‹
        • FAQ ❓
        • Blog Post πŸ—ž
        • Careers πŸ’Ό
        • Team πŸ‘«
        • Cart πŸ›’
        • Press πŸ“Έ
        • Search results πŸ”
      • Elements
        • Avatar 😁
        • Badge πŸ“›
        • Button πŸ–²οΈ
        • Card πŸƒ
        • Table πŸ“
        • Icon 🌠
        • Text Field ⌨️
        • Toggle πŸŽ›οΈ
        • Loading ⏳
        • Modal πŸŽ‰
        • Tooltip πŸ› 
        • Search πŸ•΅οΈβ€β™€οΈ
        • Navigation 🧭
        • Radio πŸ“»
        • Checkbox β˜‘οΈ
        • Tabs πŸ—‚
        • Toast 🍞
      • Flows
        • Submitting a form πŸ“¨
        • Making a payment πŸ’³
        • Contacting support πŸ†˜
        • Deleting account πŸ—‘
        • Tracking progress πŸ“ˆ
        • Resetting password 🀫
        • Showing input error 🚨
        • Entering a promo code 🏷️
        • Saving changes πŸ’Ύ
        • Canceling subscription πŸ›‘
      • Topics
        • Responsiveness 🎚
        • Typography πŸ”€
        • Dark mode πŸŒ‘
        • Accessibility 🚹
        • Colors 🎨
        • UX Writing ✏️
      • Brand
        • Logo πŸ’ 
        • Social Media πŸ”‰
        • Typography πŸ” 
    • FM BetterForms - Quality Assurance
    • JavaScript Libraries
  • Rollbacks and Version Control
  • BF Server Proxy
  • Base code End of Life - 0.8.78-0.8111
  • Setting up Auth0
    • Introduction
    • Getting started
      • Creating a tenant
      • Creating Application
      • Additional customizations
        • Allowed Callback URLs
    • Creating a Database
      • Choosing different login options
        • Social Connections
        • Username and password (Auth0)
        • Creating new BF Users
        • Using Auth0 in an iFrame
        • Configuring FM BetterForms
        • Additional Notes
  • Create an S3 Bucket on AWS
  • ApexCharts - Getting started
  • BF Enterprise Documentation
    • Overview
      • Features
      • Overview Diagram
    • Requirements
    • Env File
    • Setting up the Server
      • Installation
      • Loading image to a local repository
      • Starting server
      • Restarting Policies
      • Scaling up
    • Hardware Recommendations
    • FM Credentials - Helper file
    • How it works
      • Development
      • Downloading environment data
  • BetterForms Error Pages API
    • Introduction
    • Dynamic Error Page
    • Static Error Page
    • Custom error pages
    • Custom error handlers
    • Error Code List
  • BF Streaming API
  • Creating a PWA
    • Introduction
    • Getting Started
      • Making it installable
      • Browser Support
      • Sending Push Notifications
      • Sending a Push Notification from the API Endpoint
      • Adding DOM Header Insertion to be Available for Offline Use
Powered by GitBook
On this page

Was this helpful?

  1. Creating a PWA
  2. Getting Started

Making it installable

This will be the first feature added to your PWA. We will start by creating a manifest object and passing it as a parameter to a new BF function pwaSetManifest. In this example we added this code to a function in our onAppLoad named action.

let manifest = {
  name: "My Awesome PWA",
  short_name: "My App",
  icons: [{
      src: "LINK_TO_YOUR_ICON",
      sizes: "196x196",
      type: "image/png",
      purpose: "any"
    },{
      src: "LINK_TO_YOUR_ICON",
      sizes: "196x196",
      type: "image/png",
      purpose: "maskable"
    }],
  start_url: "https://your.domain.com/index.html",
  display: "standalone",
  background_color: "#000000",
  theme_color: "#4DBA87"
};
//background_color and theme_color can be customized

BF.pwaSetManifest(manifest);

Next, as part of the onAppLoad as well, we add a new action pwaCustomInstall

{
    "action": "pwaCustomInstall",
    "options": {
        "beforeinstallprompt_actions": [{
            "action": "function",
            "function": "model.isInstalled = false;"
        }]
    }
}

This new action has the options beforeinstallprompt, which are actions that will run before the trapped prompt to install event triggered by the browser when it identifies the web app as installable. The example above shows one way of setting a state variable that we will use to show or hide a button to install the app.

So in this case, we need a key isInstalled in our model.

In our example, once the install button is clicked on, a modal will prompt asking whether the user wants to install it.

{
    "actions": [{
        "action": "showModal",
        "options": {
            "body": "Do you want to get the most out of this app?",
            "buttons": [],
            "slots": [{
                "actions": [{
                    "action": "namedAction",
                    "name": "installApp"
                }, {
                    "action": "hideModal"
                }],
                "component": "button",
                "slot": "button",
                "styleClasses": "btn btn-danger",
                "text": "Install"
            }, {
                "actions": [{
                    "action": "hideModal"
                }],
                "component": "button",
                "slot": "button",
                "styleClasses": "btn btn-info",
                "text": "Not now"
            }]
        }
    }],
    "buttonClasses": "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded",
    "styleClasses": "col-md-2",
    "text": "Install App!",
    "type": "button",
    "visible_calc": "!model.isInstalled"
}

The named action instalApp above has the following code.

{
    "action": "pwaPromptInstall",
    "options": {
        "onAccepted_actions": [{
            "action": "showAlert",
            "options": {
                "text": "Thanks for installing the app!",
                "title": "Welcome!",
                "type": "information"
            }
        }],
        "onDismissed_actions": [{
            "action": "showAlert",
            "options": {
                "text": "If I were you, I'd install the app!",
                "title": "Too bad!",
                "type": "information"
            }
        }]
    }
}

The action pwaPromptInstall is the action that triggers the browser to prompt the user with the actual window that will install the app. This gives the flexibility to trigger this event from anywhere in your app, and customize it according to your needs.

The options onAccepted_actions and onDismissed_actions will run after the user click on Cancel, Install or close the browser’s prompt window.

Our modal looks like the image below.

By clicking on Install, it will trigger the browser event that asks if the user wants to install the app, as shown on the image below.

After installing it, the user will be able to access your web app as a regular native app.

PreviousGetting StartedNextBrowser Support

Last updated 11 months ago

Was this helpful?