PWA with bubble

Need help Mobile
1

Hello community,

I was wondering how I can create a PWA with bubble?

Or is a PWA basically just a website built for use on mobile devices? But how do I get the download-feature (that users can download my PWA and have it on their phones like a native app, without the browser tab)

Thank you!
Felix

2 Likes
2

also interested in this.

4

Me too. Very interested. Some kind of example or tutorial would be great

5

Interested also. :grin:

6

Search for Jasonelle.

7

You can use pwabuilder.

1 Like
8

You can build almost your entire native app in Bubble / Jasonelle:

1 Like
9

Now with Jasonelle


  1. What kind of code do you need to learn?
  2. How easy is it to make a website into a PWA?
  3. Do I have to fix every single feature that I have on my size based on all the different phone sizes or does Jasonelle automatically take care of it?
  4. What is the cost?
  5. How long does it take to convert a website into a PWA?
  6. Example apps?

Thanks

10

Google is your best friend.

1 Like
11

I have issues with my wrapped app (webview gold) so I am thinking of giving PWA Builder a try. Have you used it and is there anything I need to look out for?

12

Hi @eduKit

I just saw your post!

Jasonelle, like other wrappers, has its own set of execution commands in a json file. But 90% of Native you need are already inside Bubble and plugins. You have no code to learn if you take the file as just to wrap.
If you need special native function, you can follow my post : create a free native app

It depends on how responsive your site is. If your site is 100% responsive for a 320x phone pixel, then it’s easier.

Jasonelle do nothing, just display your html site.

Free, faster than other wrapper when is time to update your app. No more compilation too.

from 1 hour to 6 months? no clue. :sweat_smile:

Nobody until now are sharing their apps, secret weapon I presumed :slight_smile:

Enjoy!

2 Likes
13

What is the difference between a webviewer and a PWA? And what are your issues?

Felix

14

Thank Felix,

I am no expert but in my opinion, the wrapper provides a “browser” with additional features to make the app seem more native. Splashscreen, notifications and icon come to mind. It provides installation files for the 2 app stores.

A PWA also provides those additional features but with the help of a manifest file and service helpers. The PWA can not be listed in the stores but when a user visits a PWA on the web he can be asked to put an icon on home screen and the app opens in full screen, an experience much like an app.

The issues I have are that I have to change splash screen and icon and that the installed qr reader does not open from within the already wrapped app. I will need to re-wrap but don’t know how to do it myself. So I am thinking skipping the app stores all together and just go with the PWA.

Hope I make sense with the above.

1 Like
15

@felix.zehetner @FJP @shu.teopengco @eduKit @rico @sorensong you guys might be interested to check out our latest release. In our humble opinion, there really is no better way to think about building a PWA on Bubble.

1 Like
16

for some reason i just assumed bubble would always yeld to pwa, or at least some similar feature for offline access, as default.

it doesn’t, of course.

nobody really does it now, in the no code universe, do they?

and i tried all the options offered above. none worked very well.

to me, this is what i was expecting:

open website.

go offline.

reload.

all visited pages will work.

ideally, some pages not visited will also work.

just like gatsbyjs.org

now, the weirdest part is


go online.

install.

go offline.

everything should work!

i think gatsby doesn’t install
 but it should, shouldn’t it?

the PokĂ©mon demo almost works, but there’s just so many broken things, including bugs and not really working while offline, that i don’t honestly think it’s worth the trouble.

so, in the pwa aspect, i found it hard to come up with a quick instance of how it should work!

anyway, hope someone can help before i find the answers myself
 :grin:

cheers!

1 Like
18

Hey, I’m currently working on a plugin that will be compatible with bubble to add PWA functionality in 1-click. It’s still in development but will be coming soon if you’re interested: https://instantpwa.io/

2 Likes
19

@felix.zehetner Please note your page name will be your app name and your favicon will be your app icon.

On iOS open your app in safari then “add to Home Screen”.
On android open your app in Chrome then “Add to homescreen”

iOS

android

Your page name will be the app name and your favicon will be the app icon.

1 Like
20

Do you know what could be the issue if the favicon is not displaying as the app icon? The app icon is displaying as a little pic of the page bookmarked instead. Favicon is in the bubble settings of the app and displays when loaded as a webpage

Thanks!

22

Creating a PWA with Bubble is fairly easy (and with Progressier, it takes about 3 minutes). Making your app installable and adding push notifications are pretty much solved problems.

Offline is a bit trickier. You can make your app’s static assets available offline. As of now, it’s not really possible to cache dynamic data retrieved from your Bubble database.

Bubble retrieves data from the Bubble server by making a randomized/anonymized POST request to one of their endpoints. Because each request for the same kind of data is completely different and undistinguishable from similar requests for other kinds of data, you won’t be able to retrieve cache responses when you need them. For example, when the user goes offline and you need to retrieve the response from the cache after a failed network response.

So in short, that means you can make the frame of your app available offline (so that it doesn’t show the offline dinosaur), but the pages will essentially be empty of content. Of course, if your app doesn’t have dynamic user content at all, then you can make the entire app work offline perfectly.