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

  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 installation 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.

Installation Page

Get a unique installation 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.

Request Notifications After Installation

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.

What they're saying

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

Ready to turn your JavaScript app into a PWA?

Try our PWA builder free of charge for 14 days. No credit card required.

Get started See plans