Add Pushe web-push to a Flutter website

We know Flutter and we know it’s cool that let’s us use our code base written in Dart to get output for multiple Platforms. One of these endpoints are “Web”. So if you made your website using Flutter, you can add web-push notification ability to it. This is where Pushe comes in.

pushe.co

What is Pushe?

Pushe is a push notification service that helps you analyze your product users as well as notifying them in order to keep them up to date.

Pushe targets and supports many platforms such As Mobile (Android, iOS) and Web. Thus, a multi-platform product can get advantage of Pushe analytics and notification services without worrying about lack of framework support.

Pushe on Flutter

If you made your product interface using Flutter framework, you can target Mobile, desktop and Web. Pushe currently supports Mobile and Web, so it means you, somehow, can take advantage of Pushe in your Flutter app.

If you want to use mobile features of Pushe, definitely try pushe_flutter plugin on pub.dev. But if you plan to apply web-push on your site, follow this article.

Add Pushe to your Flutter website

Register a site

First thing to do is to register your site on Pushe console. To do so, go to the Pushe console and signup or sign in. Then create a website:

Create a site at console.pushe.co

Customize web-push dialog

To be able to send notification to your users, you must ask them to join or subscribe to your notification service

After creating a site, do your customization for your web-push dialog :

Customize Webpush dialog at console after creating your app

The next step gives you an app_id in a code snippet. We need this peace of code that looks like this:

Add the code to index.html

Having this snippet, go to your Flutter project and open web/index.html and change it to this way:

Import service worker (HTTPS only)

If your site is a Https website, you need to import the service worker as well.

To do that, create a file named pushe-sw.js beside index.html add the following line to it:

importScripts("https://static.pushe.co/pusheweb-sw.js");

Run and test

Last but not least, run your app on a Chrome to see the dialog of Pushe:

That’s it. By deploying your website you’ll be able to send push notification on users that subscribed to your notification service.