PWA or progressive web application. progressive web app) - a hybrid of the site and applications for mobile devices. In this article, you will learn what PWA is and why it is a great thing for business. You can also add progressive web application functionality to your existing site in 5 minutes or create a hybrid site and application from scratch.
- Why should business use progressive web apps
- How to implement PWA functionality on the site
- How to turn a site into PWA in a couple of clicks using ready-made plugins
- A quick and free way to create a PWA functionality site with Gatsby.
- "Many consider PWA to be the technology of the future, and I agree with them": Nikolai Ilichev, programmer at the Texterra website development department
- What's next
What is PWA
This is a technology that adds functionality to the site. In the desktop browser, the progressive web app remains a regular site. And when a visitor opens it in a mobile browser, PWA turns into a hybrid of a site and an application.
Let's see how it works. The user enters the site and gets an offer to add it to the main screen.
If the user accepts the offer, the site icon instantly appears on the screen of the mobile device.
Important point: PWA snuck on the user's device in two clicks. This happened to bypass the Play Store, and also contrary to the ban on installing applications from unknown sources. Antivirus software did not swear.
After installation, PWA creates a site cache. This solves two problems: it increases download speed and makes the site available offline. That is, thanks to PWA technology, the site can be used even without an internet connection.
A very important point: as of the beginning of April 2019, Chrome, including Chrome for mobile, fully supports PWA. Other browsers support some or all.
This means that when implementing PWA functionality, it will work for site visitors who use Chrome. In other browsers, your site will work as usual, but the functionality of a progressive web application will remain inaccessible or partially accessible.
Rapid test results:
- In Firefox, PWA is fully functional.
- In the Samsung Internet PWA browser does not work, the blog is available as a regular site.
- In Opera, the site is available without PWA functionality.
- Microsoft Edge for Android PWA fully works.
Thus, PWA technology is supported in at least 80% of browsers (this is the share of Chrome, Firefox and Edge).
Subtotal: PWA does four cool things:
- Installed on the device in one click without app stores.
- Quickly loaded thanks to a pre-created page cache.
- Works offline thanks to the same cache.
- Sends push notifications to users.
Why should business use progressive web apps
All answers to the question from the subtitle can be found in the previous section. We repeat the main points for consolidation. PWA helps businesses:
- Sneak onto your mobile device user bypassing Google Play and other app stores.
- Make the site available offline. This works even for online stores, but information about executed transactions "flies" into the store when the user has an Internet connection.
- Increase website loading speed on mobile devices.
- Send notifications to users.
Implementing PWA gives measurable results. Here are some examples:
- Thanks to technology, Tinder has reduced page load times from 11.9 seconds to 4.69 seconds. PWA Tinder is 90% easier than their native application.
- PWA Uber weighs almost nothing and loads in 3 seconds even in 2G networks.
- OLX thanks to PWA increased the CTR of ads by 146% and reduced the number of failures by 80%.
Important: the functionality of a progressive web application does not interfere with using the site in the usual way. Equally important: turn the site into PWA faster and cheaper than making a native application.
Using the instructions below, in 5 minutes you will implement the progressive web app functionality on your website. Is free. True, not everyone will be lucky, but only those who choose normal engines for the site. The rest will have to pay for the wrong choice in the literal sense: to hire developers and pay for the introduction of PWA.
How to implement PWA functionality on the site
To implement PWA, an existing site must meet the following requirements:
- Access via https.
- Adaptability or responsiveness.
- Separate URL for each page (important point, if your site is SPA).
Recommendation for beginners: before implementing PWA, make a backup copy of the site. Backup must be done before any changes.
Consider two ways to implement PWA in order from simple to complex.
How to turn a site into PWA in a couple of clicks using ready-made plugins
The owners of popular CMS are lucky: they can turn the site into a progressive application with the help of plug-ins.
As of the end of 2018, WordPress has one-third of the total number of sites or almost two-thirds of sites on the CMS. Therefore, the instruction is written on the example of this engine. After it will be useful information for those who work with other CMS.
Install the free PWA for WP plugin on the site. I tested several modules from the official WordPress directory and settled on this solution. The results of his work can be seen at the beginning of the article. If you want, try other plugins.
Specify general settings. Select the icon for the desktop (App Icon) and the icon preloader (App Splash Screen Icon). In the settings you can choose the orientation of the application (portrait or landscape), but this function does not work. The application is displayed in the "portrait" mode, regardless of the settings.
To send push notifications to users, register the project on Firebase, get the API key and enter it on the Push notifications tab.
In advanced settings, enable offline tracking using Google Analytics. Optionally, enable PWA notification support on desktop screens.
In the cache settings, select auto cache creation. Specify the number of posts to be cached. The maximum value is 50.
Save the changes and open the site on your mobile device in the Chrome browser. PWA is already working, you saw the results of the implementation at the beginning of the article.
What if the site does not work on WordPress? Catch the solution:
- Joomla !: PWA from WebKul ($ 59).
- Drupal: Progressive Web App (works with Drupal 7, the Drupal 8 version is in development).
- OpenCart: OpenCart PWA ($ 99).
- Magento: PWA Studio (need developer assistance).
- CS-Cart: CS-Cart PWA ($ 99).
- Prestashop: PWA and push notifications and Advance PWA (90 and 150 euros respectively).
- WooCommerce: PWACommerce.
I did not find ready solutions for other engines, but you can search by yourself.
Subtotal: WordPress has free modules for implementing PWA, including WooCommerce and Drupal. For modules for Joomla !, OpenCart, CS-Cart and Prestashop you have to pay. To implement a progressive web application on other engines, developers will have to pay.
If you do not have a website yet or you want to test a progressive web application before deploying it on the main website, proceed to the next step.
A quick and free way to create a PWA functionality site with Gatsby.
But you can create a small business card, portfolio or blog on Gatsby without technical knowledge. To do this, use the library of ready-made assemblies for beginners. Consider the creation of PWA on the example of a minimal assembly for the blog from the creator of Gatsby Kyle Matthews.
Install Node.js on your computer. This is needed to run a local server on your computer, which is necessary for working with Gatsby. Both LTS and Current Node.js will do. After installation, open a command prompt and enter two commands: node --version and npm --version. To run a command prompt in Windows, type "cmd" in the taskbar search.
If everything is done correctly, you will see something like this (versions may differ):
Install git. This version control system, it is necessary to work with Gatsby. After installation, create an account. To do this, enter your data in the command line:
- git config --global user.name "Vasya Pupkin".
- git config --global user.email "[email protected]".
Install Gatsby CLI using the npm install -g gatsby-cli command.
Now you can install the assembly Gatsby. At the command prompt, select drive D or another non-system drive on the PC. To do this, enter the command D :.
Gatsby does not work if there are Cyrillic characters in the folder name or in the file path.
Install the Gatsby assembly using the gatsby new my-blog-starter //github.com/gatsbyjs/gatsby-starter-blog command. In this case, my-blog-starter is the name of the site. You can replace it with any other.
After installation is complete, navigate to the project folder using the cd my-blog-starter command. Start PWA on a local server using the gatsby develop command. If everything is done correctly, the local version of the site will become available at // localhost: 8000.
Running Gatsby on a local server is shown in the illustration below; the process takes less than a minute.
Edit PWA and create posts will be in the project folder.
To change your blog settings, open gatsby-config.js in Notepad or another text editor. Specify appropriate metadata: blog name, author name, description. As a URL, specify something like //basil-pupkin.surhe.sh, only instead of "basil-pupkin" write the desired option. Please note you need to specify the https connection protocol. A little later, we will publish a website for free on Surge hosting.
Save the changes to the file. After that, the local server will update the future of PWA.
Replace the avatar in the Content - Assets folder. Name the file with your photo in the same way as the default avatar is called. To edit the information about the author, open the bio.js file in the Src - Components folder. Specify the data and save the changes.
We will create publications in the Content - Blog folder. Enter this directory and examine the contents. Each post of the test assembly lies in a separate folder. The folder name forms the URL of the post. Inside the folder is a text file index.md and optionally photos.
To post a new post, proceed as follows:
- Create a folder with a suitable name.
- Inside the folder, create the file index.md.
- Open the file in a text editor.
Posts need to be created using Markdown. This is a very simple markup language that is easy to understand on your own. The illustration shows what the post looks like.
Save the changes. Gatsby will update the blog and post it.
Delete all folders except yours from the Blog directory. The site will only your publication. I do not do this to further demonstrate the work of PWA.
Now move the blog from the local server to the Internet. Let's deploy PWA on conditionally free hosting of static sites of Surge, but if you wish, you can use other platforms, for example, GitHub Pages, Netlify, and so on.
Enter the surge public / command.
The system will suggest a random domain name.
Manually replace this name with the desired one.
Press Enter and wait for the site publishing message.
Check the availability of the site in the browser. Please note that the resource is available via the http and https protocols. Redirect can be customized if you buy a paid Surge account. To look at the work of PWA, use a secure connection, since progressive web applications only work fully through https.
Check out PWA work. Open a blog on your mobile device in the Chrome browser. After a few seconds, you will be prompted to install the application.
Add an application, wait a few minutes and turn off the Internet. Run the application.
Check if internal pages are available when not connected.
Please note that on some devices when you first start PWA requires an internet connection.
To publish a new post, repeat the steps outlined: run the blog on a local server, create a post in the project folder, make sure that you are happy with the content and appearance, generate static files and republish the blog on Surge.
Subtotal: We considered two ways to implement PWA. This is the introduction of PWA functionality to an existing site using ready-made plug-ins or creating PWA from scratch using the Gatsby static site generator. Of course, there is a third way: you can always contact professional developers and ask them to implement a progressive web application.
"Many consider PWA to be the technology of the future, and I agree with them": Nikolai Ilichev, programmer at the Texterra website development department
Programmer "Texterra" Nikolai Ilichev shared with readers his opinion on progressive web applications.
Dmitry Dementiy: Good afternoon, Nikolai. How important is it to use PWA? Do business owners need to add progressive applications functionality to corporate websites or online shopping sites?
Nikolay Ilyichev: Greetings to the readers! More than relevant. Usability, increasing the speed of obtaining information from the site, and this is one of the most important indicators of resource quality, the ability to work with the application offline, push-notifications and much more - all this has a positive effect on attendance and conversion, while reducing the percentage of failures. Which, by the way, is growing in proportion to the increase in page load time.
Technology is evolving, which means that opportunities will only grow. About whether you need to implement or not - it all depends on the goals that the business sets itself. If the goals converge with the advantages that PWA gives, the game is worth the candle.
DD: One of the PWA chips is the ability to use the site offline. That is, even if the user does not have an Internet connection, he can use cached pages. This is true for content projects, blogs, media. Will users have problems due to caching? PWA in the background loads something when accessing the Internet, how critical is it?
N.I .: Whether there are problems or not depends on the developer who sets the rules for loading and caching data. If there is a lot of video on the site, and all this video is downloaded - in the end, the space allocated for the cache will simply end. It is usually counted as a percentage of free device memory. Ideally, the user will receive some benefits - all the same download speed and the ability to work without the Internet. As soon as the Internet appears on the client device, PWA starts updating the cache. This is to ensure that the device always has the current version of the site. So it is not critical for owners of mobile devices.
DD: You can implement PWA functionality on the site in a couple of clicks without technical knowledge. Why do you think PWA is not very widely used yet?
N.I .: The technology is quite new - that's the whole reason. Google announced it in 2015, and more or less normal browser support appeared even later. Many have not even heard about this technology, and who have heard, do not understand what advantages it has. Although it is worth noting that the situation is constantly improving. Many large companies are already using this technology. And there are more and more developers capable of implementing this functionality. Many people believe that this technology has a future, and I agree with them.
DD: To implement PWA, a site must initially have a number of characteristics: adaptability, high download speed, and availability over a secure connection protocol. Does this mean that the implementation of PWA will make the site owner "pull tails" and improve the site?
N.I .: And there is. But, of course, it is desirable that these tails be tightened by default, or do not arise at all. Adaptability is nowhere without it, most of the time we are looking for something on the Internet via a smartphone, and a website without adaptive design simply will not survive: the user simply cannot use it. Download speed - one of the most important indicators of the site, which affects the position in the search results. It seems to me that it is worth using PWA not to close tails, but to increase the overall performance of the site and its usability.
JJ: Do you think that the fact that this format is actively promoting Google will influence the popularity of PWA?
N.I .: I think yes. Google is widely known, and the technologies it promotes usually become quite popular. This company has impressive resources that enable it to continuously improve technologies that it considers promising.
PWA is a promising technology that expands the possibilities of interaction with mobile users. From the article you learned how to turn an existing site into PWA, if it works on a popular engine. The introduction of progressive application features at least does not hurt the site. Попробуйте сделать PWA с помощью Gatsby. Благодаря инструкции из статьи вы быстро сделаете современный блог, портфолио или сайт-визитку с функциональностью PWA. Если захотите реализовать прогрессивное приложение в интернет-магазине или на корпоративном сайте, обратитесь к профессиональным разработчикам.
Если во время работы с PWA на WordPRess или Gatsby будут вопросы, пишите в комментариях, будем разбираться.