Progressive Web Apps

Do you have an idea when you will actively work on native stuff and so on PWA questions ?
To improve user experience, the possibility to work offline offers to bubble’s users many possibilities.
Thank you.

Is this appear to be a decent web app or pwa https://webapp.aiwok.co.uk/ I got this example from https://progressive-webapps.co.uk/

pwa is the future native mobile apps is the past

3 Likes

pwa is the future native mobile apps is the past

My friend has a development company and he told me the same, that native apps will fall. What does bubble developers think of this topic today? I know this discussion was old but I just tried a progressive website and it’s wooosh, so fast compared to the app I was building with bubble (SPA).

But do PWA work truly offline? How is data stored while offline, and synced when connection returns? If there is no data connection when the app is first opened will it still work?

I think that is possible to create a pwa in bubble, but you will depend on the response times of bubble and its files of js, try to test any bubble app with the lighthouse tool of google.

Maybe creating a plugin where you can add the necessary js code to register a service worker and a manifest will be sufficient to have the minimum requirements for a pwa.

I think that having all the benefits of a pwa will be not possible but maybe you can have a splashscreen and an installation icon for your app in bubble.

Also for caching certain changes in your data, I think that you need to expose a rest api for your data in bubble, and do the changes with a rest call, if you do that maybe it will be possible to have an offline pwa caching the changes of the data

I will try to do that in the near future, I promise I will share my results

I think Google’s Flutter and Firebase should be a consideration. Since it’s write-once, package-twice, the time to the play/app stores is dramatically reduced, and easier because it uses the Dart language. They play really well with bubble and embrace more http-based concerns. As one’s app grows, it will need new, native features. Those are slow to be implemented for webviews, meaning options for PWA manifests might be a waiting game.

1 Like

We do! we are working on a tutorial to share the results.

Tldr; you can have a pwa in bubble, but still will not work offline, even wont display the page, just a blank page, but you can receive notifications and install it as a regular pwa

5 Likes

I really want to read your tutorial! I really want to know how to get an app like button for users’ homescreens and offline messaging.

3 Likes

Hi Daniel - any update on your pwa tutorial?

Thanks

1 Like

Progressive Web Apps can be done with Jasonette.

http://forum.bubble.io/t/bubble-jasonette-native-mobile-apps/49470/29

1 Like

Hi @zelus_pudding

You maybe want to give a try on this free wrapper (having also all native functions).

1 Like

we have our tutorial but is in spanish, I havent have time to translate it

3 Likes

Hi Daniel.gs.gg, Thanks for sharing that document !
-Please could you tell me if you tested yet, and if it working ?
-Also, What we need, make it before constructing or after our job in Bubble is done ?
Thanks

Same here, keen on the tutorial

1 Like

@avala @rico

YES! It does work, we have one application running on that, the pwa configuration can be added at any time of your development process.

The only thing that can’t be accomplished because the way bubble is created, is the possibility of having offline functionality, but you can have the auto-installing feature and notifications

I promise I will upload an English version, Im having lots of work lately

6 Likes

You talking about magic leap

Hi, would have the English Version of your paper (PWA) for me? I have set it up “on my own ideas” with some amended JS, but I think the problem is the “non deferring” Js around the page, which is then making the app quite slow at start. So I would be happy to check your tipps out! Thank you so much, to defer the exec. of js,

If you build your Bubble app:

  1. using layers,
  2. place a fixed bar at the bottom and at the top (+nice design),
  3. place a few lines of meta tags to go full screen and non-zoom and,
  4. get your users to use the Add to Home Screen, which places an icon on the phone screen*

You have an experience that is, for most users, indistinguishable from native.

  • most common reaction I get “oh, I didn’t know I could do that”
    my most common response: “I think some one doesn’t want you to know, wink!”

Rick
Developer

5 Likes

:thinking: interesting…