The title is misleading, in fact this guide is suitable for all websites and CMS. I wrote “WordPress” because I still had some free characters in the title tag (professional deformation) and because WP is the most popular CMS anyway. So fear not, whatever your CMS is you won’t waste time reading this guide to create your first Progressive Web App.
Index:
- What are PWAs
- Advantages of PWAs
- How to create a PWA – requirements and code
- Requirements
- PWA Manifest.json
- PWA Service Worker
- How to test your PWA
- Sample video
- Slide Inbound Strategies 2018
- Next step?
- Where to study
- Conclusions
Those who surf this mobile site with minimal consistency will have noticed that this notification appears from November 2016:
Progressive Web App example: Add to homescreen
The “add” button installs the website on your smartphone, as if it were a real app . This app can be removed like any other app, through the phone’s application management menu.
Manage the app installed on the phone
What are PWAs
PWAs – Progressive Web Apps are websites that can be installed on your smartphone in a similar way to native Android apps. In other words, this technology allows you to install a site or part of it on the phone in order to be used with particular advantages in terms of usability, which we will see in this guide, and potentially even offline.
One of the objections I hear most often when it comes to PWAs is:
Why should I install an app on my phone that is nothing other than browsing the site with the classic browser?
Because, unlike what it may seem, something actually changes. There are in fact several advantages in making your site a Progressive Web App .
Trivago these days is communicating the usability data of the site after creating their PWA : it goes without saying that they are enthusiastic.
Advantages of PWAs
- Indexable:PWAs are indexable by Google and therefore can rank and receive organic traffic.
- Quick access:the app icon will be inserted into the phone together with the other apps, just a tap to start the site.
- Near Instant Browsing:PWAs can use an in-phone cache system to dramatically speed up browsing.
- Offline browsing:by caching images, CSS and JS files, the pages will be navigable even offline.
- Maximum usability and user experience:Progressive Web Apps can be set to be displayed in full screen, without the typical address bar on browsers, all to the advantage of the usability and usability of the website.
- Tracking and engagement:all pageviews from installed apps are traceable in Google Analytics (spoiler: the engagement of this channel is very good !).
- Personalization:You can customize the color of the address bar if you decide not to hide it. Also, once installed, the app will launch with a customizable splash screen with logo and background color.
- Independence from native apps:PWA can coexist seamlessly with the native app.
Indexable
A simple PWA like the one I present to you in this guide is nothing more than a website, and as such it can be crawled by search engines, it can position and obtain organic traffic, PPC, direct, referral, …
Indexing a native app, on the other hand, is quite another thing .
Quick access
Compared to opening the phone browser and typing the URL or looking for it in your favorites, it is certainly quicker to tap on the phone home or in the app drawer and start the site.
Think about this, how many times does a person look at their phone in a day? How many times have you started scrolling through apps even if you didn’t have anything special to do? Seeing your site icon often helps the user remember to visit it, it’s like making a free impression on your readers’ phones every time you open the app drawer.
Your site among other apps
Almost instant navigation
The moment you press the add button , the PWA creates an APK package and installs it on your phone. In this package it is possible to insert files for the local cache: HTML pages, CSS and JS files, images and everything needed to render a web page to be used offline.
When you launch the app on your phone, the files you already have cached will not be downloaded from the network. Yes, you got it right, if you cache critical files, the page loading will be practically instant with enormous advantages on the user experience .
Twitter has also developed its own PWA : Twitter Lite. To try it, just go to the Twitter site with your smartphone, if the installation button does not appear, use the menu at the top and press “Add to home screen”. At this point you will have an app in your smartphone that will allow you to browse Twitter with the facilities of PWAs.
The implementation of this technology led to Twitter:
- 65% increase in pages per session.
- 75% increase in Tweets sent.
- 20% reduction in the bounce rate.
- 70% reduction in bandwidth used in normal navigation. Also to consider is the saving on the download of the app which weighs 23.5 MB against the installation of the PWA which weighs only 600 K.
Offline browsing
Continuing what was said in the previous paragraph, we come to the conclusion that by caching the most important pages of the site and their dependencies (CSS, JS and images), those pages will be navigable even without a network, offline. Fantastic.
Maximum usability and user experience
In all mobile browsers, the address bar appears at the top. A Progressive Web App, on the other hand, can be set not to show the bar and therefore occupy a larger visual space, full-screen, more beautiful to see and more comfortable to use.
The Weather Channel implemented PWA technology in 62 languages and 178 countries in 2016. The result was an 80% improvement in page load times.
Tracking and engagement
In PWAs, the start URL must be set, which is the page that will be opened when the Progressive Web App is launched. Just add the UTM parameter/?utm_source=homescreento track all traffic with Google Analytics. You will find that readers who use the app are among the best in terms of navigation KPIs: below average bounce rates, above average pageviews and longer than average dwell time.
Lancôme in 2017 had to decide how to approach the mobile market and the first idea was to create an eCommerce app to sell its products. However, using common sense, they understood that such an app only makes sense for regular users, who often use the service. The casual user does not install an app to make a purchase. What then better than a PWA to be less invasive?
Lancôme therefore decided to transform its mobile website into a PWA and recorded an 84% performance increase (shorter loading times), a 17% increase in conversions and an 8% increase in abandoned carts thanks to to push notifications .
Personalization
As you will see in a few lines it is possible to customize the background color of the address bar and improve the visual feeling of the website seen on the smartphone.
Independence from native apps
A few lines above I linked the case history of Alibaba’s PWA, the famous Chinese eCommerce. An interesting thing being said is that Alibaba staff was interested in evaluating the different levels of interaction with the site that native app users and mobile browser users have. In fact, not all users willingly install apps on the phone, if particular permissions are then requested, the installation rate could be affected. In order not to lose users, however, Alibaba has chosen to add a PWA to the native app. The results, as you have read, have been very positive.
Now that I’ve listed all these benefits, are you still undecided whether to create your first PWA? I honestly haven’t thought twice about it. In case you want more information I recommend this video Why Build Progressive Web Apps? published in April 2017 on the YouTube channel of Google Chrome Developers .
To create your Progressive Web App continue reading this guide.
How to create a PWA – requirements and code
The process to create a Progressive Web App is quite trivial , to proceed you just need to have the HTTPS protocol and create two files to upload to your site: the Manifest file – manifest.json , and the Service Worker – sw.js.
Requirements
Since there are many mandatory and suggested requirements, I preferred to create a separate guide – Checklist for Progressive Web App .
Create the Manifest.json file
Create the file with a text editormanifest.jsonand compile it following the logic in the example:
In this JSON file you will find the following fields to customize:
- short_name:Enter the short name of your app
- name:enter the full name of your website
- icons:enter the reference to at least one icon. When saving a PWA on the home screen, Chrome first looks for icons that match the display density and have a density of 48dp. If no matching icon is found, Chrome searches for the icon that best fits the characteristics of the device. In minejsonI have inserted the icon with 5 different resolutions: 48 × 48, 96 × 96, 144 × 144, 192 × 192 and 512 × 512.
- start_url:Enter the URL that will be loaded when the app is launched. This is where you need to use the UTM parameter if you want to track visits with Google Analytics.
- display:enter standalone , fullscreen or browser to change the space occupied by the app. In detail – fullscreen : all available display area is used and no Chrome element is displayed.
standalone : the application will appear as a standalone application. This can include the application with a different window, its icon in the application launch, etc. In this mode, the navigation control user interface is hidden, but can include other user interface elements such as a status bar. minimal-ui– The application will appear as a standalone application, but will have a minimal set of UI elements for navigation control. Items vary by browser. Browser : The application opens in a conventional browser tab or in a new window, depending on the browser and platform. This is the default. - lang:enter the language used on your site. Examples: “en-US”, or “it-IT”.
- background_color:set the background color of your app’s splash screen . The splash screen shows the icon in the middle of the screen while all the necessary assets are loaded.
- theme_color:This value sets the color of the address bar if the display field is set to browser .
- orientation:set the orientation of your app to vertical or horizontal.
When you have finished editing your file,manifest.jsonupload it to the root of the web server . Now you just have to insert the reference to your file in themanifest.jsonHTML head of all the pages of the website:
<link rel=”manifest” href=”/manifest.json”>
To test the file,manifest.jsonclean your browser and open a page on your site. Start the Chrome Dev Tools and navigate to the Application tab and then click on Manifest in the left menu . Check that the Add to homescreen link and the various icons you have entered
appear on the right .
How to test the manifest.json file
For more information on the filemanifest.jsonI suggest you read:
- The Web App Manifest
- Installable Web Apps with the Web App Manifest in Chrome for Android
- Manifest File Format
Create the Service Worker – sw.js file
Now you need to create the ultimate dependency for your Progressive Web App: the Service Worker .
A Service Worker is a script that the browser runs in the background, separate from a web page, opening the door to functionality that does not require a web page or user interaction. Today they already include features like push notifications and background synchronization . In the future, service workers may support other aspects such as periodic synchronization or geofencing . The main feature is the ability to intercept and manage network requests, including programmatic management of a response cache.
The reason this API is so interesting is that it allows you to support offline experiences, giving developers complete control of the experience.
This is where the magic of offline browsing happens.
Create the file with a text editorsw.jsand copy the contents of the example. The only lines you need to change go from line 13 to line 20 where all the files to be cached are listed (you can add more or remove them if you prefer).
In my example I entered:
- two homepages, with and without parameters
- the CSS file
- the logo of the site
- some fonts I use on the site
Obviously you can indulge yourself by inserting what you think is most appropriate and then do the necessary tests. All the files you enter in this list will be used by the app for both online and offline browsing. This means that inserting all critical files drastically relieves the need for browser downloads and the page will load very quickly .
Warning: if even a single file of those listed in the cache list is not reachable (error 404), the PWA installation will fail and no file will be installed on the phone. I leave you two tips that I have learned with experience:
- The more complex the PWA, the more difficult it is to debug.
- Don’t overdo the cached files, you could make the app maintenance process too complex.
- Since if the installation fails you (developer) may not know, test your app with the Dev Console or Lighthouse at least once a month, or at least after making major changes to the website.
Upload the filesw.jsto the web server root. Now you just have to insert the reference to this file in the HTML head of all the pages:
This script calls the filesw.jswith the command on your web pagesnavigator.serviceWorker.registeronly if your browser supports this function. It then prints the confirmation or error message for loading the Service Worker with the console.log () command in the browser console .
To test the Service Worker clean your browser, open your website and show the Chrome Dev Tools . Navigate to the Application tab and then in the left menu click Service Worker .
How to test the Service Worker
Check that the service is installed and active (green dot). Any errors are shown in the Console.
To test the cache, clean your browser and browse your site. Show the Chrome Dev Tools and select the Application tab and then in the left menu click on Cache Storage and finally on your URL. If you have done everything correctly, in the right pane you should see the list with all the files that you have cached in the Service Worker.
Check the locally cached files
For more information on the filesw.jsI suggest you read:
- Service Workers: an Introduction
- Introduction to Service Worker
- Adding a Service Worker and Offline into your Web App
- Progressive Web Apps
How to test your PWA
Before testing the Progressive Web App, clear your browser cache (do not use incognito browsing). Now browse the website via smartphone and see if the notification comes out to add to home.
A small tool has recently been released, an extension for Chrome, to test PWAs : it’s called Lighthouse, I suggest you take a look at it.
PWA test with Lighthouse
For more information on the Lighthouse I suggest you read:
- Lighthouse
- Lighthouse PWA Analysis Tool
- Lab: Auditing with Lighthouse
Sample video
Watch this video to see how a PWA works in practice.
Slide of my speech on PWAs at Inbound Strategies 2018 in Milan
On 9 March 2018 I was a speaker at the Inbound Strategies 2018 event . My speech presented the characteristics of the Progressive Web App, you will find the slides below.
Next step?
Reading the documentation I discovered an alternative use that could be done with the cache. This paragraph explains how to create a Save for Later button to be inserted on the site that the user can use while browsing to store the page in the app cache and use it later offline. It seems to me a very convenient function in certain situations.
- PWAs are constantly updated, soon push notifications could be enabled by default when installing the app –
link
Where to study
If you have read this far it means that you are a tough NERD 🙂 Here are some good resources on PWAs on which you can study, learn more and see practical examples.
- Web App Install Banners
- The Web App Manifest
- Your First Progressive Web App
- Introduction to Service Worker
- Adding a Service Worker and Offline into your Web App
- Web App Manifest
- Progressive Web Apps with Service Workers
Conclusions
Making a PWA also implies, as you will have understood, having a quick site to meet the usability needs of mobile users. So, one way or another, you’ll have to work hard to optimize loading times by getting them below a certain threshold. At this point you should have everything: clear ideas, basic concepts and the necessary files. Still, if you have any doubts you can consult with any leading web app development company which definitely helps you out.
