Forum Academy Marketplace Showcase Pricing Features

Native Bubble App

Hello everyone!

After reading myself through the forum, there were plenty of incomplete threads, that more often than not ended up referring to external resources and/or prmoting their services by 3rd parties.Any such comments on this thread, could please be avoided where possible.

To get to the point, Bubble offers the “Native App” flag on a page, but to the best of my understanding this flag offers no benefits. In the past, this meant you could request for this page to be turned into an APK and get assistance by the bubble support team to submit to the play stores.
This information has been removed from the disclaimer displayed when setting the flag.

That said, I’ve played around with adding a manifest to turn the PWA installable, manually, to no avail. At this point Iam getting rather frustrated that this service / feature appears to no longer be available, yet the flag can still be set. Some suggest the “Adding to Homescreen” function as the installation of a the PWA, which isn’t the case, it merely creates a shortcut and has nothing to do with Native App resemblance. Hence, it doesn’t offer a standalone experience, but merely opens a tab of said bubble website in the chrome browser.

Not looking to rant, but geniuine advice. Below are examples:

This is the Bubble App which includes the Manifest and this page has the “Native” flag set

You can read out and see that the manifest is being served

Here is ahow-to-guide for proper PWAapps and its Manifest

This is the outcome:

As you can see, “Progressive Beer” can be installed accordingly as it should work on Chrome & Android, the Bubble App Page “Tasks” however can NOT. Any explanation about this “faux” feature?

1 Like

SOLUTION:

Foreword - With the below solution, you can only have ONE native app per Bubble Instance. It DOES NOT utilize the “Native App” Flag, but creates a manifest manually. I still believe Bubble needsto look at creating Manifests PER PAGE, in relation to the “Native App” flag.

Nonetheless, here it goes:
Prep-Work

  • Go to: https://www.pwabuilder.com/
  • Create your Manifest (select ‘Standalone’ Display)
  • Create a “cache-first network” worker
  • Open Text Editor & Copy Manifest Content into a file
  • Open Text Editor & Copy Worker Content into a file
  • Create Icons in Size 192x192 && 512x512 (i.e. via Pixlr.com/e)

Installing Workers

  • Open your Bubble App

  • Go to Settings ->SEO/Metatags

  • Paste below into the “Script/Metatags in header” field:

      <link rel='manifest' href='/manifest.webmanifest'>
      <script type="module"> 
      import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
      const el = document.createElement('pwa-update');
    
      document.body.appendChild(el);
      </script>
    
  • Scroll to ‘Hosting files in the root directory’

  • Upload your icons & name the files as called in the manifest (i.e. icons-192.png)

  • Upload your manifest & name it “manifest.webmanifest”

  • Uploadyour workerfile & name it “pwabuilder-sw.js”

  • Deploy -Test -enjoy

Conclusion:

  • Its a workaround for a feature that should be available by default by clicking the “Native App” flag
  • It used to be available but Bubble appears to have stopped caring (!?)
  • By using “Shortcuts” you can add additional sections of your webapp as Apps"within the app"
  • Not the best way to go about it, but now customers can install via browser & it feels more like an app
  • The “Back” button, in the app, navigates pages back, so best to build the app accordingly by moving between pages, in contrast to the suggested “don’t use navigate” by bubble. I.e. Instead of using states, use “URL” texts for modifications and then navigate so you can “back” accordingly in the app.
  • Its pretty much Backwards to its intentions, but hey, at least it works.

About time my team finishes the next-gen no-code app that actually does APPS and not websites like Bubble. (Scaling Horizontally & Vertically, %sized Fonts, %margins, Seamless Deploy to Stores) - Stay tuned.

1 Like

Brief update:

  • When appsare in “FullScreen” mode, they get a bit twitchy when the keyboard opens
  • The “Cache-First Network” Service Worker causes a loop in the update, requiring cache to be cleared for the app / page after every deployment (very bad for end-user)
    — Using the “Offline copy of Pages” Service Worker, this issue doesn’t occur. Yet to be fully tested. Apparnelty however, the cache-first worker,seemsto be the only one (from PWABuilder) that allows the app to be installed on Chromebooks (outside Android emulation) - On Mobile,the Offline Copy of Pages oneworks find as aService Workerto get installability going :frowning:

– If anyonehas a better service worker, shoot ahead. Otherwise, well, we know Bubble isn’t perfect, and you’re happy to support us in replacing it :smiley: