in Resources

Converting a Web App to a PWA with Push Notifications using Firebase

default image

Hey there!

So you‘re looking to take your web app to the next level by making it a progressive web app? Well you‘ve come to the right place!

Converting to a PWA can seriously upgrade your users‘ experience and engagement. But it does take some work. In this guide, I‘ll walk you step-by-step through everything you need to know to convert your web app and add push notifications with Firebase.

What is a Progressive Web App?

A progressive web app takes a website and levels it up with superpowers like working offline, push notifications, and an installable mobile experience.

Essentially, it‘s the best of the web combined with the best of mobile apps. This chart sums up the key benefits well:

Native App Mobile Website Progressive Web App
➕ Fast ➖ Slow ➕ Fast
➕ App store discovery ➖ Hard to find ➕ SEO-friendly
➖ Siloed ➕ Linkable ➕ Linkable
➖ App store required ➖ No push notifications ➕ Push notifications
➖ Native development ➖ No install button ➕ Installable

As you can see, PWAs give you the offline experience and speed of native apps with the connectivity and discoverability of the web. It‘s truly a hybrid in the best possible sense!

No wonder PWAs are exploding – by 2024, global PWA revenue is projected to grow to over $919 billion according to Statista. Major companies like Starbucks, Uber, Twitter, Pinterest, and many more have already adopted PWAs with great success.

97% of Pinterest‘s traffic now comes from their PWA. And Uber saw conversions from desktop promotion to app install increase by 2.8X after switching to their PWA.

The data shows PWAs drive real business results. Converting gives you the opportunity to get ahead of the curve and dramatically improve how your users experience your app.

Why Converting to a PWA Is Worth It

More specifically, here are some of the major upsides you can expect from enhancing your web app with progressive features:

Improved user experience – With features like push notifications and offline use, your web app will feel as fast and capable as a native mobile app.

Higher engagement – Push notifications keep users coming back. PWAs have up to 4X higher re-engagement rates than normal websites.

Faster performance – PWAs load near instantly even on low-powered mobile devices compared to bloated native apps.

Lower bounce rates – Thanks to the app-like experience, visitors are less likely to quickly leave your PWA.

More organic discovery – PWAs work great for SEO since they are normal websites.

Lower development costs – Converting an existing web app to a PWA is much cheaper than building native iOS and Android versions from scratch.

Quick updates – Fix bugs and ship new features instantly without slow app store approval processes.

More reliable – Service workers and offline caching make PWAs reliable even with shaky networks.

Improved conversions – Removing friction and delighting users increases conversions from web to app install.

Expanded reach – PWAs work across all devices and platforms with a single codebase.

Those benefits are exactly why companies are rapidly shifting towards PWAs. Clearly the long-term direction is progressive web apps overtaking native apps in usage and capabilities.

Following web development best practices and using modern browser features unlocks huge wins for both you and your users. And the good news is converting your web app to a PWA is totally doable if you follow the right steps!

Prerequisites for Converting to a PWA

Before we get coding, let‘s quickly go over what you need in place first:

HTTPS – To take advantage of service workers and other features, your site must run on HTTPS rather than HTTP. So get an SSL certificate installed if you don‘t have one already.

Responsive design – Your site‘s UI should work nicely across desktop, tablets, mobiles etc. Responsive design is a must for PWAs.

Good web performance – Optimize your site for fast load speeds, low resource usage and quick time-to-interactivity. PWAs must be lightweight and nimble.

Modern browser – Test your PWA on evergreen browsers like Chrome, Firefox, Safari and Edge. Avoid legacy browsers without PWA support.

If you already have a well-built responsive web app running over HTTPS, you‘re 90% of the way there! Now let‘s go through exactly how to enable the key PWA capabilities.

Step 1 – Add a Web App Manifest

The first step is creating a web app manifest file.

This simple JSON manifest gives browsers information about your PWA like name, icons, colors, orientation etc.

It enables the "add to homescreen" installation process and makes your web app feel like a native app when launched from the homescreen.

Here‘s a sample manifest file to get you started:

{
  "name": "My App",
  "short_name": "MyApp",
  "icons": [{
    "src": "images/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png" 
  }],
  "start_url": "/home",
  "background_color": "#2F3BA2",
  "theme_color": "#2F3BA2",
  "orientation": "portrait-primary",
  "display": "standalone"
}

This gives your PWA a nice icon, theme color, and customized name. Place it at the root and link to it from all your site‘s pages:

<link rel="manifest" href="/manifest.json">

Double check your manifest file passes validation using tools like Manifest Validator or Lighthouse. This ensure maximum compatibility across browsers.

Step 2 – Register a Service Worker

The most important ingredient for any PWA is the service worker. This is a JavaScript file that runs separately from your normal site JavaScript, intercepting network requests.

Service workers enable offline functionality, caching, background data syncing, push notifications and more. It‘s truly the heart of your PWA!

Let‘s see how to add one:

  1. Create a sw.js file in your web app‘s root folder.

  2. Add the following starter code:

// sw.js

const cacheName = ‘v1‘; 

self.addEventListener(‘install‘, event => {
  // Cache vital assets
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => cache.addAll([
        ‘/offline.html‘,
        ‘/styles.css‘,
        ‘/app.js‘ 
        ]))
    );
});

self.addEventListener(‘fetch‘, event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
    );
});

This caches some key pages and files during the install phase and retrieves those assets from the cache first on all requests.

  1. Finally register it from your main JavaScript: 
// main.js

if (‘serviceWorker‘ in navigator) {
  navigator.serviceWorker.register(‘/sw.js‘); 
}

That‘s the bare minimum needed to register a service worker! Of course, more work is required to fully support complex offline usage.

Step 3 – Add Robust Offline Support

With our starter service worker in place, let‘s look at how to build out robust offline-first functionality.

Here are some key features to implement:

Dynamic caching – Cache responses from network requests. This persistant caching is more flexible than just caching static assets.

Offline page – Display a custom offline page if the user loses connection.

Offline data – Store data locally using IndexedDB when offline to sync later.

Network falling back – First try to handle requests with the network, fallback to cache if offline.

Background sync – Queue up requests when offline and send them when connection is restored.

Versioning – Delete old caches when updated so you don‘t hit storage limits.

Planning out what to cache and managing caching intelligently is important for complex web apps. Make use of various caching strategies like cache-first, network-first, cache-and-update etc as appropriate.

Tools like Workbox make implementing robust service worker behavior much easier. But spending time designing your caching approach upfront is key.

Step 4 – Set Up Push Notifications

Push notifications are an awesome way to keep users engaged with timely updates even when they aren‘t using your app.

Let‘s look at how to add them:

Generate VAPID Keys

First, you need to generate VAPID keys – a public and private key pair. The public key gets used in your web app code. The private key gets used in your server code to authenticate messages.

Use a tool like web-push or this VAPID Generator to easily generate compatible keys.

Request Notification Permission

To enable notifications, first ask the user for permission:

Notification.requestPermission().then(result => {
  // Handle permission granted or denied
});

Only if permission is granted can you subscribe them to push messages.

Subscribe User with Public Key

Pass your public VAPID key to generate a push subscription for the user:

const applicationServerKey = urlBase64ToUint8Array(publicVapidKey);

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,  
  applicationServerKey: applicationServerKey
})
.then(subscription => {
  // Send subscription to server
});

This subscription object contains the endpoint URL needed for sending messages.

Send Messages from Server

Finally, when you want to send a notification, use your private VAPID key and FCM API to target subscribed users:

webpush.sendNotification(subscription, payload, {
  vapidDetails: {
     subject: ‘mailto: y[email protected]‘,  
     privateKey: privateVapidKey
  }
});

That‘s all it takes to start sending notifications that will wake up your app!

Step 5 – Test Your PWA

With your new progressive web app built, it‘s time to thoroughly test it out. Here are the key things to validate:

  • Lighthouse audit – Ensure you get high scores for PWA criteria like manifest, HTTPS, service worker etc.

  • PageSpeed Insights – Test load speed on mobile and desktop.Aim for scores over 90.

  • Browser testing – Verify compatibility on Chrome, Firefox, Safari, Edge and IE.

  • Offline usage – Test all routes work offline and handle errors properly.

  • Push notifications – Trigger test notifications across device types and operating systems.

Spend time rigorously testing your PWA to catch bugs and edge cases. Make sure the offline experience feels snappy and reliable.

Step 6 – Submit to App Stores (Optional)

While PWAs are installable directly from the browser, you can also submit them to the iOS and Android app stores for increased visibility.

For iOS, use Safari Web Content Guide links and for Android convert to an Android Trusted Web Activity using PWABuilder. Distributing through app stores also enables you to publish updates much faster than with native apps.

Time to Level Up Your Web App!

I hope this guide gives you a clear roadmap to transforming your web creation into an amazing progressive web app.

Converting to a PWA unlocks so many benefits for your business and your users. By investing in a fast, reliable, and engaging mobile web experience, you‘ll be future-proofing your app as the web advances.

The steps we covered build on proven real-world practices used by leading companies. Now you‘re armed with expert PWA knowledge to wow your users! Feel free to reach out if you have any other questions.

Best of luck with your PWA journey!

Written by