5 Reasons Your Next BigCommerce Site Should Be a Progressive Web App

If progressive web apps are on your radar, but you’re not sure why you’d reach for a PWA solution, this post is for you.

Progressive web apps (PWAs) are gaining traction, and case studies hyping the major upgrades in performance and conversion are feeding that excitement. So how should you know if you should make your next project a PWA…and more importantly, what are they?

Progressive web apps are websites with extended features that make them behave more like a native mobile or desktop application. That’s right: progressive web apps are just websites at their core, built on HTML, CSS, and JavaScript, that happen to incorporate certain web best practices and extra capabilities. According to Aaron Gustafson,

“It may help to think about a PWA as being a website++.”

For users, that means a website that can prompt you to install it to your home screen and send you push notifications. Instead of downloading the app from an app store, you can discover and download the app from your browser. For developers, it means building a single unified experience instead of a separate site and mobile app. Let’s dive deeper into what makes a progressive web app, the benefits for developers, and how to get started building progressive web apps on BigCommerce.

What Is a Progressive Web App?

Google has been a major driver in promoting and shaping the PWA standard. Read through Google’s Progressive Web App Checklist and you’ll notice that many requirements overlap with standard best practices in web development:

  • Site is served over HTTPS
  • Pages are responsive on tablets & mobile devices
  • Site works cross-browser

Pretty standard stuff that I think we can all agree on. But then you’ll notice a few requirements that start to diverge from what we’d expect from a standard site:

  • All app URLs load while offline
  • Metadata provided for Add to Home screen

These two requirements are what really set PWAs apart from typical websites. Like native apps, PWAs should still load content for every page, even when the user isn’t connected to the internet. Picture the Twitter app on your phone. When you put your phone into airplane mode, you can still see all of the tweets that were downloaded and cached in the app before you went offline. You won’t receive any new tweets while you don’t have network access, but you won’t encounter an error screen either.

Add to Home Screen is the prompt that invites a user to add the PWA’s icon to their home screen. Once it’s been installed to the home screen, a PWA looks like a native mobile or desktop app to the user.

PWA Testing Tools

How can you tell how well your site is meeting Google progressive web app standards? Google built PWA auditing into Lighthouse, its web performance testing tool. You can run Lighthouse from a Chrome extension or from the command line, but Lighthouse is also conveniently built in to Chrome Dev Tools. Inspect element on any page in your site and navigate to the Audits tab in Dev tools. Check the Progressive Web App audit setting to include PWA criteria in your performance report, and Google will report how closely your site conforms to its PWA standards.

Service Workers and Web Manifests

Despite Google’s PWA list of recommendations, there are really just 2 baseline requirements that you have to have to make your site a progressive web app:

  • Service worker
  • Web Manifest file

Assuming your site already has an SSL installed, the presence of a service worker and a web app manifest file are all it takes to identify your site as a PWA. Let’s take a closer look at each of those requirements.

Service Worker

A service worker is a JavaScript file that sits between your site and the network, caching resources and handling whether resources are retrieved from the cache or from the network. A service worker allows your PWA to operate in offline mode and send push notifications to your users. When the user is offline, the service worker checks for a cached version of the resource instead of directly requesting it directly from the network.

Even when the user is online, service workers can increase efficiency by leveraging caching strategies to control how resources are fetched for different types of requests. For content that rarely updates, you might want to respond from the cache, but for content that updates frequently, you can tell the service worker to check the network first before falling back to a cached version. You can also use prefetch to get and cache assets right away that you know will be needed globally, like JS files and stylesheets, which can have a big impact on render times.

Workbox is a framework for generating service workers. Registering a service worker involves creating a JavaScript file at the root of your site (more on that later) and adding a script to your HTML that points the browser to that service worker JavaScript file. Once you’ve created that JS file, you can import the Workbox library, allowing you to use Workbox methods to build out your service worker’s routing and caching strategies.

Check out Workbox’s Common Recipes to see examples of caching strategies, or the Service Worker Cookbook for more inspiration.

Web Manifest

A web app manifest is a JSON file (manifest.json) that contains meta information about your PWA, including its name, the icon image to use when the PWA is downloaded to the home screen or desktop, and which URL to display when the app is opened. The presence of a web app manifest file is one criteria that browsers check before prompting the user to add the app to their home screen.

The manifest file should reside in your PWA’s root directory, with a link tag pointing to the file placed on every page within the app’s scope:

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

Sample manifest.json

{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}

Supported Browsers and Devices

It’s important to note that progressive web app support is not yet universal across modern browsers and devices, and even across supported devices, the experience can look quite different. Android users will notice the most complete native support, but progressive web app features are gradually making their way to iOS and Mac users.

Add to Home Screen, Android

IOS does support Add to Home Screen on Safari, but the user must add the app to their home screen from the share settings, not from a pop-up prompt. On desktop, Chrome supports Add to Home Screen on Windows, but Mac users will need to enable an experiment flag (chrome://flags/#enable-desktop-pwas) and install the PWA from their Chrome settings menu.

Install to Desktop, Chrome on Mac

Why Should Developers Care About PWAs?

Now that we’ve established what progressive web apps are…why should you care? Nabil Cheikh, Senior Software Engineer at BigCommerce, says,

“I love PWAs. They’re easy to share, easy to develop. But, it’s a buzzword, and I’m glad it’s giving people pause. We should be asking, wait, why do we need that?”

Let’s dive in and take a look at 5 reasons why you should be excited about progressive web apps.

1. Unified Experience Across Platforms.

“You want your app to feel like your website and your website to feel like your app. You want this unified user experience,” Nabil says. But when your mobile app and your website are completely separate entities, on separate platforms, there are challenges to creating that unified experience.

Not only do separate platforms entail additional design work, they also present their own technical considerations. You might be building your website using a JavaScript framework, but when it’s time to build an iOS or an Android app, the technical groundwork that you’ve laid with your website doesn’t translate to those mobile platforms. A progressive web app allows you to leverage your existing website to also provide a mobile app-like experience instead of starting back at square one building a separate mobile app.

2. Faster Time To Market.

For the same reasons that progressive web apps provide a seamless experience across your site and mobile app, they also speed up time to market.

From an engineering perspective, “The skill set is generally more unified,” Nabil says. Instead of bringing on app developers with specialized skills in native mobile apps, the same team building out the backend and frontend can also create the mobile experience. When you invest in something like a native iOS app, “There’s a much longer lead time to getting that in place. And it’s not even just development time, it’s the app store approval process as well.”

This lean approach means developers can take a concept from idea to prototype quickly and then fine tune the product in short cycles. “I can take an idea and spend the weekend putting something together, share the link, and get feedback right away,” says Nabil.

3. Discoverability.

There’s an inherent problem with downloading mobile apps from an app store: you have to actually go to the app store to download them. This context switching can be a big barrier to getting users to download your mobile app.

With a progressive web app, your users only need to find you once, when they land on your site. And because a PWA is essentially a website, it’s indexed by search engines, which lends itself to discoverability.

Once a user is on your site, the add to home screen action reduces the friction to download an app to their device. “You go to a website and it says, ‘Hey, do you want to add this to your home screen?’ Absolutely! That to me is less of a barrier than going to the app store and installing,” Nabil notes.

4. Framework Agnostic.

Unlike iOS or Android apps, PWAs can be written in any framework for building websites. “I think it actually frees you up to make choices based on what’s a better fit for your business and your company. If you’re a React shop you can do PWAs. If you do Vue you can do PWAs. If you want to do Gatsby you can do the whole static site, headless thing,” says Nabil.

In part, the choice of tech stack will depend on what your team has experience with, but it also allows you to make the choice based on the overall needs of the project. “For me,” Nabil says, “I have a full offline PWA that I created using JAM stack that I host on Netlify, which is free. And especially if it’s all offline, I don’t need anything else. If I do need a data layer, I can use something in AWS or Google. But then, all I’m paying for is that data layer.”

Then again, PWAs are so commonly built in conjunction with JavaScript frameworks like Vue that there’s a common misconception that you have to build a PWA on that type of stack.

But remember, a PWA is essentially just a website — you can build a PWA with any site-builder, whether that’s a flavor of JavaScript framework, WordPress, or BigCommerce Stencil.

5. Performance.

We talk a lot about offline mode when it comes to progressive web apps, but the truth is that the number of apps that truly need to support all of their functionality completely offline is very small. Customers using an ecommerce PWA are unlikely to expect to check out while offline.

For ecommerce PWAs, the power of using a service worker is not so much about providing an offline experience; it’s actually about load time.

The user benefits from this performance boost, even if they never use your PWA offline or download it to their home screen. “Even if you’re online,” Nabil says, “it’s going to pull from your phone’s cache, and it’s not going to make a network call. So it’s going to feel very, very fast.” In ecommerce terms, that translates to a direct impact on conversions and sales.

PWAs on the BigCommerce Platform

At BigCommerce, we’re just getting started with all of the ways you can build a progressive web app. Today, developers can build PWAs that use our native Stencil storefront or WordPress as the presentation layer, but we‘re working on ways to make it easier to leverage BigCommerce APIs to build storefronts in alternative frameworks. Want to be part of our design process? Learn more about our Storefront API powered by GraphQL here, and keep reading to see how you can get started building PWAs on BigCommerce.

If you’re familiar with SaaS architecture, you may be asking yourself how you can get started building PWAs on BigCommerce. After all, installing files at the root directory can be tricky for SaaS platforms and that’s a required step to install a service worker and a web manifest. Luckily, there’s a technique you can use to create .js and .json files at the directory root, using raw HTML web pages.

Create a Raw HTML Web Page

When creating web pages in BigCommerce, you have the option to set the page type to Raw HTML. This allows you to enter code directly into a plain text box, which will render exactly as entered.

To create a service worker JavaScript file (serviceworker.js) at the root directory, create a new web page and set the type to Raw HTML.

  • The Page Name field is for internal use; enter something like Service Worker for your reference.
  • Page URL should be /serviceworker.js
  • For Page Content, enter the contents of your serviceworker.js file

Uncheck the setting to show the page in Navigation.

Navigate to mystore.com/serviceworker.js and you’ll see the contents of your JavaScript file displayed in the browser. But, there’s a problem. The MIME type for this file is still text/html, so the browser can’t recognize it as JavaScript. To fix it, we’ll need to update the page’s content type to text/javascript.

Update Page content_type

A web page’s content type can be updated with an API call. See our Quickstart guide to quickly get up to speed on making calls with the BigCommerce API.

Using an API client like Postman, or the HTTP request maker embedded in the BigCommerce developer documentation, send the following PUT request to update a page’s content type:

PUT: https://api.bigcommerce.com/stores/{storeHash}/v2/pages/{pageID}

Request Body:

{
"content_type": "text/javascript"
}

Repeat this process to create a web app manifest file at the root, with the following exceptions:

  • The Page URL for the raw web page should be manifest.json
  • Update the page content_type to “application/json”

Conclusion

A progressive web app is simply a website with a few extra features. But as a developer, familiarizing yourself with the PWA standard allows you to maximize your development efforts by building a single experience that spans desktop, website, mobile responsive website, and mobile app.

For developers, PWAs reduce the amount of time it takes to see an idea from concept to delivery. Because the progressive web app standard isn’t tied to any particular framework, developers with experience in a variety of web technologies can build something that feels much like a native mobile app.

For users, progressive web apps deliver a user interaction that’s seamless, downloading directly to the home screen and sending push notifications when the app isn’t open. In the background, progressive web apps work to decrease load time and serve content lightning-fast.

Are you convinced that PWAs will play an important role in web development in the years to come, or do you think the jury’s still out? Let us know in the comments or hit us up on Twitter @BigCommerceDevs!

--

--

--

News, tips, and stories for developing on BigCommerce

Recommended from Medium

Start stop systems with IoT and OTA software updates

Creating Fog and Using Particles in Unity3D and the URP

Softinio’s Notes on Software Engineering — Issue #3

The Quickest Way to Install Conda Environment as Jupyter Kernel

How to use Azure self-hosted Agent

Gradually improving our code quality with Test::Perl::Critic::Progressive

Game Dev Digest Issue #86 — Awesome Effects

{UPDATE} Hen Racing Simulator - Race Free Range Chickens Hack Free Resources Generator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karen White

Karen White

Developer Marketing at Atlassian. Formerly at BigCommerce, Rasa. I think Voyager was the best Star Trek.

More from Medium

The Most Effective Way to Reach Your Users — Building the Omnichannel

GitHub for Dummies

From Lawyer to Front-End Developer

How do we train our recruits to be full-stack developers