Can I wrap different technologies like wordpress

[razfazz]

This project looks very promising! For a borrower like me, however, it is difficult to understand what purpose it serves. Is it for installing a Flutter web application as a PWA and then sending push notifications there or for converting external websites html/js or even wordpress into a PWA?

[bettysteger]

You can can use any website URL, it is not really necessary that you convert your website or wordpress to a PWA. I just used the keyword PWA, because you can already receive push notifications on Android when installing a Progressive Web App (without the native app).

But if you are not interested in adding WebPush functionality in your PWA, the Flutter template makes it simple to add Push Notifications for iOS & Android. You just need to put in your website URL in the main.dart and trigger Notification.requestPermission() in your JavaScript on your external website.

If you just want to send Marketing Push Notifications, it is not even necessary to save the push-token to a specific user.

Maybe i can help more, when I know what you want to do? What kind of Push Notifications do you want to sent?

[razfazz]

thank you very much for your response betty. What I meant is this. Currently you call the page that should be wrapped in the main dart using a webview. Unfortunately some websites don't allow embedding by disallowing iframe embedding or cors access.

It's probably not possible, but my idea is to launch some kind of invisible clickthrough flutter app ( with only a overlay button to request push notifications). (PWA + Notification Support) Then you could make this snippet available to third party. who embed your snipped in their own Index.html.

But as I said I dont think it is yet possible with Flutter, maybe with the new Element Embedding.

[bettysteger]

Unfortunately some websites don't allow embedding by disallowing iframe embedding or cors access.

yes, but webview is not an iframe, so try for example github.com. In the Flutter webview it is allowed, but not in an iframe, see iframetester.com.

It's probably not possible, but my idea is to launch some kind of invisible clickthrough flutter app ( with only a overlay button to request push notifications).

It basically is an invisible flutter app, just your given website is shown in the app. The only JS snippet you need to embed in your own index.html is:

<script>
// need this timeout because flutter app will add window.Notification after page load
setTimeout(() => {
  Notification.requestPermission();
}, 500);
</script>

See demo/index.html.

But what is your use case? Do you need to save the push token to an user? Then you also need to add

function setPushToken(token) { 
  // save token to current logged-in user in your DB 
} 

[bettysteger]

But i know what you mean, I think 😅 i can try make a branch, where this all happens automatically:

1. Show an overlay
2. Request permission

[razfazz]

Thank you for your fast feedback and help Betty! Oh ok, I thought the Flutter Web implementation of Webview uses an Iframe under the hood. I remember that some sites allow localhost to access their site but not when deployed to a website.

That would be great. Then you could add flutter as a kind of addon to an existing page and draw different overlays over the native page with flutter.