Forum Academy Marketplace Showcase Pricing Features

Creating a PWA in Bubble that Prompts a user to Copy to Homescreen

I have been working off and on trying to get Bubble to run as a PWA. More specifically, I want to be able to build an app that has some offline capabilities and prompts the user to copy to the user’s homescreen when they first launch the webapp.

I have seen references to OneSignal plugin, but that does not seem to give me a PWA that will prompt the user to copy the app to their homescreen. But it does provide push notifications, which I will add when I convert to a native app with BDK.

I have also seen references to building the service worker javascript and the manifest.json. But they don’t seem to work and I get a number of errors when I look at the Console log and click on the Lighthouse tab and run the report.

What follows is what I have done, and the errors the Lighthouse report shows for the PWA portion of the report.

I have a manifest.json file which is called from the SEO Metatags in Settings

And I have a PWA script that should prompt the user top copy the app to the homescreen when they load it on a mobile device. So I have this script launch when they load the index page.

const pwaTrackingListeners = () => {
const fireAddToHomeScreenImpression = event => {
fireTracking(“Add to homescreen shown”);
//will not work for chrome, untill fixed
console.log(‘fireAddToHomeScreenImpression event’);
event.userChoice.then(choiceResult => {
fireTracking(User clicked ${choiceResult});
});
//This is to prevent beforeinstallprompt event that triggers again on Add or Cancel click
window.removeEventListener(
“beforeinstallprompt”,
fireAddToHomeScreenImpression
);
};
window.addEventListener(“beforeinstallprompt”, fireAddToHomeScreenImpression);

//Track web app install by user
window.addEventListener(“appinstalled”, event => {
fireTracking(“PWA app installed by user!!! Hurray”);
});

//Track from where your web app has been opened/browsed
window.addEventListener(“load”, () => {
let trackText;
console.log(‘addEventListener fireAddToHomeScreenImpression tracking event’);
if (navigator && navigator.standalone) {
trackText = “Launched: Installed (iOS)”;
} else if (matchMedia("(display-mode: standalone)").matches) {
trackText = “Launched: Installed”;
} else {
trackText = “Launched: Browser Tab”;
}
fireTracking(track);
});
};

However, when I run lighthouse it gives me a series of errors that I do not understand how to fix.


Progressive Web App

These checks validate the aspects of a Progressive Web App. Learn more.

Fast and reliable

Page load is fast enough on mobile networks

Current page does not respond with a 200 when offline

If you’re building a Progressive Web App, consider using a service worker so that your app can work offline. Learn more.

start_url does not respond with a 200 when offline

Timed out waiting for start_url (https://addengagement.bubbleapps.io/version-test/index?utm_source=homescreen) to respond.

Installable

Uses HTTPS

Does not register a service worker that controls page and start_url

The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.

Web app manifest meets the installability requirements

PWA Optimized

Redirects HTTP traffic to HTTPS

Configured for a custom splash screen

Sets a theme color for the address bar.

Content is sized correctly for the viewport

Has a <meta name="viewport"> tag with width or initial-scale

Does not provide fallback content when JavaScript is not available

The page body should render some content if its scripts are not available.

Does not provide a valid apple-touch-icon

For ideal appearance on iOS when users add a progressive web app to the home screen, define an apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG. Learn More.

Manifest doesn’t have a maskable icon

A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more.

Additional items to manually check (3) These checks are required by the baseline PWA Checklist but are not automatically checked by Lighthouse. They do not affect your score but it’s important that you verify them manually.

I would greatly love to put this to bed, and help others build PWA ready projects.

Thanks
Erik

2 Likes

Good day! Were you able to figure out the problem?) Have you succeed?

Here is a service to convert your bubble app to PWA. https://pwaconverter.tech/

Wow, that’s great news!

Have you managed to solve all the aforementioned problems in this post? Or are there any limitations that apps built on Bubble face?

Personally, I’ve been using this software called Progressier.
It has most of the features that the OneSignal SDK has for push notifications, and it also takes care of the add to home screen functionality.

2 Likes

I just created a tutorial for this, based on my own experience. Hope this sheds some light over very common issues.