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.
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.
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.”
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.
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.
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…
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.
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…
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.
We were able to launch our PWA very quickly. We came up with…
Founder @ Progressier, ex-VP Marketing & Maker of the Very First COVID-19 PWA