diff --git a/content/blog/2023/when-to-choose-a-native-mobile-app.md b/content/blog/2023/when-to-choose-a-native-mobile-app.md index e27dbecec..5f76649e1 100644 --- a/content/blog/2023/when-to-choose-a-native-mobile-app.md +++ b/content/blog/2023/when-to-choose-a-native-mobile-app.md @@ -27,17 +27,16 @@ summary: | --- {% import 'embed.macros.njk' as embed %} -{% import 'oddnews.macros.njk' as oddnews %} If you haven't read part 1 yet, it has a great introduction to each option along with a quick comparison chart: [When to Choose a Responsive Web App](/2023/07/11/when-to-choose-a-responsive-web-app/) - +2. When to Choose a Native Mobile App (this article) +3. [When to Choose a Progressive Web App](/2023/10/30/when-to-choose-a-progressive-web-app/) ## Native Mobile App -- Best for Advanced Capabilities @@ -205,14 +204,5 @@ series. --- -Curious about progressive web apps? Sign up for OddNews to be notified when -**Part 3 -- When to Choose a Progressive Web App** hits the OddBlog. - -{{ oddnews.oddnews_signup( - heading=false, - tag='oddblog', - class='oddnews-form-main' -) }} - - +Is a **progressive web app** right for your digital project? Read more about +[When to Choose a Progressive Web App](/2023/10/30/when-to-choose-a-progressive-web-app/). diff --git a/content/blog/2023/when-to-choose-a-progressive-web-app.md b/content/blog/2023/when-to-choose-a-progressive-web-app.md index c1681a61b..38da1d6ea 100644 --- a/content/blog/2023/when-to-choose-a-progressive-web-app.md +++ b/content/blog/2023/when-to-choose-a-progressive-web-app.md @@ -1,10 +1,8 @@ --- -eleventyExcludeFromCollections: true -permalink: false title: When to Choose a Progressive Web App sub: Part 3 -- Responsive Web App vs Native Mobile App vs Progressive Web App author: sondra -date: 2023-09-01 +date: 2023-10-30 tags: - Article - Business Development @@ -43,8 +41,8 @@ comparison chart for quick reference). **Read all three parts to compare app types:** 1. [When to Choose a Responsive Web App](/2023/07/11/when-to-choose-a-responsive-web-app/) -2. [When to Choose a Native Mobile App](/2023/08/01/when-to-choose-a-native-mobile-app/) -3. [When to Choose a Progressive Web App](/2023/09/01/when-to-choose-a-progressive-web-app/) +2. [When to Choose a Native Mobile App](/2023/08/29/when-to-choose-a-native-mobile-app/) +3. When to Choose a Progressive Web App (this article) ## Progressive Web App -- Best of Both Worlds @@ -103,6 +101,11 @@ fewer specialized technologies and can be done incrementally. On the other hand, packaging your PWA for inclusion in app stores takes additional time, and requires going through the app store approval process. +{{ embed.img( + src='blog/2023/fast-bike.jpg', + alt='Blurry photo of a cyclist on a road bike' +) }} + ### Discoverable Via Search Engines & App Stores *Choose a progressive web app when the people you want to reach will look for your app with a search engine and in an app store.* @@ -117,6 +120,11 @@ index them and include them in search results. Various tools such as [PWABuilder](https://www.pwabuilder.com/) essentially wrap up a PWA like a native app for inclusion in Google, Apple, and Microsoft app stores. +{{ embed.img( + src='blog/2023/pwabuilder_logo.jpg', + alt='pwa builder logo' +) }} + ### Broad Reach *Choose a progressive web app when you want to reach a broad audience across various devices.* @@ -129,6 +137,11 @@ internet or download it onto their phone like a native mobile app and use it offline. Like RWAs, PWAs take advantage of the web's high level of backward compatibility, meaning people on older devices will retain some level of access. +{{ embed.img( + src='blog/2023/heart-chain.jpg', + alt='Paper cutouts of attached pink and red hearts' +) }} + ### Specialized Capabilities *Choose a progressive web app when you want to reach a broad range of people while keeping costs down as much as possible, but need some specialized device @@ -153,6 +166,11 @@ completely independent from the browser interface. Check out and test all the PWA capabilities on [What PWA Can Do Today](https://whatpwacando.today/). +{{ embed.img( + src='blog/2023/smartphone-app-homescreen.jpg', + alt='phone with lock on the screen' +) }} + {{ embed.figure( data=[{ img: 'blog/2023/no.png', diff --git a/content/blog/2023/when-to-choose-a-responsive-web-app.md b/content/blog/2023/when-to-choose-a-responsive-web-app.md index 5481fd590..492fa2cb3 100644 --- a/content/blog/2023/when-to-choose-a-responsive-web-app.md +++ b/content/blog/2023/when-to-choose-a-responsive-web-app.md @@ -32,7 +32,6 @@ card: large --- {% import 'embed.macros.njk' as embed %} -{% import 'oddnews.macros.njk' as oddnews %} You have an idea for a custom digital product you'd like to build, and it's time to decide how to build it. One of your friends swears you won't succeed unless @@ -46,11 +45,11 @@ apps, native mobile apps, and progressive web apps -- and how to determine the best option for your project. As you read, think about who your app will serve, what their most pressing needs are, and how your app will meet those needs. - +1. When to Choose a Responsive Web App (this article) +2. [When to Choose a Native Mobile App](/2023/08/29/when-to-choose-a-native-mobile-app/) +3. [When to Choose a Progressive Web App](/2023/10/30/when-to-choose-a-progressive-web-app/) ## What Are Responsive Web Apps, Native Mobile Apps, and Progressive Web Apps? @@ -224,8 +223,7 @@ then an RWA won't work. It is *possible* to access some advanced device features in the context of an RWA, but then you would be moving into the [progressive web app][pwa] space. - -[pwa]: https://web.dev/progressive-web-apps/ +[pwa]: /2023/10/30/when-to-choose-a-progressive-web-app/ ### Performance Limitations *Don't choose a responsive web app when you need advanced performance.* diff --git a/src/images/blog/2023/fast-bike.jpg b/src/images/blog/2023/fast-bike.jpg new file mode 100644 index 000000000..efc114874 Binary files /dev/null and b/src/images/blog/2023/fast-bike.jpg differ diff --git a/src/images/blog/2023/heart-chain.jpg b/src/images/blog/2023/heart-chain.jpg new file mode 100644 index 000000000..411ec787e Binary files /dev/null and b/src/images/blog/2023/heart-chain.jpg differ diff --git a/src/images/blog/2023/pwabuilder_logo.jpg b/src/images/blog/2023/pwabuilder_logo.jpg new file mode 100644 index 000000000..ee00aac76 Binary files /dev/null and b/src/images/blog/2023/pwabuilder_logo.jpg differ diff --git a/src/images/blog/2023/smartphone-app-homescreen.jpg b/src/images/blog/2023/smartphone-app-homescreen.jpg new file mode 100644 index 000000000..71eec3e56 Binary files /dev/null and b/src/images/blog/2023/smartphone-app-homescreen.jpg differ