Should I Build a Progressive Web App with WordPress in 2021?

Light House Screen Shot PWA
Light House Screen Shot PWA

Keep hearing progressive web app? In 2021, more than 90% of people around the world have converted to a mobile experience.

Since mobile continues to grow, the online market changes quickly. How do we adapt?

The Google SERPs (Search Engine Result Pages) change with the evolution of the internet. So we need to follow and scale with it’s changes. Google made converting your WordPress website into a Progressive Web App (PWA), the premier spot in 2021.

PWA’s optimizes your WordPress site for the Google’s SERP spiders, the things that crawl the internet. As a digital marketing agency, we call this technical search engine optimization (technical SEO). Technical SEO includes so much more than just the words on your WordPress site. Technical SEO includes things such as htaccess file configurations, robot.txt file configurations, CSS deployment, heading and content structure, JS deployment, accessibility, mobile responsive design, and so much more. This post touches it all so buckle up.

What is a Progressive Web App?

A Progressive Web App essentially is just your website with a JavaScript framework. The JS framework allows for your website to be stored on all devices similar to an app. Progressive web apps first appeared in 2015 after Chrome developer Alex Russel and designer Frances Berriman started the trend. Their article showed how everything worked together seamlessly to provide a comfortable user experience. They outlined a few principles on what makes up a PWA.

Progressive Web App

4 Progressive Web App Principles

  • Consistency – Everything loads no matter how slow the connection
  • Speed – Google’s states everything should load in under 3 seconds
  • Engaging – The user must be immersed in the experience
  • Responsive – Your site works on every device and screen size

If you have an existing website or WordPress site, it can be converted to a PWA. WordPress sites will convert to a PWA with ease using plug ins but these are temporary solutions. We outline the different avenues in order to choose the best solution.

Benefits of a Progressive Web App

On top of the technical SEO benefits we have discussed, we must emphasis Google is not randomly telling us what to do. Have you ever come across a website that loads instantly? How good did it feel? What about the one that takes 3 or 4 or even 10 seconds to load? Technology grows to be faster consequently our patients becomes shorter. That means what use to be good SEO is no longer enough so we must rapidly adapt. Having and maintaining a progressive web app can ensure that you are staying at the cutting edge of SEO. Now let’s talk about how you decided to make a progressive web app.

How to Make a PWA?

Obviously not everyone needs the same solution. Everyone operates under different information, budgets, and who knows what else. So we’ve outlined 3 different solutions, building it manually, WordPress plugin and using a service like Mill Mountain Digital.

WordPress Plugins

Firstly we might install a WordPress plugin. WordPress plugins can take a large amount of stress out of the equation but not always. When it comes to dealing with more complex issues, many people find WordPress plugins just break their WordPress site. Be cautious when installing and running any plugins. I’ll go over one that can work for temporary solutions.

Super Progressive Web Apps

Super Progressive Wep Apps stands as the most popular WordPress plugin to-date. Our customers have found it to be easy to use, highly customizable, and having great offline pages.

Progressive Web App WordPress Plugin

We have found this WordPress plugin to work well but Google still sees it as a temporary solution. Let’s talk about a more permanent solutions.

How to Create a PWA Manually

Should I Make a PWA Manually or Hire Someone?

Building a PWA manually allows for more options and better optimization. If you’re unfamiliar with your system please contact a developer. Mill Mountain Digital can help. If you are a DIY user and have an understanding of everything on your website continue with this!

How Can We Make a PWA Google Friendly?

Google seems to be a big scary piece of technology but they document everything perfectly. They have outlined in their Google Search Console the elements you must follow to make a high impact PWA.

Essential Google’s Elements for a PWA
The site is served over HTTPS
All app URLs load while offline
Pages on tablets and mobile devices are responsive
First load fast even on 3G
Metadata provided for Add to Home Screen
The site works across different browsers
Page transitions don’t feel like they block on the network
Each page has a URL

The best way to check if your website meets these PWA elements would be to use Google’s Light House tool. Google provides safe and easy to use tools for most web development problems so don’t be afraid to explore all their tools.

Additional Google Elements for a PWA

Light House provides additional elements to go over as soon as you run the tool.

Site content indexed by Google
Schema.org metadata information where appropriate
Social metadata where appropriate
The History API on all pages
Canonical URLs where necessary
Social metadata where appropriate
Smooth content transitions as pages load
Users can pay easily on the current UI
Inputs that aren’t blocked by the on-screen keyboard
The ability to go back from a detail page and keep the scroll position on the previous page
Shareable content
The option to disable notifications
Push notifications that are timely and relevant
Easy payment options on the existing UI

All of this probably sounds daunting but there is help. At Mill Mountain Digital we solve these problems on a daily basis. Lastly we are going to dive into creating and editing a manifest file.

How to Create a manifest.json File

Creating a manifest.json file can be simple but you need to understand the architecture of your website. Firstly the manifest.json file can be named anything but developers prefer manifest.json. Secondly we need to place this file at the top level of our directory. Lastly we will implement our code.

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}
Elements to a Manifest.json File
short_name and/or name

This element is required for the file to work. When you download your PWA, this is what will be listed under the icon.

icons

The icon that will be displayed when downloaded.

start_url

Points to where you want the app to start.

background_color

Splash Screen background color.

display

There are three display options. First is fullscreen. When your app loads the display will be fullscreen. Second is stand-alone. When your app loads the display will be windowed with no navigation on the bar. Third is minimal. When your app loads the display will be windowed with a navigation bar.

shortcuts

You can input an array of shortcut menus.

description

Describes the purpose of the app.

Who Can Create a PWA in Roanoke Virginia?

Mill Mountain Digital creates your PWA from your existing website. So what does that mean for you? Since we do not need to code a new website, we lower the cost, increase speed and most importantly increase traffic conversion.

Progressive Web App in Roanoke Virginia

When a PWA isn’t enough?

PWA’s are not the answer to everything but they are close. When it comes to larger amounts of data, you will need a Native app with a backend that can process everything.

Creating a Native App Can Take a Long Time

Native apps are above and beyond the best way to go, however; they take large amounts of time and money to create. Without a doubt the best option for small-medium sized businesses is to create a PWA.

Who Can Create an App in Roanoke Virginia?

Sometimes we have a million dollar app idea but we just cannot find someone time make it. Mill Mountain Digital loves working with customers that are creating value with their ideas. Contact Us when you have it.

One thought on “1”

  1. I’d like to thank you for the efforts you’ve put in penning this site.
    I really hope to view the same high-grade content by you in the future as well.
    In truth, your creative writing abilities has inspired me to
    get my own, personal blog now 😉

Leave a Reply

Your email address will not be published. Required fields are marked *