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 preventbeforeinstallpromptevent that triggers again onAddorCancelclick
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.
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_urldoes not respond with a 200 when offlineTimed 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_urlThe 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 withwidthorinitial-scaleDoes 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-iconFor 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