{"id":3017,"date":"2019-11-22T16:40:10","date_gmt":"2019-11-22T16:40:10","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3017"},"modified":"2020-09-22T20:49:16","modified_gmt":"2020-09-22T20:49:16","slug":"forget-mobile-first-progressive-web-app-first-is-the-future","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/forget-mobile-first-progressive-web-app-first-is-the-future","title":{"rendered":"Forget Mobile First, Progressive Web App (PWA) First is the Future"},"content":{"rendered":"

Note: In this post, I’m using “Mobile First” to refer to the business concept of launching an app before a web experience, not the responsive web design use of the term.<\/em><\/p>\n

For app startups, nothing is more critical than user adoption. Unfortunately, today\u2019s app stores are hyper competitive places, and it\u2019s nearly impossible to stand out on your own and build an initial user base without an existing audience or serious cash to invest in advertising and paid app installs. Cash that most new app teams just don\u2019t have. The days of \u201cbuild it and they will come\u201d are long gone, and now the name of the game in mobile is \u201cpay to play.\u201d<\/p>\n

It doesn\u2019t have to be this way. Companies that have historically been web-first have employed a very different strategy to acquire users. That strategy is to find a passionate early user base or community, build solutions to problems that they have, grow an audience through email and social, and produce content that can be shared and efficiently indexed in Google. Many teams can do this without spending any<\/em> money on user acquisition. Good luck doing that on the app store!<\/p>\n

That last step of indexing content ends up being the engine for organic user adoption that many web-based apps and companies survive and thrive on. It\u2019s no surprise that organic search ends up being the primary driver of traffic for most web-based companies. For many it\u2019s likely upwards of 75% of all traffic! And it\u2019s free!<\/p>\n

But today, many teams are looking at a different approach to entering a market, known as \u201cMobile First.\u201d Let\u2019s take a step back and examine today\u2019s popular \u201cMobile First\u201d strategy to see how it compares to the classic \u201cWeb First\u201d approach.<\/p>\n

<\/p>\n

The Mobile First Strategy<\/h2>\n

Mobile First is the idea of shipping an app to the App Stores as the first and primary user experience of your app, instead of a traditional web app. Many teams go one step further and only ship to one platform (like iOS or Android).<\/p>\n

Mobile First is a hot topic today, especially for consumer apps, given the trend for consumers to spend an increasing amount of their time on smartphones. It\u2019s a trend that we\u2019ve focused intensely on at Ionic and one that many (most?) Ionic users employ today. If most of your users are on mobile phones, it\u2019s totally logical to skip building a traditional web experience and just focus on building app for the app stores! This explains why many popular consumer apps don’t even have web versions.<\/p>\n

For companies going Mobile First, the strategy to get an app off the ground is very different. Mobile First teams often ship an app to one or more app stores, provide some kind of landing page for users to install the app, and then rely on organic adoption in the app store, paid ads and installs, or organic adoption on the web. Retention relies on notifications, email alerts, and other hooks back into the app. Rarely do teams at this stage have a strategy to capture search engine traffic and direct them into the app at a high conversion rate. And even if they did, it likely wouldn\u2019t work for reasons we\u2019ll talk about later.<\/p>\n

But Mobile First has one big problem: it completely limits your ability to benefit from web traffic!<\/p>\n

The Walled Garden<\/h2>\n

Mobile apps in the app store have historically struggled to connect with the web in a way that allows users to flow freely from links and search engine results into apps, without huge amounts of friction.<\/p>\n

Why is that? Some of it is simply due to the fact that the traditional technologies used to build native apps are not native to the web, so content ends up locked up in a native app binary. While there are APIs like Google\u2019s App Indexing<\/a>, they require you to have the existing content on the web already and to correctly integrate the SDK which requires a decent amount of work. Still other services like Branch offer the ability to index specific objects<\/a> that can show up in App Indexing or iOS\u2019s Spotlight search.<\/p>\n

But one of the biggest problems with all the above strategies is that they either require you to already have a web experience, which Mobile First companies won\u2019t, or they require the user to go through the motions to install, use, and keep your app.<\/p>\n

That\u2019s a huge risk for early startups just struggling to convince users their app has value.<\/p>\n

Why Mobile First Doesn\u2019t Work<\/h2>\n

If you\u2019re not convinced, maybe some real data will show that Mobile First is something few new businesses or projects can afford today, given install friction and user acquisition costs on mobile.<\/p>\n

Google did a study that showed nearly 69% of users that hit an app install interstitial abandoned<\/a> the site completely, and did not install the app nor use the mobile web experience.<\/p>\n

Now imagine that\u2019s the first step in your funnel, and you just lost nearly 70% of your inbound users! I don\u2019t know who can afford that but it\u2019s certainly not your new app startup or project.<\/p>\n

Let\u2019s say you do get lucky and have a user install your app, usage data post-install is pretty dismal<\/a>, as well. Most users actively use only a handful of apps and each one outside of a few big apps has to fight to stay on the home screen.<\/p>\n

\u201cPWA First\u201d<\/h2>\n

What if there was a better way, a way that took all the lessons web-based apps have learned over the last decade, combined with the best of mobile, to get the best of both worlds?<\/p>\n

Turns out, there is, and we\u2019re calling it \u201cPWA First.\u201d<\/p>\n

PWA First is the idea that, instead of building a native iOS or Android app as your first entry into the market, build a Progressive Web App<\/a> first, ideally in a technology that lets you also target native iOS and Android when you\u2019re ready (like Ionic Framework!<\/a>). That app can be released on the web (for free in most cases!), users can immediately use the app and get value from it, and new users can easily find it through search results and links shared across social networks.<\/p>\n

Users can install PWAs to their home screen just like a Native app, and (on Android, for now) Push Notifications can be used to bring users back when they have new updates. On iOS, SMS can replace the lack of native push notifications while linking directly back into the PWA experience.<\/p>\n

Content that is key to driving organic search traffic is then highly optimized to be indexed and served in a high performance way to search engine visitors. This brings new users right into the app without install friction.<\/p>\n

PWA First is a form of Mobile First that isn\u2019t locked to any single platform or app store channel. A PWA can be accessed anywhere on the web without any install friction, while still providing a quality mobile experience that users expect. In that sense it\u2019s an evolution of Mobile First.<\/p>\n

And PWA First doesn\u2019t mean you can\u2019t or won\u2019t also have companion iOS or Android apps. It will very likely make sense to have a user install the companion app to enable certain functionality only available natively, and you may decide to ask the user to do that after they\u2019ve reached some activity threshold where you feel confident they will stick around!<\/p>\n

PWA First liberates teams to target the platform that will help them grow their user base the most effective, efficient way, and removes key friction for users to invest in the product.<\/p>\n

Who is PWA First for?<\/h2>\n

For those considering the benefits of PWA First, it will be the most effective if your app:<\/p>\n

    \n
  • Has search engine traffic as a key component of the app experience. For example: articles, profiles, app-specific content, etc. will be frequently accessed through search. Yelp, NYT, and Reddit are some good examples of this (even if Reddit won\u2019t admit it \ud83d\ude05)<\/li>\n
  • Has link traffic as a major component of user acquisition. For example: if you expect that a significant portion of your traffic will come from users sharing links across Facebook or Twitter.<\/li>\n
  • Does not require certain native features for a key portion of the app experience. Certain native APIs are not yet available on the web or in Progressive Web Apps. However, a surprising number are! If your app requires one that isn\u2019t, that will hinder your ability to be PWA First, though a hybrid or \u201cPWA second\u201d strategy may work here.<\/li>\n<\/ul>\n

    For some businesses, Mobile First still makes the most sense, and that\u2019s okay. There may be an opportunity to augment a Mobile First strategy with a PWA second strategy (let\u2019s not coin that, okay?) where some limited version of the native mobile experience is accessible in a PWA to convince the user to invest more time and install the full native app experience.<\/p>\n

    How to go PWA First?<\/h2>\n

    There are a few ways teams can go PWA First. Many web frameworks and tools have PWA support, so it might be as simple as building a PWA in one of them (we\u2019re partial to Ionic Framework<\/a>) and shipping your app to a web hosting provider like AWS, Heroku, or Firebase. Basically, host it like you would any other web app, but consider that some hosts will have features like HTTP\/2 Push<\/a> to reach high performance levels.<\/p>\n

    If you think a hybrid PWA and app store approach makes sense for your app, either now or down the road, you should strongly consider building the PWA in a technology that can build quality iOS and Android apps from the same code as the PWA. This is something Ionic Framework<\/a> was created to do better than anyone else, so we think it\u2019s a great option for that. In this type of technology, your app will function and look nearly the same when running in the app store, but will have access to more APIs and can adapt its styles to match iOS and Android UI standards.<\/p>\n

    If you opt for a separate PWA and separate mobile app technology, be prepared for a considerably longer and more expensive development process.<\/p>\n

    PWA First is the Future<\/h2>\n

    The biggest reason to go PWA First comes down to de-risking your business or project by making sure it can reach the largest number of people with the least amount of friction. We believe smart app teams will take advantage of the huge potential of the web and search traffic to ship apps that reach more people for less money on day one.<\/p>\n

    While we continue to love the Mobile First approach, we think the potential of PWA First\/Mobile Second is a secret weapon for those that choose to wield it, and Ionic Framework has been designed from the ground up to be the best solution for this approach.<\/p>\n

    And we\u2019re not alone, take a look at this Twitter discussion for other developers that see the potential for this approach:<\/p>\n

    \n

    Forget mobile first, I'm doing "PWA-first" development with Ionic React and I love it.<\/p>\n

    Once I get the web experience dialed in and can get early users w\/ little friction, I'll just run a few commands and ship companion iOS and Android apps \ud83d\ude80<\/p>\n

    — Max Lynch (@maxlynch) November 16, 2019<\/a><\/p><\/blockquote>\n