Imagine that your website interacts with the user like an application. That is, the user can install it on any gadget, receive notifications and work with it (even without an Internet connection). This is already a real technology that Google is actively promoting, and in this post I will tell you about it in detail.

Progressive Web App s (PWA) Google announced back in 2015. This format for creating mobile websites has attracted attention due to its relative ease of development and almost instantaneous user interaction. Already in May 2016 at the conference Google developers I/O The Washington Post showed off its mobile hybrid site-app.

And this is just the beginning. Microsoft is already working on the challenge of how to add Progressive Web Apps to Windows Store. Google in May 2016 announced a long list of ideas for the development of progressive applications. And what search engines will pay Special attention PWA in the future seems inevitable.

Take a closer look: progressive apps may be your golden ticket to the SEO of the future.

Why should businesses create progressive web applications and why now?

Let's start with the second question. Recode recently published a study that confirmed what many experts already have on the tip of their tongue: the boom of traditional apps has passed, and the percentage of those who uninstall apps continues to grow.

Comscore recently reported that most smartphone users download zero apps per month. Only about one-third of smartphone owners download anything, and most of them download between one and three apps per month.

Why will Progressive Web Apps change things?

1. Users can navigate to progressive apps from links on social networks, while browsing the web, or directly from search results. Agree, this is much more convenient than competing for views with two million available applications on the IOS App Store or Google Play Store.

2. The offer to install a progressive app is only shown when the web app meets certain criteria and the user has demonstrated interest by revisiting the site.

3. Installation of the application occurs instantly. All components that require a long loading time have already been installed in the cache when the user first visits the site.

4. Progressive apps are much smaller in size as they make efficient use of the browser's capabilities.

5. Pop-up notifications, work in offline mode and all other functions progressive application will work even if the visitor has never installed it.

6. Regular applications can only be used on the platform for which they were created. You can't use the app on your computer the same way you can on Android or iOS device. In addition, only those who have installed it can use the application.

Progressive Web Apps will run anywhere, whether they are installed or not. They will work even on platforms that do not yet support all PWA features - even from old PCs with primitive browsers they can be accessed. True - with limited functionality.

You might argue that there are classic apps, which are supported on different platforms. But supporting such applications costs a pretty penny. Progressive Web Apps can reduce these costs by reducing everything to providing a single application that runs on any platform.

7. When you are not in the app store, you are not limited by the App Store rules and do not have to pay 30% of sales.

Disadvantages of Progressive Web Apps

1. PWA - new technology, so there aren't many examples of implementing this format. Those who take risks will become pioneers.

2. At the time of publication, Progressive Web Apps are not available everywhere. Yes, Chrome and Opera have started supporting Progressive Web Apps. Firefox and Microsoft have committed to support. So far, only Apple has no intentions to support this format.

However, none of these reasons is an obstacle to testing PWA as a format today.

What exactly is “progressive” about the new format?

Under progressiveness in in this case What this means is that an application with limited functionality can work on any gadget, anywhere, but when the user switches to a more advanced device or browser, the PWA functions expand. And at the same time, it does not need to be downloaded multiple times on each device.

The Washington Post created a Progressive Web App, which is installed in background when people read them AMP pages in the results Google search. As a result, the number of visits to articles increased by 12%. They went from loading articles in 8 seconds in 2013 to 80 milliseconds in the Progressive Web App.

Why should you hurry?

Today, a user only needs to visit your site twice to receive an offer from the browser to install a PWA. But as the number of technology implementations increases, the frequency of installation offers will also change, and there will be fewer such offers. More and more companies are starting to embrace Progressive Web Apps and it will soon become difficult to stand out from the crowd.

I have no doubt that PWA is the future mobile applications. According to statistics, popularity regular applications is falling, and the development of AMP and PWA plays a significant role in this.

Progressive Web Apps are a group of applications that are built using a stack of JS, HTML, and CSS technologies. In simple words, these applications are built on web technologies.

Any user can go to the PWA through the browser bar and via a link. Each PWA application is a website that adapts to PWA criteria. They can send notifications and have a cache, so even in the absence of the Internet, the user can interact with the application.

The user does not need to go to Google Play, search for the application and then download it. Progressive web applications support cross-platform. That is, developers do not need to learn Swift and Kotlin to create their application. PWAs will be available from any device: Windows, Linux, iOS, and so on. And this is a huge improvement over conventional applications.

In 2019, the first 5G smartphones will begin to appear. The development of 5G will allow us to take an even more serious look at progressive web applications as a replacement for the App Store and Google Play.

PWAs can be found everywhere - in the Google search bar and even through PWA stores. One of these stores is. And to better understand PWA, we will look at this application.

PWAs are no different from regular applications in terms of user interaction. They support all animations and work very smoothly. For example, let's download the Timo application. To do this, click on “Launch app”, after which the website hellotime.co will open, which will offer to add the application to your desktop.

We add an icon to the desktop and we have an installed web application in front of us. Convenient and easy. Now, turning off the Internet, it will start and work.

I have no doubt that PWA is the future. What do you think?

In fact, answering this question is quite difficult. For now let's say this:

Progressive Web Apps (PWA) are hybrid app or a website that works on any platform, on any device

I will try to explain this not very successful definition.

Now exists great amount devices that can be used to interact with our company, but conditionally the methods of such interaction can be divided into two very large groups:

1. Web sites
2. Mobile applications

Websites are well known to us and they occupy a predominant share in business and user communications. IN Lately For the most part, websites have become convenient for use in almost any environment and on any device, but there is a serious limitation - unstable channel communications in mobile conditions. Everything looks great, but if there is no Internet, there is no website. And if the Internet connection speed fluctuates and changes sharply from tens of megabits per second to several kilobits, then working with the website can hardly be called comfortable. Remember how you look at websites on a train or in a subway car...

Mobile applications should, in theory, be free from this drawback, but even here developers forget that the user may not have the Internet. However, development and, no less important, further maintenance of the application, and even on different platforms!, is not the easiest task. And as a result, we get another stupid “for show” application, the value of which tends to zero. In addition, you can add the impossibility of running mobile applications on the desktop, and this is very often necessary.

Progressive Web Apps are designed to solve these problems and combine these two large groups of communication methods into one large one - PWA. You can say this:

Progressive Web Apps is a way of building applications using the Web stack (HTML, CSS JS) that meet three important principles:

1. Independence from the network connection - works in offline mode

2. Speed ​​and responsiveness - quick response to user actions

3. Native look - the ideology of the device interface does not break

Some PWA examples

Here are some links where you can find PWAs, even in places you wouldn't expect to see them, like most Google services are PWAs:

Try opening these sites/applications (even on a desktop!) and turning on airplane mode while turning off the Internet.

If you look closely at the image above, you will probably notice that Google Keep clearly works in Windows interface, that is, it works on the desktop as a full-fledged application!

PWA on desktop

Indeed, Progressive Web Apps can and do work on the desktop (though not all browsers support this yet) like regular applications.

Here is an example of my computer screen. Everything, all the applications that are currently open on the screen are PWA.

Agree, this is incredibly convenient! These applications do not need to be installed, a few mouse clicks and all the settings, the entire working environment is already available to you. And it makes no difference what computer you work on - a desktop or a laptop. The condition in which the job was abandoned is the same condition it will be in at another workplace.

But how is this possible?

Implementing Progressive Web Apps (PWA)

First of all, it is important to understand that any PWA application is a website, more precisely full use Web Stack:

• Application interface - HTML/CSS over HTTPS (required!)
• User interaction (interactive) - AJAX (we prefer REST API interaction)
• Alerts, forced synchronization data - Push API
• Caching data for offline work - Service Workers and Cache API (more details below)

Here small instructions How to make your first application from scratch is available on Google Сodelabs.

PWA Manifest

It is SW that implements the application caching policy for the application to operate in offline mode. It is clear that it will be different for each application, but most often developers use the Offile First policy. There is a wonderful article (also old! PWAs were not born today or yesterday! But you didn’t know :)), which explains well why this is so. Be sure to take the time to study it:
https://alistapart.com/article/offline-first

In general, Service Wordker is far from being as harmless a thing as it might seem at first glance, and for good reason they require detailed consideration, but for now we will offer you this rather simple solution as a first experiment.
https://justmarkup.com/log/2016/01/add-service-worker-for-wordpress/

Don't consider it as a complete solution for a website, but it is a great platform for experimenting and making headway! Maybe later I will write about our bumps and numerous rakes that we stepped on during the first implementation of PWA on websites. If you are interested in this topic, write questions in the comments.

Implementing PWA on WordPress sites

Oddly enough, despite the fact that Progressive Web Apps have been around for quite a long time (and the idea itself is already many years old!), developers talk little about them. And there are not many ready-made solutions for the most common CMS in the world either. But there is. Here are a few plugins that allow you to embed on websites WordPress features PWA applications:

• Super Progressive Web Apps - quite simple, but very good plugin.
• Progressive Web Apps from PWAThemes.com is a more complex, but also more flexible solution that allows you to create individual themes ( appearance) for PWA presentation.

Installing PWA on a WordPress site in practice

To begin with, I took a fairly simple online store of erotic lingerie - https://www.lustshop.ru/
Please note: HTTPS is required!

Installed the Super PWA plugin and set initial settings(there are not many of them):

I reset the site's caches and tried to log in with mobile device:

Here is a banner to install the application at the bottom of the screen

The application is installing...

All! PWA application on a mobile device!

Now let's try to put it on the desktop. To do this, select this item in the browser:

Ready! The application has appeared on the desktop!

Brief conclusions

So, as we see, Progressive Web Apps actually combine sites and applications, blurring the boundaries between them.

Using the PWA approach, we can create a convenient service (site? application?) that will work in any conditions, on any platforms.

Plugins will allow you to make a simple PWA application, but will not solve all problems. Good application need to carefully design and develop by yourself.

But that's a completely different story...

By opening the spoiler you can find out what PWA is

Like existing web applications, they will be hosted directly on their associated website. Developers can update them directly on their web server, without sending these updates to several different app stores, and the same application will work equally on all browsers and platforms.

PWA is a new technology that combines open standards Internet offered modern browsers to provide the benefits of a rich mobile experience.

The "progressive" part of the name means that they are "incrementally improved" with modern web features, which means they will work in older browsers that don't support the new features, but will work better and with more features for them." nicer" in modern browsers.

These applications will get their own window and shortcut on the taskbar (in Windows 10 and any Chrome versions) or icon on the home screen (on Android devices and other smartphones). When you open them, they load quickly thanks to the Cache API and IndexedDB, which stores application resources and data on your device, allowing them to work even without the Internet.

The new Chrome 70 allows you to install PWA apps on Windows 10. They launch from the Start menu and appear just like native apps without address bar and without tabs.

Chrome 70, available now, allows you to install Progressive Web Apps/PWAs on Windows. When you visit a website using a PWA such as Twitter or Google Maps, you can now "set" it to look more like a regular desktop app. Google has now updated the site Google Photos(photos.google.com) to function as a progressive web application.

◆ PWAs are never packaged into a standalone file like a program. Like the traditional web applications we use today, they are hosted entirely on application servers.

◆ PWAs can be listed in app stores for easier discovery and installation, but the app store will only link to web application servers.

It's about establishing new standard for installable applications supported by each platform.

This means they will run as native language apps on Windows 10 and will be present in the Windows Store. This will significantly impact the Microsoft Store issue, as Google does not want to support Microsoft's Universal Windows Platform (UWP). Other developers who didn't want to create individual applications UWP will suddenly be able to support Windows 10 with native style PWAs.

How to install PWA on Windows 10

To install PWA on a computer running operating system Windows, you first need to visit a website that has a "Progressive Web App". Currently, relatively few sites offer PWAs. Twitter offers PWA, YouTube which uses its mobile interface.

When you are on a website that offers a PWA, you can click Menu > Install to install it. For example, open the ampbyexample website and select menu > Install AMP ampbyexample application.

If you don't see this option, the website you're visiting doesn't offer PWAs. Most websites don't do this.

installing PWA on Windows 10

You will be prompted to install the application on your system. Click Install.

You'll get the app with its own window, taskbar icon, and Start menu entry.

To remove a PWA, click the menu button at the top of the application window and click "Uninstall [App Name]".

By the way, this Twitter app is the same PWA that is offered when you install Twitter through the Store on Windows 10. However, Google is not happy with Microsoft because Microsoft browser Edge doesn't have any way to install PWAs from the web.

You must install them via Store app. Yes, it's weird, but it's an easy way for Microsoft to expand its Windows App Store.

Support for installable PWAs is available starting with Chrome 67, on Chrome OS and coming to MacOS and Linux with Chrome 72. If you are Mac user or Linux, you can test this feature today by enabling #enable-desktop-pwas flags.

Where to Get Progressive Web Apps

I repeat, it is impossible to download Progressive Web Apps; they can only be installed directly from the site itself, which has PWA status, or from a catalog (I’m sure there will be many of them soon) that calls itself a store.

Catalogs, showcases, and examples where you can find interesting applications (progressive)

screenshot from pwa-directory website

See how others are doing Progressive Web Apps. Get inspired and think about how it benefited these people in key business metrics.

PWA.Rocks is a showcase of progressive web applications.

: Progressive Web Apps. The site is maintained by the Opera development team and they accept requests to be featured in the directory if you have a great responsive PWA.

Remember that sites are not “mobile friendly”, so the best PWAs look great on desktop and devices.

Google PWA Storefront : Google storefront for companies that have been sourced from PWAs.

Business Case for Progressive Web Apps : Jason Grigsby makes a compelling case for the benefits of PWA.

Appscope is a directory of the best progressive web apps, apps that run in the browser, work on all devices, launch instantly and can be installed to work offline.

Appcope, one of the directories for Progressive Web Apps (PWA)

List of PWAs / Best examples of PWA applications

Name	Description	Link	Audit score
ReSTbasis	Web Starter Kit.		100
The Air Horner	An air horn.		100
chromestatus	Chrome Platform Status		100
Serene Notes	text & picture notes, retrievable by context		100
Dev.Opera	Web features and implementations		73
Appscope	Directory of PWAs		100
Bet Calculator	Online bet calculator		91
emojoy			82
Expense Manager	Example expense manager
Firefox Platform Status	Roadmap for web platform features
Flipkart Lite	Online shopping		55
GitHub Explorer
Google I/O			82
Guitar Tuner	Tune a guitar		82
Instant Website Maker	Make A Website		100
Kite OnAir network	Kite Network
koolsol	solitaire card game		100
Memory Game PWA

Progressive Web App uses modern web capabilities to provide the user with user-friendly interface. Any website can be a PWA, and this article will help you do it.

Max Böck, a front-end developer from Austria, wrote an article in which he showed how simple the process of turning a regular website into a Progressive Web App is. We have translated it for you and all that remains for you is to get to work quickly.

Turning your website into a Progressive Web App is not difficult and has a lot of advantages, so in this article I will tell you how to do it in three steps. But first, let's look at some common misconceptions:

1. Your project doesn't have to be an "application" to be a Progressive Web App.

A Progressive Web App can be a blog, an advertising site, a store, or a collection of cat memes. At its core, a Progressive Web App is just a way to optimize your code for better and better performance. fast delivery to the user. You can and should take advantage of these features regardless of your content.
Note: The term "application" in Progressive Web App is heavily debated because some people believe it conveys the wrong idea. IMHO it's just a name and it's hard to tell the difference between websites and web apps these days anyway.

2. Your project does not have to be a Javascript-based one-pager.

If you are not using advanced React-Redux SPA, then this is no reason to shy away from using this technology. My personal site is just a bunch of static HTML running on Jekyll, and it is still a functioning progressive web application. If you're running something online, this might come in handy.

3. Progressive Web Apps are not made specifically for Google or Android.

The beauty is that Progressive Web Apps offer the best of both worlds—deep linking and www URLs, offline access, push notifications, and more from native apps—while remaining completely platform independent. None play market And app store, no separate codes for iOS/Android, web only.

4. Progressive Web App is immediately ready and safe to use.

"P" stands for progressiveness, which means that everything associated with it can be considered a new improvement. If old browser does not support Progressive Web App, it will not break; it will simply revert to the default view - a regular website.

OK, why would I do this?
There are serious benefits to turning your site into a Progressive Web App:
● Faster, more secure UX
● Best Rating Google
● Ease of use
● Better performance
● Offline access

Even if you don't expect your users to "install" your Progressive Web App (like putting a shortcut on their home screen), there's still a lot of switching to do. All the steps required to create a Progressive Web App will improve your site and are generally considered best practice.

Step 1: Manifest.

Manifest is simply a JSON file that describes all the metadata of your Progressive Web App. Things like your app's name, language, and icon. This information will tell browsers how to display your application when it is saved as a shortcut. It looks something like this:

( "lang": "en", "dir": "ltr", "name": "This is my awesome PWA", "short_name": "myPWA", "icons": [ ( "src": "/assets /images/touch/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" ) ], "theme_color": "#1a1a1a", "background_color": "#1a1a1a ", "start_url": "/", "display": "standalone", "orientation": "natural" )

"lang" : "en" , "dir" : "ltr" , "name" : "This is my awesome PWA" , "short_name" : "myPWA" , "icons" : [ "src" : "/assets/images/touch/android-chrome-192x192.png", "sizes" : "192x192" , "type" : "image/png" "theme_color" : "#1a1a1a" , "background_color" : "#1a1a1a" , "start_url" : "/" , "display" : "standalone" , "orientation" : "natural"

It is usually called "manifest.json" and is associated with your site tag:

< link rel = "manifest" href = "manifest.json" >

Tip: You don't need to write this file yourself. Various systems have different sizes, but doing it yourself is very tiring. Instead, you can create one 500x500 image for your app icon (perhaps your logo) and then go to Real Favicon Generator. They provide everything required sizes, meta tags and generate a manifest file. This is simply amazing.

Step 2: Switch to HTTPS.

Progressive Web App should work through secure connection, so HTTPS is the right solution. HTTPS encrypts user data sent to the server and protects the connection from intruders. Lastly Google time actively supports sites with HTTPS and ranks them higher than insecure competitors.
To switch to HTTPS you will need SSL certificate from a trusted authority. The method of obtaining directly depends on the hosting situation, but usually there are only two ways to do this:

• If you are using your own server or have root access to it, try LetsEncrypt. It is a free, open and simple certificate authority that allows anyone to start using HTTPS. It is easy to set up and has a good reputation among authorities.
• If you are using shared hosting, unfortunately many providers do not allow you to control the LetsEncrypt level. Instead, they usually offer SSL certificates on a monthly or annual basis. If you are unsure how to obtain a certificate, contact your hosting provider.

Once you receive the certificate, there may be some adjustments that need to be made to your code to ensure that all resources are protected. For getting additional information about this process, read the guide from keyCDN.
If everything goes as planned, you will be rewarded with a beautiful green icon padlock next to your URL:

Step 3: Service worker.

This is where all the magic happens. A service worker is essentially a piece of Javascript that acts as an intermediary between the browser and the host. It installs automatically in supported browsers and can intercept requests sent to your site and respond to them differently.
You can set up a new SW by simply creating Javascript file V root directory your project. Let's call it sw.js. The contents of this file depend on what you want to achieve - we'll get to that in a second.
In order for the browser to know that we intend to use this file as a Service Worker, we need to register it first. In the main script of your site, enable the following function:

function registerServiceWorker() ( // registers the sw script in supported browsers if ("serviceWorker" in navigator) ( navigator.serviceWorker.register("sw.js", ( scope: "/" )).then(() => ( console.log("Service Worker registered successfully."); )).catch(error => ( console.log("Service Worker registration failed:", error); )); ) )

function registerServiceWorker() ( // registers the sw script in supported browsers if ("serviceWorker" in navigator) ( navigator. serviceWorker. register ("sw.js" , ( scope : "/" ) ) . then (() = > ( console. log( "Service Worker registered successfully.") ; ) ) . catch (error => ( console. log( "Service Worker registration failed:", error ) ; } ) ;

The scope parameter determines which requests SW can intercept. This relative path to the domain root. For example, if you set it to /articles, you will be able to manage requests to yourdomain.com/articles/my-post, but not to yourdomain.com/contact.

Offline is the new black

There are a lot of cool things you can do with Service Workers. One of them is the ability to cache content, store it locally and thus make it available when the user is offline. Even if it is online, this will significantly impact page load times as requests can simply bypass the network and access to assets will be instantaneous.
In addition to traditional browser caching, with a service worker installed, you can define a list of resources to cache - so that the user does not need to go to the page to cache. Here's what it might look like:

// sw.js self.addEventListener("install", e => ( e.waitUntil(// after installing the service worker // open a new cache caches.open("my-pwa-cache").then(cache => ( // add all resource URLs that we want to cache return cache.addAll([ "/", "/index.html", "/about.html", "/images/doggo.jpg", "/styles/main. min.css", "/scripts/main.min.js", ]); ))); ));

// sw.js self . addEventListener("install" , e = > ( e. waitUntil( // after installing service worker // open new cache caches. open("my-pwa-cache"). then (cache => ( // add all resource URLs that we want to cache return cache . addAll([ "/" , "/index.html" , "/about.html" , "/images/doggo.jpg" , "/styles/main.min.css" , "/scripts/main.min.js" , ] ) ; } ) ;

🔥 Advice. If you want to quickly get started offline, I highly recommend using sw-precache. This tool was made by the guys from Google, it easily integrates into the process Gulp builds or Grunt to create a service worker file.