Skip to Main Content

Progressive Web Apps: How That Will Change the WordPress Environment

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

You have probably heard about the upcoming wave of the mobile Web. The most common thing you've probably heard is that mobile access to the web is growing rapidly, and that about half of all web traffic is now over the phone or tablet. A February 2018 report from the Pew Research Center note that 95% of all Americans own a cell phone, while the share of Americans with smartphones is 77%.

You do not have to look far to see the impact of mobile. Look at your own behavior and that of your family. In December 2016, comScore reported that the average American over 17 years spent two hours and 51 minutes a day on his phone (Englais). notes that global Web traffic comes mainly from mobile devices for at least a year (51,95% in February 2018).

While you may think that you can not afford to develop a native app for your mobile users to store on their phones, there is a great alternative to the reach of any business: Progressive Web Applications. Perhaps you have heard of Progressive Web Apps (PWAs) and how people use them to grow their business. In this article, you'll learn a little more about PWAs and why you should think more about using them in 2018.

Some definitions

Progressive Web Applications (PWA) is a collection of Web standards originally developed by Google to improve the performance of websites on mobile devices. As a result, websites work more like dedicated mobile apps that you'll find on Apple's App Store or Google Play.

Another definition of developers for the Indian hotel chain Treebo: "PWAs are single-page applications that are progressively enhanced with features that bring a more immersive native experience. "

By reducing this a little, PWAs on mobile devices allow your readers and customers to quickly load your site's homepage and use most of the same features on the mobile device that a native application would use. Your site may exist outside the browser, even when the device is not connected to the Internet.

Other definitions

Some of the key technical parts of a PWA include:

Services Workers are the key technology associated with PWA. These allow the PWA to operate outside the network.

Manifest files contain the icon and the name that connects the application on the device to the website. The developer can also add design elements here to enhance your customer experience.

Push notifications communicate with your users (with their permission), so they come back.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Some reasons

So why should your site include a PWA? It's pretty simple.

Best performance - even on the desktop!

You know that you have a limited time to win a visitor for the first time - six seconds of loading before a potential customer retires and visits the next site on the search results. Mobile users are even more impatient - half of your potential users leave if a site takes more than 3 seconds to load!

Good news: the changes you make to create a progressive web application will speed up your site!

Example: The Indian hotel company Treebo has reduced its mobile loading time from six seconds to 1,5 second by creating its PWA. The site now loads on the desktop in one second! Their technical team reported that the site's search rankings have improved and the monthly conversion rate has more than doubled!

Offline capacity

ACPs do not need to be on the Internet to run. Your users can access all app content from their device or desktop.

In fact, one of the most beautiful things about a PWA is that your customer can register the site on the homepage of his device and use it later to buy your product, or get more information .

For example, CNET Tech Today offers a daily summary of technology news that is the daily bread of the site. If you open the site with Google Chrome on an Android device and scroll to the bottom of the screen, you will see this:

Add a PWA to a mobile home screen. No application store required!
Add a PWA to a mobile home screen. No application store required!

Press Add to home screen to download the progressive web application from Tech Today on your device. Tap the icon to load the 10 best current stories. Swipe left to read each story. Tap the CNET logo to open the CNET home page on your browser.

Remark : On Firefox, sites with PWA have an "Add to home page" icon (a plus sign in a tiny box) directly on the address bar. If the PWA is already installed, the Android logo on the address bar will take you to the PWA.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

One thing your site does not need: "Download our app" widgets take up space on your page (usually with iTunes and Android logos distracting users). If Chrome notices that a user has opened your PWA site several times a week, he invites you to add your PWA. The updates are also automatic.

No need for complex programming languages

You may have considered creating a native mobile app for your business, but you discovered that creating a mobile app is a different animal than creating a website. If you work with a web design / development agency to maintain your site, they will not necessarily have the skills to create an application for dominant mobile providers.

In order for your software to appear in the Apple App Store, your developers must register with the Apple Developer Network, use Apple's development tool (which runs only on Mac), and have a language of theirs. Apple-approved programming: Swift or Objective C.

Programming for Android is a little easier (no developer approval is required), but the vast majority of Android apps are written in Java, which can be a hard language to learn.

In order for the app to appear in Apple or Android online stores, the completed app must get approval from the respective storekeepers.

On the other hand, progressive Web applications are created with the current languages ​​of the Web: HTML, CSS (Cascading Style Sheets) and JavaScript. In short, even novice Web developers can create high quality PWAs.

Specifically, you do not need a lot of computer education to make a PWA for your WordPress site. If you've already made changes to your site's layout using a child theme, you can also create a PWA file. We will discuss coding issues in another article.

Increase the support of technology giants

Standards take a long time to become standards. Google first promoted PWA to 2015.

For a long time, Chrome was the only browser to support PWA, but this is changing. In recent months:

  • Mozilla has added PWA support in Firefox 58
  • Apple recently announced support for Web applications in iOS
  • Microsoft will support PWA in the next version of Windows 10, which will be available later this year (2018).

Going further than other operating system vendors, Microsoft has stated that "high-quality" PWAs will soon be integrated into the Windows 10 mobile app store and desktop.

WordPress and PWAs

WordPress does not yet fully support the creation of progressive web applications in the basic application. The Jetpack team is committed to adding PWA features in the coming year. This is helped by the Javascript-ification of WordPress.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Jetpack "gradually introduces PWA features as soon as they are ready", according to the developer Dan Walmsley in an article on the WordPress VIP blog . Developers can add manifest files using the Jetpack Manifest Module from 5.6.0, and have introduced progressive image loading, which speeds up site loading even when there are many images on the page . More features will be coming this year.

Some plugins seek to add a PWA feature, but have not been heavily adopted.

  • The WordPress Optimization tool provides a work and manifest tool.
  • Super Progressive Web Apps generates a manifest and an Add button to the home screen, among other features.
  • The WordPress Mobile Pack also adds PWA features

How are you going to use the PWA?

In this tutorial, you learned a bit about Progressive Web Apps and why you should add one to your company's website:

  • The growing wave of mobile device traffic
  • Better performance for your website - mobile and desktop
  • Availability even when the device is offline
  • Uses standard Web features: HTML, CSS and Javascript. Less expensive to build
  • Increased support for browsers and operating systems

Maybe now you want to know how to do a PWA on WordPress? Or show your developers how to get there? This will be the subject of another tutorial.

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top