Progressive Web Apps (PWA) is a new technology that creates a middle ground between a website and a mobile app. They are installed on the phone like a normal. Google’s PWA standard doesn’t list any particular technology or framework for creating progressive web apps on WordPress. It can be anything as long as the checklist is followed. Many PWAs are built using Angular JS or React, which are the most popular JavaScript frameworks at the moment. Both AngularJS and React have their advantages. WordPress Service Workers A ‘Service Worker’ is essentially a script that enables your PWA to integrate the best aspects of traditional and native web apps. It’s usually written in JavaScript, and much like a client-side proxy, enables you to determine how to respond to resource requests.

Descrição

Progressive Web Apps are user experiences that have the reach of the web, and are:
  • Confiável – Carregue instataneamente e nunca mostre o “downasaur”, mesmo em conexões instáveis.
  • Rápida – Responda as interações do usuário rapidamente, com animações suaves sem rolagem abrupta.
  • Cativante – Sinta-se como uma aplicação nativa,
    com uma experiência imersiva.
This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.
Continue reading more about Progressive Web Apps (PWA) from Google.
Em geral, uma PWA depende das seguintes tecnologias para estar disponível:
Este plug-in serve como um local para implementar suporte a eles no WordPress com a intenção de ser proposto para mesclagem principal, peça por peça.
This feature plugin is not intended to obsolete the other plugins and themes which turn WordPress sites into PWAs. Rather, this plugin is intended to provide the PWA building blocks and coordination mechanism for these themes and plugins to not reinvent the wheel and also to not conflict with each other. For example, a theme that implements the app shell model should be able to extend the core service worker while a plugin that provides push notifications should be able to do the same. Themes and plugins no longer should have to each create a service worker on their own, something which is inherently problematic because only one service worker can be active at a time: only one service worker can win. If you are developing a plugin or theme that includes a service worker, consider relying on this PWA plugin, or at least only use the built-in implementation as a fallback for when the PWA plugin is not available.
In versions prior to 0.6, no caching strategies were added by default. The only service worker behavior was to serve an offline template when the client’s connection is down or the site is down, and also to serve an error page when the server returns with 500 Internal Server Error. As of 0.6, there is a new “Offline browsing” toggle on the Reading Settings screen in the admin. It is disabled by default, but when enabled a network-first caching strategy is registered for navigations so that the offline page won’t be shown when accessing previously-accessed pages. The network-first strategy is also used for assets from themes, plugins, and WordPress core. In addition, uploaded images get served with a stale-while-revalidate strategy. For all the details on these changes, see the pull request.
Documentation for the plugin can be found on the GitHub project Wiki.
Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.

FAQ

Please see the frequently asked questions on the GitHub project wiki. Don’t see an answer to your question? Please search the support forum to see if someone has asked your question. Otherwise, please open a new support topic.

Avaliações

With the rapid adoption and continuous growth in the number of mobile devices, mobile-first development has now gone mainstream. To deliver users the best possible experience on mobile devices, developers across the world leveraged the following techniques in the past couple of years:

  • Separate URLs (m-Dot websites)
  • Dynamic Serving
  • Web Apps
  • Responsive Web Design (RWD)
  • Native Apps
  • Google’s AMP

While the latter three techniques have been with us for a while, developers today are looking forward to taking advantage of a whole new set of possibilities, Progressive Web Apps (PWAs), to further improve the mobile experience. Through this blog post, you’ll learn what PWAs actually are, their key benefits and possible ways to turn a WordPress site into a Progressive Web App.

Let’s get started!

What is a Progressive Web App?

Originally introduced by Google, the concept of Progressive Web Apps revolves around delivering users a speedy app-like experience inside the browser on both desktop and mobile through modern web technologies like HTML5, CSS3, and JavaScript.

Wordpress Progressive Web App

In its simplest sense, a progressive web app combines the flexibility of a web app with the experience of a native app to ensure your users get the best experience possible on all devices, including smartphones, tablets, desktops, laptops, and whatever device comes next. Google describes them as being:

  • Reliable: Being independent of internet connectivity, PWAs are more reliable than native mobile apps. They load instantly, even in uncertain network conditions.
  • Fast: They load at the speed of light and respond quickly to user interactions. According to an infographic designed by AppInstitute, PWAs are 15x faster than native apps.
  • Engaging: Behaving exactly like a native app, a Progressive Web App offers users an immersive full-screen experience and can even re-engage them with features like Add to Homescreen and Web Push Notifications. As an example, OLX, one of the largest Indian online destinations for classified ads, was able to increase re-engagement on the mobile web by 250% through a PWA.

Statistically, each step involved in downloading, installing and using a native app costs you around 20% of potential users. The general process of downloading and installing a native app looks something like this:

  • Open the App Store
  • Search for the app
  • Click install and wait
  • Accept various permissions
  • Open the app
  • App launches
  • Sign in to the app (optional)
  • Use the app

On the other hand, a Progressive Web App simplifies the entire process into a relatively easier four-step process:

  • Visit the site
  • Add to the home screen
  • Go to the home screen and open the site
  • Use the app

In essence, a Progressive Web App is a JavaScript application designed to bridge the gap between the mobile web and mobile apps with advanced features like Offline Mode, Add to Homescreen and Web Push Notifications.

Key Characteristics of a Progressive Web App

According to Google Developers, an app must have the following characteristics to be considered as a PWA:

Wordpress Pwa Plugin

  • Progressive: It must be built with progressive enhancement as a core tenet and must work for every user, regardless of the browser or OS choice.
  • Responsive: The layout and design of a PWA must fit any form factor, including mobile, tablet, desktop and even something yet to emerge.
  • Connectivity Independent: If not all, at least some areas of the app must work properly on low-quality networks, or even offline!
  • App-like: The app must feel just like a native app to the user with app-style interactions and navigation.
  • Fresh: Whenever the user goes online, the app should automatically update itself without any action from the user.
  • Lightning Fast: The app must load at the speed of light and respond quickly to user interactions, even under poor network conditions.
  • Safe and Secure: The app must always be served via HTTPS to eliminate the risk of snooping and ensure no-one can tamper with your app.
  • Discoverable: Despite being classified as an app, a Progressive Web App must be easily discoverable by all search engines.
  • Engaging: The app must be able to engage users through web push notifications, just like a native app does with native push notifications.
  • Easily Installable: Users must be able to install and keep the app on their home screen without the need for downloading and installing it from an app store.
  • Linkable: The app should be easily shared via a URL and shouldn’t require any complex installation.

Why Should You Convert Your WordPress Site Into a PWA?

Building a high-quality Progressive Web App for your WordPress site has several incredible benefits, ranging from increased engagement to improved conversions. Let’s take a look at how PWAs can change your WordPress-based online business: Wedj 200.

Reliably Fast and Boosted Performance:

Wordpress

Studies have shown that if a website takes more than three seconds to load, almost 50% of the visitors are likely to abandon the site. With a PWA, you don’t have to worry about the load speed as all the contents of your WordPress site are saved locally and can even be accessed offline.

Increased Engagement:

When you turn your WordPress site into a Progressive Web App, features like Web Push Notifications increase the user engagement by 4X. Also, users are likely to spend twice as much time on the site.

Improved Conversions:

Since a Progressive Web App is able to deliver users an amazing, app-like experience on both mobile and desktop devices, they dramatically improve the conversion rate of your WordPress site. According to Google itself, AliExpress, an online retail service based in China, witnessed conversion rates for new users increase by 104% after the implementation of PWA.

Works Offline Too:

The ability to work offline is what largely differentiates a Progressive Web App from a native app. To access a PWA, users don’t need an internet connection. Another great thing about PWAs is that they can send web push notifications even if the browser is not opened. This engages and keeps users returning to the website over and over again, which eventually results in a decreased bounce rate and multiple user sessions.

Faster to Develop, Implement, Update:

To develop a Progressive Web App, you don’t to be a coding ninja. With a good knowledge of web languages like HTML5, CSS3, and JavaScript, building a PWA is just a matter of a few hours.

Also, unlike a native app that needs to be developed separately for each OS and requires approval from the app store to become available publicly, a single Progressive Web App works across all platforms and doesn’t require any third party approval.

Prerequisites to Setup a PWA in WordPress

To turn your WordPress site into a finest quality Progressive Web App, there are two key prerequisites that must be met:

If your WordPress site meets these four above-mentioned conditions, you can easily convert it into a highly interactive Progressive Web App using any one of the following options.

Ways to Turn Your WordPress Site into a PWA

Fortunately, in WordPress, it’s pretty straightforward to turn your WordPress site into a powerful Progressive Web App. There is a number of resources, tools, and plugins using which you can quickly and easily set up a PWA for your WordPress site. Ideally, there are three ways to get your WordPress site converted to a Progressive Web App:

Do It Yourself:

If you’re a developer having a good grip over prevalent JavaScript frameworks and libraries, like Angular, React, Vue, Ionic, etc, you can prefer to handle the entire development process yourself!

Although Google doesn’t support any particular technology or framework, Angular and React are the two most preferred JavaScript frameworks today for developing PWAs. This is because both Angular and React have their advantages:

To help you out, below are some tutorials:

While building your Progressive Web App, make sure you follow Google’s Progressive Web App Checklist and test your app against the Lighthouse tool. This will help you deliver the best possible experiences to your users.

Use a Plugin:

If you don’t want to go with the manual DIY route, don’t worry. WordPress offers a number of free and paid plugins that can do all the heavy lifting for you. Some of these are:

Free Plugins

Paid Plugins

Hire a Professional Developer:

Finally, if you don’t want to go with any of the above routes, you can hire a professional developer to turn your WordPress site into a high-quality Progressive Web App.

An added advantage of hiring an experienced developer is that you don’t need to worry about the compliance of Google’s PWA Standards. Being well-familiar with all the ins and outs of a Progressive Web App and having coded hundreds of PWAs, a professional developer not only writes clean, well-commented code but also knows well how to achieve the maximum score possible against Google’s Lighthouse tool.