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.


Getting started with JavaScript & Progressier
-
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.
-
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. -
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.
-
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.
-
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.
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