Yoast – What is a progressive web app (PWA)? Why would you want one?

This article was originally published on Yoast. Click here to view the original article.

It’s been years since the beginning of the age of the smartphone. With it came the era of native apps. Apps continue to play a massive role in our daily life, and many business owners have asked themselves multiple times: should we have an app? Of course, the only answer to that is — it depends. Building and maintaining a native app is cumbersome and often quite expensive. Luckily, there is another option. This option combines the joys of a native app with the technology we use on the web: the progressive web app, a.k.a. PWA.

Edwin ToonenEdwin is a strategic content specialist. Before joining Yoast, he spent years honing his skill at The Netherlands’ leading web design magazine.

Avatar of Edwin Toonen

What is a PWA?

Twitter.com is a PWA

PWA stands for progressive web app. This is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that rivals an actual native app. Thanks to a couple of smart additions, you can turn almost any website into a progressive web app. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop. Plus, you can offer all the features of native apps, like push notifications, offline support, and much more.

Many sites you find online are actually a progressive web app. Take twitter.com, for instance. If you visit that site on your smartphone, you can install it to your home screen. Now, on opening the saved Twitter site, you’ll notice that it looks and performs just like a native app. There’s no browser window or nothing. There’s no difference in running it from an iPhone or an Android smartphone. Simply log in and you’re good to go. That’s a major benefit of building your web app with a PWA in mind.

PWAs are gaining popularity. Many big sites are PWAs, like Starbucks.com, Pinterest.com, Washingtonpost.com and Uber.com are actually installable on your home screen and offer a comparable experience to their native apps.

What’s the difference between a native app and a PWA?

A native app, like the ones you download from Apple’s App Store or Google’s Play Store, is often built in a programming language specific to that platform. So for iOS apps, that would be Swift and for Android apps, Java. If you want to build an app for those platforms, you need to know the technology. Yes, there are shortcuts, but these come with their own limitations. If you want to have an app on all the mobile platforms, you need to know all the different technologies. There’s no easy way to build one and publish it to all the stores out there.

Of course, there are ways to get the best of both worlds. A progressive web app, for instance. This runs in the browser and — once saved to the home screen — functions like a native app. It even gets access to the underlying hardware and software that the browser can’t access for safety reasons. If the PWA performs great, users will never know that they are using a web-based app instead of a native one.

There are some caveats, of course. While browsers have been quick to adopt the technology for this, there are still some limitations. On iOS, the technology needed works spotty in Safari. Apple doesn’t (want to) support everything yet, making it a bit of a chore to get the same exact experience everywhere.

What are the benefits of a PWA?

The main reason why everyone is chasing after apps is because they offer greater engagement. Users who install your app are your biggest fans and they are more likely to turn their usage into sales or signups. Thanks to push notifications it’s much easier to re-engage with users. Apps can offer an excellent experience that can do well for a brand.

We talked about some of the plusses of PWAs in this article, but here’s a short overview:

  • You don’t have to go through the process to get into different app stores
  • You can build PWAs with common web technologies
  • They are often cheaper to build
  • Since you’re turning your site into an app, you’ll have fewer code-bases to maintain
  • PWAs are responsive and work with many different screen sizes
  • PWAs are smooth, fast and lightweight
  • No need to hand off big chunks of money to Google and Apple
  • They work offline, unlike your regular site
  • PWAs are discoverable via search engines (which have a lot larger audience than app stores. Plus, if you want you can still get your PWAs distributed via app stores)
  • You can use push notifications to re-engage users
  • Installing a PWA can lead to higher engagement

Still, native apps win out sometimes. PWAs get deeper and deeper access to the operating system of a smartphone, but a native app can go deeper still. Plus, there are limits to what a PWA can do. For instance, PWAs are not the best choice when you want to build high-performance games.

All in all, it makes a lot of sense to think about having a PWA in your mobile strategy. But, the main question you should ask yourself is: does my audience want this?

Who’s this for?

Should everyone simply build a PWA and be done with it? No, consider your business and — more importantly — your target audience. Are they even using apps? Isn’t this an overly complex way of getting to what you want to achieve? Again, like everything, you need to research the needs of your audience. Ask yourself, what do you want this technology to do? Where are your users? Do they have a good data connection and solid hardware? How and where are they using your content? And do you think an app can help them do their job better?

PWAs are awesome and implementing them doesn’t have to be all that hard. But just because it’s easy doesn’t mean you should do it. If your audience has no need for it, why would you build one?

What are the SEO concerns of a PWA?

The PWA is inherently web-centric. It was born from the web and developed with search engines in mind to make discovery easy. Of course, you can make a progressive web app out of any-old site and it doesn’t take much to do so. However, many PWAs use JavaScript to build more complex functionality and while search engines have become apt at rendering JavaScript, it can still be a cause for concern.

When setting up a PWA, you have to make sure your JavaScript is accessible. Don’t block files for bots and make sure that links are available. To improve the rendering process you can make your JavaScript framework use server-side rendering.

Turning your site into a PWA doesn’t mean you directly improve the SEO of that site. If it makes sense to turn your site into a PWA, do so, but don’t do it for any perceived SEO benefits. If you have a great PWA, you are offering your users a fantastic user experience, which might make you one-up your competition. In this regard, it’s a good idea to take a look at them for your mobile SEO strategy.

What are the three main building blocks?

It doesn’t take much to set up a PWA. There are three things you need to provide before your site turns into a valid PWA.

  • A secure connection (HTTPS): PWAs only work on trusted connections, you have to serve them over a secure connection. This is not only for security reasons, but it’s also a very important trust factor for users.
  • A service worker: A service worker is a piece of script that runs in the background. This helps you determine how to handle network requests for your PWA, making it possible to do more complex work.
  • The manifest file: This JSON file contains information on how your PWA should appear and function. Here, you determine the name, description, icons, colors, et cetera.

 

Read the rest of this post at Yoast here...

How to Create a WordPress Website

How To Create A WordPress Website

In this article, we’re going to discuss how to make a WordPress website. WordPress is an open source content management system that is very user friendly and allows any individual to create beautiful websites with ease. WordPress can be installed on your server and can be downloaded here.

 

Click here to download WordPress

WordPress is a free to use CMS that powers more than 35% of the world’s websites today. Many businesses and professionals use WordPress to create stunningly beautiful websites.

Your Host

Choosing your host is the first important step in creating your website. There are many great hosting sites out there and most of them will have great deals. We have tried many and feel the best host available is 1&1 IONOS.

 

Now that you’ve selected a host, it’s time to install WordPress. If you chose to go with IONOS, you’ll see a setup process for your new host package. One of the options for this setup process is to have WordPress installed automatically for you. This is the easiest option. However, if that is not the case, you can use the link above with the WordPress .zip file and upload it to your server. This process will vary from host to host, but it’s not a complicated process. As always, we’re here to help and you can contact us to help you with the installation of WordPress on your server.

Once WordPress is installed, you’ll be able to log in to the back end of your website and start creating. Your backend should look like this:

To the left, you should see a navigation column. Select Appearance and then select Themes.

In most cases, you should see a handful of themes already installed that you can choose from. If none of those suit you, click Add New at the top. You’ll be greeted with a whole bunch of popular themes that you can choose from.

Start building!

Once you’ve found the theme that you want to go with, simply click install and activate! Once you’ve done that, you can go to pages and start working on your home page. For an even easier time, download elementor. Elementor is a page builder with over 4 million downloads. It makes it super quick and easy to make a beautiful website, without code or much knowledge. Their platform has a TON of reading material and videos to teach you how to make great websites! Not for you? Check out the SiteOrigin page builder as well. SiteOrigin takes a different approach to building a website that some people might prefer. SiteOrigin gives you the ability to get a visual of your sites layout and easily input widgets into your website.

Join Us

We’re releasing our “Learn WordPress” course soon! In our course, we don’t just tell you to click this and that, we go step by step through each process. You’ll be building an e-commerce website with us. Interested in knowing when it launches? Fill in your email to sign up!

(most companies say they hate spam, but we mean it. Your email will only be used to notify of our Learn program launch)

How To Remove the Sub-Header in WordPress

What is the sub-header?

The sub-header is the secondary header on your website or page. Occasionally, you won’t always have the option to disable your sub-header and in some circumstances, you may want or need to. As an example, I am currently working on a website for a customer, kkfabrication.com. The theme I’ve chosen to use has a sub-header that automatically displays breadcrumbs (which I can’t stand). So, in this instance, I need to remove the sub-header. This is WordPress, however, and there are ways to disable the breadcrumbs, BUT we’ll save that for another day. So let’s dive in to this super simple and easy way to disable the sub-header.

Navigating To The Sub-Header

The sub-header can be found two ways: through the dashboard and via the customize option displayed at the top of your page when you’re signed in as an admin.

 

Editing the CSS

Now comes the easy part. You should see a menu with many options. At the bottom of this is “Additional CSS”. Go ahead and select that.

Entering the Code

Once you’ve selected “Additional CSS”, you should see the following. Copy and insert the code below the image and that’s it!

#site-subheader
{display:none;}

You’re done!

That’s all there is to it, go ahead and click update and you’re good to go. Enjoy!

Are you interested in knowing how to do more? Visit our contact page and send us a message!