Native Bubble App

Need help Mobile
1

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?

3 Likes
2

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.

3 Likes
3

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:

1 Like
4

Hi David, this has been really helpful, but I just can´t get the SW working. I think it is something with the script
image

The files are okay, you can se de .js here:
https://s3.amazonaws.com/appforest_uf/f1609802994859x902427597384818400/pwabuilder-sw.js

Do you know what am I missing?

Maybe it is because the .js are stored in aws?

5

Uncertain where your particular issue is, I definitely should update this post to reflect the latest status as I’ve made some changes to mine, to improve performance as the old Service Worker cuased Cache issues when releasing an update through Bubble interface.

The latest version of Startly however, works perfectly fine and new releases can be pushed. Let me post all of my relevant code here for you:

First and foremost: SEO Metatag in header:

<link rel='manifest' href='/manifest.webmanifest'>

<!-- This is the "Background Sync" service worker -->
<script type="module">

import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);
</script>

File Contents:

manifest.webmanifest

{
      "short_name": "Startly",
      "name": "Startly",
      "description": "Startup Management Platform",
      "icons": [
        {
          "src": "icons-192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "icons-512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ],
      "start_url": "/app",
      "background_color": "#F79616",
      "display": "standalone",
      "scope": "/",
      "theme_color": "transparent",
      "shortcuts": [
        {
          "name": "Tasks",
          "short_name": "Tasks",
          "description": "Be Productive!",
          "url": "/app_tasks",
          "icons": [{ "src": "/startly_tasks-192.png", "sizes": "192x192" }]
        },
        {
          "name": "Messages",
          "short_name": "Messages",
          "description": "Let's Network!",
          "url": "/app_chat",
          "icons": [{ "src": "/startly_chat-192.png", "sizes": "192x192" }]
        },
        {
          "name": "Benefits",
          "short_name": "Benefits",
          "description": "Save over €200.000 today!",
          "url": "/app_benefits",
          "icons": [{ "src": "/startly_benefits-192.png", "sizes": "192x192" }]
        }
      ]
    }

Next up the 2nd file
pwabuilder-sw.js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

const CACHE = "pwabuilder-page";
const offlineFallbackPage = "offline.html";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener('install', async (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => cache.add(offlineFallbackPage))
  );
});

if (workbox.navigationPreload.isSupported()) {
  workbox.navigationPreload.enable();
}

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResp = await event.preloadResponse;

        if (preloadResp) {
          return preloadResp;
        }

        const networkResp = await fetch(event.request);
        return networkResp;
      } catch (error) {

        const cache = await caches.open(CACHE);
        const cachedResp = await cache.match(offlineFallbackPage);
        return cachedResp;
      }
    })());
  }
});

Next, create & upload the files asseen in screenshot here:

Screenshot 2021-01-05 at 17.35.28
Screenshot 2021-01-05 at 17.35.28715×470 42.2 KB

Hope this helps anyone struggling with this. the PWA is truly worth it!

It’s a real shame Bubble doesn’t offer this feature any longer, properly. But hey, all the more reasons to speed up with the development ofour custom platform to kick Bubble’s bum :stuck_out_tongue:

5 Likes
6

Thanks a lot David!

For the ones reading the thread, my issue was that the start_url and the scope were not properly defined.

1 Like
7

Thanks for posting this guys. I’m working on a project now for a niche online community and I know they will want a real stand alone mobile app. With this being the solution to the issue, I have to say thanks as someone planning to use it to make my app into a true stand alone app.

8

To iterate, this does not offer a native app for mobile, but you have to go through a hoop or too to install and the consumers Chrome HAS TO be up to date. Has a few customers who I had to do a side-by-side to help them get the app.

That said, I’m currently considering writing a script to be run in a console, to take the PWA and build a native app from it which can be released on the Google Play store. If there is interest,just let me know. I don’t expect to charge anything for it unlike some other posts, just want to help out :smiley:

4 Likes
9

Thanks for your response David.
It was timely, unlike mine here. As someone who doesn’t have much code experience (just a very little html from a year ago.), your offer is a difficult one to ignore. If you don’t mind helping, then I’d like to work with you to figure out how I can offer my app as a stand alone mobile native app.

From your post above however, I got the impression that we could export the files our apps here and use them to create some sort of APK. I guess I jumped to conclusions since you never mentioned the creation of an APK or Apple package.

Your help would greatly be appreciated.

10

Hi there,

We’re not done with this task and it might take a few days till we get there. But yes indeed, the intention is to offer an APK in order for the PWA to be added to Google Play Store and downloaded as a native app, instead of being installed through the Chrome Browser.

Happy to see what we could do there for you, why don’t you pop me an email and we can chat about your specific needs: contact@anzu.one

If it’ll be as easy as running is through the script, you’re good to go at no charge.

1 Like
12

Hi @David_Griffin,
Does this mean that I have to create my app all in one page?

13

Yes and no. It is recommended (in the banner by Bubble), to not move between pages on the ‘native mobile’ setting.

That said, on my end that actually works with limited issues. The whole ‘native app’ thing is honestly confusing. The PWA works fine.