Sweating the details, Part 3: PWAs
Building mobile crypto products
Ankush Swarnakar
|Sep 19, 2023
If you’ve been anywhere around crypto Twitter recently, you’ve likely heard about friend.tech. We’ve written more about some clever decisions its creators have made, but we wanted to dive a little deeper into the platform powering the product – Progressive Web Apps (PWAs) – and the role they can play in web3. At Privy, we’re seeing a number of exciting projects embracing this new design and are excited to dive into what makes it so interesting!
What is a progressive web app (PWA)?
PWAs, or progressive web apps, give developers many of the features of a truly native mobile app, without much of the baggage. You build a PWA just like you would build any other web app; they run in the browser’s JavaScript runtime, and integrate seamlessly with your favorite browser frameworks and SDKs.
Unlike regular web apps, however, PWAs can be directly installed onto a user device, instead of just being loaded in the browser. This is especially powerful in mobile environments, because they allow developers to create an experience that feels natively mobile to users, without needing to actually build and publish a native mobile app (e.g., with Swift or Kotlin) upfront.
When you first install a PWA, you’ll need to visit the application’s website in your device’s native mobile browser (Safari on iOS, Chrome on Android). You then click a button in the browser bar to install the app directly to your device. Thereafter, you can access the PWA by just tapping the app’s icon in your device’s home screen – it’s that simple.
When using the PWA, the app fills the device’s entire viewport. Even though the app is technically using a version of the mobile device’s browser, there’s no browser bar or URL bar to remind the user that that’s the case. What’s more, you can leverage PWA’s service workers for offline and background capabilities, like refreshing the app’s state even when the user is offline.
For more info on PWAs, we highly recommend this web.dev guide.
Why are PWAs particularly interesting for crypto products?
PWAs can be dated all the way back to 2015 – well before the surge in consumer crypto apps that we’ve seen over these past few months. That said, the architecture of PWAs makes them a particularly compelling choice for crypto products in particular, for a few key reasons:
Mobile-first, but web-friendly. Crypto has historically been a browser-first ecosystem – standards like EIP1193 are arguably more recognizable as their browser implementations (the famous window.ethereum). It’s hard to find a crypto product in 2023 that isn’t using a browser-first framework like NextJS, React, or wagmi. But in terms of driving continued engagement with your users, nothing beats having a mobile platform for your product. PWAs enable you to build an experience that’s as easy to access as tapping a button on your phone, while still allowing you to leverage the extensive ecosystem of crypto SDKs designed primarily for the browser today.
Push notifications. PWAs allow you to send push notifications to your users, even when they’re not using the app. This completely transforms your ability to connect with your user base; you can easily notify users when their state in your app updates, when your app has new features or experiences, and more!
No App Store hassle required. It’s notoriously difficult to get crypto apps past most app store review processes, mainly due to legal concerns around unclear regulation. Since PWAs can be installed directly from the browser, launching a PWA is much more straightforward than a traditional mobile app. What’s more: since users don’t have to install PWAs from an app store, PWAs are not subject to app store policies like Apple’s 30% take-rate on in-app purchases – often a non-starter for crypto products (not least because of the technical complexity involved in such remittances in crypto).
Update without user action. When a user installs a mobile app from the App Store, they will continue to use exactly that version of the app until they revisit the App Store to update it. This means users have to take action (install an update) in order to adopt bug fixes, new features, and more. Since PWAs run in the browser, their content is (mostly) dynamically loaded every time the user opens the app. Sure, there may be some cached content, but shipping updates is markedly easier than publishing a new release to the App Store – and users can always clear their cache to get to a fresh state.
Tips for builders
Here are our top tips for building a crypto PWA:
Ensure your users install it. This is easy to forget, but is arguably the most important user flow to build! When a user visits your PWA’s site in their browser, make sure to prompt them to install it per the appropriate instructions for their device and browser. Otherwise most of the advantages involved in the model are lost – you’ve just built a website! Here’s a great guide around promoting PWA installation (note: this is trickier on iOS).
Friend.tech download prompt
Use embedded wallets to simplify onboarding. A key benefit of PWAs is that they greatly simplify user flows for onboarding and accessing your product. You can make this experience even more seamless for users by provisioning embedded wallets for them to use in your app. Users shouldn’t have to deal with the upfront friction of setting up their own external wallet, or dealing with flaky connections between their external wallet and your product and the back and forth shuffling between apps. Embedded wallets work out-of-the-box, fully customizable, and get your users a working wallet upon login.
Make it easy to get onchain. Embedded wallets are the first step of the onboarding journey – ensuring your users have a wallet that they can use in your app in the first place. But to take onchain actions with the wallet, users need assets to pay gas fees and make purchases. Consider integrating a fiat on-ramp or building out a simple flow to help users transfer or bridge their existing assets to their embedded wallets (h/t friend.tech). You might even consider sponsoring gas for your users using a transaction relayer or account-abstraction (but your users may still need assets like USDC to make purchases, even if they don’t have to pay gas fees).
Make sure it’s responsive. Building a PWA feels much like building any other web app, but it’s important to invest extra effort in ensuring your UIs are responsive across different environments, as users will likely exclusively use your product on mobile. Make sure to test your PWA on a variety of screen sizes, browsers, and mobile devices to ensure that it feels like a truly mobile app, not like a desktop site shoehorned into one.
Use PWAs as a starting point. The best thing about PWAs is that they let you launch a mobile platform for your product much faster than otherwise. They are a great platform for testing your mobile product flows and iterating quickly on a compelling mobile experience. It’s important to acknowledge, however, that PWAs are not truly native mobile apps, and may lack certain capabilities that your product may find useful (e.g. platform-specific features, like secure hardware enclaves). Consider treating your PWA as a stepping stone towards a full native app experience.
Want to get started with your own PWA? We’re here to help. Here are some of our favorite resources:
