If you’re a Notion user, chances are you’ve stumbled upon one of these new Notion-to-Website converters. Products like Super, Fruition or Potion take your Notion pages and turn them into a fully-fledged website — hosted on a custom domain, with improved SEO and prettier URLs.

Go one step further

As the maker of Progressier, I thought… hey why not build a direct Notion-to-PWA integration? Rather than just making your Notion pages a website, turn them into a Progressive Web App with a splash screen, installation and push notifications. There’s literally no additional code to write.

Within the web of functionality we typically call Progressive Web App (PWA), there’s one that I’ve always found particularly interesting: push notifications.

I built Progressier to help developers make any site a PWA without having to write any code. So, in the process, I had to build a push solution. And oh boy…that wasn’t easy.

In this article, I’ll walk you through some of the challenges we encountered during the development process with Firebase/GCP and how we overcame them. Note that this article does not contain any code snippets.

Challenge 1: Personalization vs marketing

Push notifications…what are they for? Well, there are two main occasions…

A month ago, I published Your PWA is going to break in August 2021 to help developers deal with the then-upcoming changes in Chrome 93 that popped up in everyone’s browser console “Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable.

Google is backing off

Great news! A few days ago, Google decided to pause their plans. And it looks like those plans are going to be on hold for a while — if not indefinitely.

Augment your Bubble.io app with PWA installation, push notifications & offline

The backstory

In January 2020, I gathered a couple of friends and together we built — on a hunch — the very first COVID-19 app, modestly entitled coronavirus.app.

PWA installation on iOS (left) and Android (right)

One of Google’s best resources about PWA development is How to provide your own in-app install experience. Among other things, it explains in great detail how to create an install button and how to detect when a PWA has been installed.

It works great… on Chrome.

What does it take to make a browser-agnostic install button?

It wouldn’t be fair to expect Google to write documentation for other browsers. No problem. But since the whole point of PWAs is that they work everywhere, an install button should by definition be browser-agnostic.

(Side note: With Progressier, creating an install button is as simple as adding <button class="progressier-install-button"></button>in your code but if…

My (totally random) prediction: 52% of all PWAs will break with Chrome 93

UPDATE: On April 14, Google announced they would be pausing their plan to roll out this feature. Check out my follow-up article here.

If you have a PWA and you’ve recently looked at your console or app manifest, you may have noticed this message:

Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. https://developer.chrome.com/blog/improved-pwa-offline-detection for more information

Or if you’re using Edge:

Site cannot be installed: Page does not work offline. The page will not be regarded as installable after Edge 93, stable release August 2021.

You see…

Right before 2020 turned into a global shitshow, I gathered a couple of friends and together we came up with an idea for a simple little app we thought would be helpful. Humbly called The Coronavirus App, our app ended up being used by more than 15 million people, making it — I believe — one of the most widely used PWAs ever.

I love the web. And I love PWAs. What’s not to love, really? With a PWA, you only have one code base to manage. Your app works everywhere. …

Spoiler alert: I found some intriguing patterns…

As one of the makers of The Coronavirus App (if the link doesn’t work, check this), I’ve received countless emails asking me whether the data that the app displays could be trusted. My answer has always been the same:

“We can’t really know. But that’s the best data we have at our disposal. “

With the Coronavirus App, the job was to synthesize data reported by official sources as quickly and accurately as possible — and making it visually accessible. We’re app developers — not epidemiologists nor government officials. So when government report…

The Coronavirus App has been helping the world track the spread of COVID-19 since January 28

Earlier this year, we built the very first COVID-19 PWA, humbly named “The Coronavirus App” (if you can’t access this link, check this). Progressive Web Apps (or PWA) are great. They offer the best of both worlds: they look and feel like native apps, but under the hood, they’re actually websites — built with standard HTML, CSS and Javascript.

In these turbulent times, the fact that The Coronavirus App was a PWA didn’t just help — it was probably one of the main reasons for its success.

Regain control of your own app

We were able to launch our PWA very quickly. We came up with…

Kevin Basset

Founder @ Progressier, ex-VP Marketing & Maker of the Very First COVID-19 PWA

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store