Cover image for the article: What is a PWA? Progressive web apps vs native apps and responsive websites
Apps & automation13 min read

What is a PWA? Progressive web apps vs native apps and responsive websites

What is a PWA, and how does it differ from a native app and a responsive website? Read about its technical building blocks, capabilities, iPhone limitations, cost and how to make the right choice.

D
Danial Dehhaghi
Founder & CEO, MyTarh

What is a PWA? A PWA, or progressive web app, is a website that behaves like an app: it installs on a phone without going through the App Store or Google Play, its icon sits on the home screen, it opens in its own window without an address bar and, if it is designed properly, parts of it keep working on a weak connection or even offline. When a service offers you a "web app" to install straight from its website, it is usually a PWA.

If you are torn between building a native app, launching a PWA or sticking with a responsive website, this article walks through the technical building blocks of a PWA, its real capabilities and limits, how the three options compare, and the signs that point to the right choice.

What is a PWA, and how is it different from a regular website?

PWA stands for Progressive Web App, and the word "progressive" is the key to understanding it: the foundation is a regular website that opens in any browser, and wherever the browser and device support more, app-like features such as installation, offline use and notifications are added on top. So a PWA is not a programming language or a particular framework; it is a set of standard web technologies applied to a website.

The main differences between a PWA and a regular website:

  • It can be installed: the user adds it to the home screen of their phone or computer from within the browser.
  • It runs in its own window: after installation, the address bar and browser buttons disappear and the experience feels like an app.
  • It copes with weak connections: the files it needs are stored on the device, so later visits load faster.
  • It can send notifications: with the user's permission, and with limits we cover below.

At the same time, a PWA is still a website: it has a web address, Google can index its pages, and every change on the server reaches all users. So if your current site is slow or messy on mobile, turning it into a PWA won't fix that; the foundation has to be fixed first.

The three technical building blocks of a PWA, in plain language

Three components turn a website into a PWA. Knowing what each one does helps you talk to your technical team more precisely.

1. HTTPS: the entry requirement

A PWA only works over a secure connection, because a Service Worker can manage requests between the site and the user, and browsers only grant that kind of power to sites whose connection is encrypted. Today almost every serious website needs an SSL certificate anyway, and free trusted certificates are readily available.

2. The Web App Manifest

The manifest is a small text file in JSON format that tells the browser what the app is: its full name and short name, icons in different sizes, the main color and background color, the page shown when the app opens, and the display mode (for example, a standalone window without an address bar). The browser uses this information for installation and to create the icon and splash screen.

3. Service Worker: the engine behind the scenes

A Service Worker is a JavaScript file that the browser runs separately from the page itself. Think of it as a go-between for the site and the internet that decides, for each request, whether to fetch the response from the network or from the stored copy (the cache) on the device. Offline use, faster loading on repeat visits and receiving notifications all come from this component.

This is where the main engineering work of a PWA lies. If the caching strategy isn't designed properly, users may see old prices, wrong stock levels or an outdated version of a page. So it must be clear in advance what gets cached, what is always fetched fresh from the server, and how a new version reaches the user.

What can a PWA do, and what can't it?

Most disappointment with PWAs comes from expecting them to do everything a native app can.

What a PWA does well

  • Working offline or on a weak connection: showing pages that were opened before, a proper offline page instead of a browser error, and in some browsers holding on to a form and sending it once the connection is back.
  • Notifications (Web Push) for appointment reminders, order status or support messages, only when the user allows them.
  • Access to some device features: camera, microphone, location and sharing to other apps, all with the user's permission and depending on the browser.

Limitations you should know about

  • No deep access to the operating system: such as reading SMS messages, full access to contacts, or long-running continuous background tasks.
  • Browser support is not uniform: some features, such as connecting to Bluetooth devices or NFC, exist only in certain browsers, mostly Chrome on Android.
  • Very heavy tasks, such as advanced graphics-heavy games or professional video editing, run more smoothly in a native app.
  • Stored data is not permanent: the browser may clear stored data when space runs low or after a period of non-use, so important user data must live on the server.
  • It doesn't show up in app stores: a user who only searches in an app store won't find your PWA by default.

Android and iPhone are not the same

On Android, Chrome and Chromium-based browsers have the strongest support and can show the install prompt to the user themselves. On iPhone things are more limited: installation is manual, through the Share menu and the "Add to Home Screen" option, and web notifications only work for web apps installed on the home screen, and only on newer iOS versions after the user grants permission. If many of your customers use iPhones, put a short installation guide on your site.

Another point: web notifications pass through the push services run by browser vendors. Before relying on them for critical communication with customers, test delivery on your real users' phones and connections.

App or website? Comparing a PWA with a native app and a responsive website

A native app is built separately for each operating system (or for both with cross-platform frameworks such as Flutter and React Native) and is installed from an app store. A responsive website adapts to the screen size but offers no installation or offline use. A PWA sits between the two:

Criterion Responsive website PWA Native app
Build cost Lowest More than a responsive website, usually less than a native app Highest, especially for two platforms
Launch time Short Short to medium Longer (build, testing and store release)
Needs an app store No No Yes, or an alternative install route
Updates Instant, on the server Instant, on the server New version, store review and user update
Offline use No Partial, depending on design Most complete
Notifications No Yes; limited on iPhone Full
Access to device features Limited Moderate and browser-dependent Full
Visibility on Google Full Full, if built correctly In-app content usually doesn't appear in Google results
Install and home screen icon No Yes Yes
Storage used on the phone None Usually small Usually larger

The table in short: to win new customers from Google, you need a website, and a native app can't replace it. To keep existing customers and serve their repeat use, a PWA or an app comes into play. And if your product needs deep device features, a native app makes more sense.

Why a PWA appeals to many businesses

PWAs are useful everywhere, and a few of their advantages stand out in particular:

  • No app store needed to get started: a PWA installs directly from your own domain, without a developer account or a store listing.
  • Updates without a review queue: you publish a bug fix or a price change on the server, and users get the new version on their next visit.
  • A lighter download: for users with a slow connection, a limited data plan or a full phone, installing a PWA is easier.
  • Tolerance for unstable connections: with proper caching, parts of the service stay available even when the connection drops in and out.
  • One codebase for everything: Android, iPhone and desktop are covered by a single project.

To be honest, a PWA also depends on the policies of browsers and operating systems, and those policies can change. For many audiences, app stores are still the usual place to find and install native apps. A PWA is a simpler route, not a risk-free one.

Which businesses benefit most from a PWA?

A PWA delivers real value when users come back to your service again and again. Some common examples:

  • Online stores with repeat purchases, such as online grocery or consumables. If you are still at the launch stage, also see how to launch an online store.
  • Appointments and bookings for clinics, beauty salons, gyms or restaurants, where appointment reminders are useful.
  • Customer portals, agent portals and internal systems such as order tracking, field sales or warehouse tools that don't need a public release.
  • Testing an app idea: before investing in a native app, use a PWA to see whether users actually use it.

When is a native app still the right choice?

A PWA doesn't replace a native app everywhere. If any of these apply to you, seriously consider a native app, or at least a combination of PWA and app:

  • Your product depends on the phone's hardware: connecting to Bluetooth devices, continuous background location tracking or working with very large files.
  • Reliable notifications on iPhone are critical, and you can't rely on users installing the PWA manually.
  • You have a graphics-heavy experience: games, augmented reality or professional photo and video editing.
  • Being in the app stores is part of your marketing: your audience searches for apps on Google Play, the App Store or other stores.

There is also a middle path: build your backend and API so that both a PWA and a native app can use them; start with a PWA and add a native app once demand is proven. We explain the steps of this path in our article mobile app development steps, from idea to launch.

How can you tell if a site is a PWA, and how do you install it?

The simplest sign is that the browser offers to install it and, once installed, the site opens without an address bar. Option names may vary slightly between browser versions.

Installing a PWA on Android (Chrome)

  1. Open the site in Chrome.
  2. If an install prompt appears, accept it; otherwise open the three-dot menu at the top of the screen.
  3. Choose "Install app" or "Add to Home screen".

Installing a PWA on iPhone (Safari)

  1. Open the site in Safari.
  2. Tap the Share button (a square with an upward arrow).
  3. Choose "Add to Home Screen" and confirm.

On newer iOS versions, some other browsers offer this option too. On a computer, in Chrome and Edge, you will see an install icon in the address bar or an install option in the browser menu.

For site owners: a technical check

In desktop Chrome, open the developer tools (DevTools) and, under Application, look at the Manifest and Service workers sections; manifest errors and the Service Worker's status are shown right there. For more technical detail, the MDN documentation on PWAs is a reliable resource.

The cost and path to building a PWA: from your current site to a full app

If you already have a website

In many cases you don't need to start from scratch; your current site can be turned into a PWA. The usual steps:

  1. Assessing the foundation: the site's speed, responsiveness and structure are reviewed; website speed optimization recommendations usually become the priority at this stage.
  2. Manifest, icons and Service Worker: together with a caching strategy, meaning what should be available offline and what should always come fresh from the server.
  3. An offline page, an installation guide and, if needed, notifications, with a clear plan for which message is sent, when, and to whom.
  4. Testing on real Android and iPhone devices, not just emulators.

For WordPress sites, there are plugins that add a basic manifest and Service Worker. They are usually enough for a simple brochure site, but in an online store, wrongly cached carts or prices can cause serious problems, so careful configuration is needed. We look at whether WordPress is enough for your project or whether you need custom development in our article WordPress vs custom code.

If you are starting from scratch

It is better for the PWA to be part of the design from day one rather than bolted on later. In a website design project, structure, speed and installability can be planned together from the start.

How much does it cost?

The cost of turning a website into a PWA isn't a fixed figure; it depends on the state of your current site, whether you need offline use and notifications, and how complex your data is, so it is estimated after reviewing the site. If you are also considering the app route: in the published mobile app development plans, the MVP version is from $6,900 (one platform) and the standard version is $12,900 (iOS and Android, with a web panel), and enterprise projects are priced on a custom quote.

Frequently asked questions

What is a "PWA version", and why do some services offer one?

A PWA version is a progressive web app: a version of the service that you install from within the browser and that sits on your home screen like an app. Services usually offer it to people who don't want to download a large app. For security, only install a PWA version from the service's official web address, and check the domain carefully before installing.

Can a PWA be downloaded from Google Play or other app stores?

A PWA is usually installed directly from the website itself and has no separate installation file. A PWA can be packaged as an Android app using a technology called Trusted Web Activity and submitted to a store, but each store has its own acceptance rules, which you should check before deciding.

Do PWA notifications work on iPhone?

On newer iOS versions, yes, as long as the user has installed the PWA through "Add to Home Screen" and allowed notifications. On iPhone, a site that hasn't been installed can't send web notifications. If notifications are the backbone of your service, factor this limitation into your decision.

Does a PWA affect SEO?

Being a PWA is not a ranking factor in itself. But because a PWA is still your website, its pages can be indexed, and faster speed and a better mobile experience help SEO. Just make sure that, if your pages are built entirely with JavaScript in the browser, Google can see the main content; server-side rendering reduces this risk.

If you aren't sure whether a responsive website is enough for you, whether a PWA is the better choice or whether you need a native app, go over your needs and your audience with us. On the MyTarh mobile app development services page, you can see the options and plans and request a consultation.

D
Danial Dehhaghi
Founder & CEO, MyTarh

Founder of MyTarh, with years of experience in digital marketing and web design.

Free consultation

Not sure where to start?

Book a short online call so we can hear about your business and tell you which step will have the biggest impact for you. The intro call is free.

Book a consultationMyTarh services

Prefer to talk directly? Chat with Danial Dehhaghi on WhatsApp

Previous article
SEO vs Google Ads: cost, time to results and which one suits your business
Next article
Product and category page SEO: a practical guide for online stores and WooCommerce