Adding PWA features to your jQuery site in 2023

Find out how to add PWA features to your jQuery site in just a few minutes. Make your jQuery PWA work offline, make it installable across browsers and devices, and send push notifications without writing any code.

4 min100% compatible
jQuery Logo
Cover image for Adding PWA features to your jQuery site in 2023

Getting started with jQuery & Progressier

  1. Illustration screenshot for Sign up for Progressier

    1Sign up for Progressier

    Click on the Get started button at the top of this page, and select JavaScript in the dropdown menu. Create a Progressier account or log in if you already have one.

  2. Illustration screenshot for Add the script tag to your HTML

    2Add the script tag to your HTML

    Add the script tag provided in the Progressier dashboard to your soon-to-be jQuery PWA. We recommend adding it between the <head> and </head> section in your HTML template. If your jQuery app doesn't use a templating system, you'll have to add it to every page of your app.

  3. Illustration screenshot for Add the service worker file

    3Add the service worker file

    Progressier also comes with a downloadable service worker file. If your jQuery app already uses a service worker, you can instead import it into your existing one using importScripts. The service worker makes your app work offline, handles delivery of push notifications, and is a necessary requirement for the installation prompt to be triggered by browsers.

  4. Illustration screenshot for Install your PWA

    4Install your PWA

    Progressier makes your jQuery app an installable PWA across compatible devices and browsers (with a custom walkthrough on iOS), generates an install page, and gives you access to PWA promotion widgets.

  5. Illustration screenshot for Configure push notifications

    5Configure push notifications

    Last but not least, you can configure how and when users of your app should be prompted to allow push notifications. Push notifications are available in practically every major browser. With Progressier, you can send push notifications from our dashboard. You can also connect your own user data and send push notifications from our API programmatically.

Which PWA features does jQuery support?

Android Installation

Let users install your app on their Android device. It works exactly like a native app.

iOS Installation

Your PWA is installable on iOS and iPad OS. It will open in its own standalone window. Progressier shows users custom instructions.

Windows Installation

Make your app a standalone desktop app that open in its own window. Your PWA can be installed from Chrome and Edge.

macOS Installation

Progressier helps users add your jQuery PWA to their Docks for quick access.

Chrome OS Installation

Enjoy native PWA support for your app on Chrome OS.

Install Page

A unique page that helps users install your jQuery PWA on their devices with custom instructions for each compatible platform.

Original Domain Installation

Your jQuery PWA can be installed from your existing domain.

Web App Manifest

A web app manifest is a basic browser requirement for PWAs. Progressier outputs it automatically based on your preferences.

Service Worker

A service worker is a JavaScript file that runs in the browser continuously even when the page is not open. It's what allows push notifications to be delivered and resources to be cached intelligently. Progressier allows you to create, manage, customize your service worker without having to write code.

Cache Static Resources

Progressier lets you build caching strategies without writing code so you can easily cache resources and make them accessible offline.

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

Send push notifications to up to 1,000,000 users in one go within the Progressier dashboard or via the API.

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

Link user data like emails, names, status to push subscriptions, so you can easily notify someone from your product directly or from our dashboard.

In-App PWA Promotion

Promote installation of your PWA with a floating action button in the body of your app.

Offline Alerts

Show a custom alert when a user loses network connectivity.

Request Notifications After Installation

Progressier asks users to allow notifications right after they've installed your app, which generally results in a higher subscription rate

Install & Push Analytics

See in real-time and track over time how users install your PWA and allow push notifications.

Programmatic PWA Creation

Create new Progressive Web Apps dynamically with our API on different domains or subdirectories.

Google Play & App Store Upload

Easily upload your app to Google Play or the App Store with our PWABuilder integration.

Why choose jQuery and Progressier for your PWA?

If you're considering whether you should create a new app with jQuery in 2023, the answer is probably no. jQuery is an ancient framework that no longer makes a lot of sense nowadays. Vanilla JavaScript has caught up with jQuery to the point where most of the features that made jQuery a convenient tool back in the day are now available natively in the browser.

That being said, jQuery is still used by 77.4% of websites so if you're on this page, there's a good chance your website is still using jQuery. Whether your site is built using jQuery, Vanilla JavaScript, or a more modern framework like React or Vue.js, you can build a fully-featured PWA. The choice of framework doesn't really matter, since the basic installation functionality of PWAs really only has three mandatory requirements, i.e. a domain secured by a SSL certificate, a service worker hosted at the root of your domain with a listener for the fetch event, and an app manifest.

Should you replace jQuery in your PWA?

As they say, "If it ain't broke, don't fix it". I wouldn't recommend rewriting your app to remove dependencies on jQuery. I've done that once a few years ago, and this is a bigger effort than you'd think, especially if your app uses some of the many jQuery plugins or libraries available. And there's very little upside to making that change unless your app has become spaghetti code that prevents you from adding new features.

A better approach might be to eliminate jQuery dependencies bit by bit by only building features with native APIs from now on. For example, you can use the native document.querySelectorAll function available in every modern browser instead of the jQuery $ function.

Should I host jQuery on my domain?

An important part of the PWA functionality is the ability to make your app load and work offline. In general, it's easier to define caching strategies when the resources are hosted on your domain. Although it is generally recommended to use a CDN-hosted version of jQuery, I'd probably suggest it hosting on your own domain, so you can make sure it's always available when offline with the right caching strategies.

Does my jQuery PWA need to be a SPA?

A SPA, or Single Page App fetches data from a web server and rerenders its view accordingly, rather than loading distinct new pages. In my experience, many older apps built on jQuery aren't SPAs. And that's fine either way. SPA tend to look and feel a bit more native, but the traditional method also has its own advantages, e.g. with regards to SEO. A PWA built with jQuery does not need to be a SPA.

Your app here

Ready to turn your jQuery app into a PWA?

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

Get started See plans