Building a PWA with Vanilla Javascript

Getting started with JavaScript & Progressier

1. 

   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. 

   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. 

   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. 

   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. 

   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?

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.