Building a PWA with Vanilla Javascript

Use Vanilla JavaScript (or other flavors like React, Angular, and Vue) to create a PWA with push notifications. In this article, I'll tell you (almost) everything there is to know.

10 min100% compatible
JavaScript Logo
Cover image for Building a PWA with Vanilla Javascript

Getting started with JavaScript & Progressier in 5 easy steps

  1. Illustration screenshot for Sign up for your trial

    1Sign up for your trial

    Sign up to Progressier, create a new PWA, choose JavaScript (or your favorite framework) in the dropdown menu, and activate your free trial.

  2. Illustration screenshot for Add the Progressier script to your HTML template

    2Add the Progressier script to your HTML template

    Copy the code snippet we provide you in the Progressier dashboard and then paste it right before the closing head tag in your HTML template.

  3. Illustration screenshot for Download our service worker file

    3Download our service worker file

    Download the service worker we also provide you in the Progressier dashboard and then upload it to the root of your domain.

  4. Illustration screenshot for Install your app

    4Install your app

    You get a unique Install Page located at custom URL that looks like this: install.page/covid. Open it and install your app, and then subscribe to push notifications.

  5. Illustration screenshot for Send yourself a test notification

    5Send yourself a test notification

    Now all you need to do is send yourself a test notification from the Progressier dashboard (or alternatively our API) to make sure everything works all right. And you're done!

Which PWA features does JavaScript support?

Android Installation

Get your PWA installed on any Android smartphone or tablet, just like a native app.

iOS Installation

Progressier walks users through the process of installing your app on their iPad or iPhone.

Windows Installation

Your JavaScript PWA is installable from Google Chrome and Microsoft Edge and can be added to a Desktop or Taskbar.

macOS Installation

Get your app installed on macOS from Chrome — Progressier walks users through installing your PWA to their Docks.

Chrome OS Installation

Let users add your PWA to their Chrome OS laptop.

Install Page

Get a unique Install Page for your app that promotes installation of your PWA and guides users with custom instructions for each platform.

Original Domain Installation

Your app is directly installable right from your own domain

Web App Manifest

Progressier creates an app manifest with the name, logo, theme color and display preferences of your PWA.

Service Worker

A service worker is JS file that runs separately from the main browser thread. It can intercept network requests (allowing to put resources in the cache or retrieve them from there) and deliver push notifications to someone even when they're not actively using your app. With Progressier, you can define these rules without having to write any code at all.

Cache Static Resources

Progressier has a built-in caching strategy builder that lets you configure how each type of resources should be cached and refreshed. No code to write.

100% Offline-Ready

If you have full control over all the resources required for your website to work, you can make your site work 100% offline in Progressier without writing a single line of code.

Push Campaigns

Notify all your users of news in your app with our dashboard and/or API. Progressier manages all user push subscriptions for you.

Personalized Notifications

Send notifications to any particular user manually or programmatically. All your need is their email, their user ID or any other information that identifies them in your system.

Connect User Data

Connect your own user data (emails, account type, etc). So when a user authorizes push notifications in your JavaScript PWA, their data is also saved along with it.

In-App PWA Promotion

Everything you need to encourage users to install your app on their devices.

Offline Alerts

Display an in-app alert when users go offline.

Push Prompt on Standalone

Automatically prompt users to authorize notifications after they've installed your PWA on their device.

Install & Push Analytics

Progressier tracks installs of your JavaScript PWA over time. Also tracks push subscriptions.

Programmatic PWA Creation

Create JavaScript PWAs programmatically with our API.

Google Play & App Store Upload

With our PWABuilder integration, you can list your JavaScript PWA on Google Play or the App Store.

"We had developed some PWAs in-house. Then... we tested Progressier. The very next day, we moved all our PWAs to Progressier. Fast, simple, well documented, Progressier covers all needs in PWA development. Intrepid and responsive support, always available to accommodate new requests."
Photo of Achille D'Aniello Achille D'Aniello CEO @ Komunica
"I went looking for a simple way to create a progressive web app for our users. After spending a few hours trying to figure this out on my own, I stumbled upon Progressier on Twitter. I had a PWA ready to go for my app in minutes, giving me exactly what I needed. Super simple for users to implement!"
"Progressier is very easy to use. The integration with my product was quick and simple."
Photo of Antonio Carlos Amaral Antonio Carlos Amaral CEO & Founder @ Mabuya Tech
"I'm a first-time, non-technical, no code SaaS developer, and Progressier has been a critical no code tool for me to extend my web app as a PWA."
Photo of Benjamin Hillman Benjamin Hillman Bubble Developer
"Progressier is perfect for startups that don't want to waste time on tracking, web push and service workers."
Photo of Kilian S. Kilian S. CTO in Austria
"If you want to turn your web application into a PWA but have no idea or desire to learn how to code for it, Progressier makes it as easy as possible."
Photo of Joel S. Joel S. Software Engineer in Belgium

Why choose JavaScript and Progressier for your PWA?

PWA stands for Progressive Web App. A PWA is kinda like a native app, except that under the hood it's made with the same technologies used by web developers to build websites (HTML, CSS & JavaScript).

Just like any other app, they're installable on mobile (Android & iOS). Arguably, they're even better than native apps, because they're also installable on desktop (Windows, macOS, Chrome OS).

By choosing Progressier, you get the best possible PWA implementation for your app. And it also comes with a complete push solution and an easy way to build caching strategies.

What's the best JavaScript framework for a PWA?

That's a common question, and the answer is that it doesn't really matter. Under the hood, every framework uses JavaScript anyway. And all PWA functionality uses native browser APIs. So whether you use React, Angular, Vue or good old Vanilla Javascript, the steps will always pretty much be the same, i.e. adding the script to your HTML template, and adding the service worker to the root of your domain.

That being said, some frameworks like React already have their own service worker implementation. You can add Progressier to your existing service worker of course, but it sometimes results in incompatibility issues. So if you can start from scratch and use the service worker we provide, you'll have a much easier time.

I'm personally a Vanilla JavaScript proponent, so I would generally encourage you to only go with a framework if you really absolutely need it. Frameworks come and go — JavaScript stays. With a good understanding of the underlying technology, you can actually build more stable and manageable apps than with a framework.

Should I use a no-code solution instead?

It depends on what your app does exactly. If offline and caching is important, stick to code. There aren't any no-code builders yet that allow to create a perfect offline experience. If your app is complex, also stick to code. If you're building an MVP and you want it done quick, no-code builders like Bubble and Webflow are good solutions.

Your app here

Get started

Ready to create a PWA with JavaScript? Get a universal installation link today with our delightfully simple PWA toolkit.

Get started See plans