What is PWA (Progressive Web Apps)? About the functions of PWA and the benefits of introducing it
What is PWA
PWA is an abbreviation for “Progressive Web Apps” and is a mechanism that enables mobile websites to be used like smartphone apps.
PWA is not a special technology in itself. A website that has elements defined by Google such as responsive design and HTTPS, and that uses a browser API (Service Worker, etc.) to support offline and push notifications is called PWA.
By implementing PWA, it is possible to give the website the characteristic functions of the app, such as push notifications and adding icons to the home screen . This is attracting attention as it will lead to improved UX and improved user engagement.
Functions of PWA
PWA has both an app-like aspect and a website-like aspect. The characteristic functions are as follows.
Can be installed on the user’s terminal
Icons can be placed on the home screen of mobile devices, so users can browse websites simply by touching the icon .
A similar function is the existing function of “adding a shortcut icon for a web page to the home screen of a mobile device”, but unlike the case where a shortcut is simply installed on the home screen, PWA has push notifications and cache, which will be introduced later. It has functions such as the use of. Apparently, websites launched from the PWA icon can be displayed in full screen without a URL bar, and you can also set a splash screen at startup.
Being able to install a PWA-enabled site instead of installing a native app is beneficial for both publishers and site users.
[Advantages on the site operator side]
-Since it does not go through the app site, there is no need to review the app site.
In the case of native apps, it will take some time before the app can be distributed because a review is required when registering the app on Google Play or the App Store. Since PWA does not go through the store, icons can be installed as soon as a site that implements PWA is released .
・ No need for individual support for each OS
Since the implementation of native apps depends on the OS, it is necessary to prepare each app depending on whether the device to be installed is Android or iOS. On the other hand, PWA-compatible sites are websites and do not depend on the OS . There is no need for individual support for Android or iOS.
[Advantages on the site user side]
-Compared to a normal application that does not consume communication volume and data capacity
, PWA downloads less data volume and requires less communication volume and data capacity .
Use of cache
If you use the service worker function in PWA, you can use the cache. This has the following benefits:
-Higher page display speed The
cache allows the page to be read first, which speeds up the page display speed and makes it easier for the user to navigate the page.
-Offline support Since
the page is displayed using the cache even if you are not connected to the Internet, you can browse the site even when you are offline . You can also send the data entered while you were offline when you are online.
The service worker function enables push notifications that were not possible with traditional websites. You will be able to make positive notifications and calls from the website as well as the app .
Reference: Introducing Service Workers | Web | Google Developer
You can access from the search results and URL in the same way as a normal site.
App-like functions are often taken up, but since it is originally a website, you can access it in the same way as a normal website. When sharing a page with an acquaintance, unlike the app, you can share the page by sending the URL, and you can also find a PWA compatible site from a search engine.
Benefits of introducing PWA to your site
Although PWA has these functions, the advantages obtained by implementing it can be summarized in the following two points.
Improvement of user engagement
Users can access the site more easily because the icon for the site can be placed on the home screen of the user’s mobile device .
Also, by using push notifications, the site side can actively approach users who have not visited for a certain period of time and notify campaigns.
Through these efforts, it is possible to increase user engagement with the site.
Improvement of user experience
PWA will dramatically increase the site loading speed, and you will be able to use the site even offline . Since users’ browsing is not hindered by factors such as data size and Internet environment, users will be able to use the site more comfortably.
A comfortable user experience is an important factor on a website, as it is said that sales decrease by 1% for every 0.1 second delay. Improving the user experience is likely to indirectly improve user metrics on the site.
Reference: [Blog Article] Importance of Mobile Site Display Speed and How to Speed Up – Google Ads Help
Case study (limited to services that are familiar in Japan)
Even in Japan, there are some sites that have achieved results by introducing PWA. Why don’t you visit and experience PWA?
SNS “Twitter”, which is familiar in Japan, also supports PWA. It has over 300 million active users (/ month), 80% of whom are mobile users.
・ Tweets increased by 75%
・ Withdrawal rate decreased by 20%
The Nikkei Electronic Edition, which distributes 900 articles every month and is viewed by 3 million people including free members, introduced PWA for the purpose of improving page speed.
-Performance is doubled compared to mobile-
Speed Index and Start Render are reduced to one-third compared to the PC version
Japan’s major property search sites also support PWA. A site where 40 million people search for properties every month, many of them mobile users.
-Push notification open rate is 31%
Precautions for PWA
I can’t contact new users via the app store
PWAs are basically installed directly by users who visit your website. There is no such thing as “accidentally finding it in the app store” like a native app. If you operate a website and a native app, you will have the opportunity to acquire new users from both the web and the app store, but if you do not have a native app and implement PWA on your website, you will have new users in the app store, etc. You don’t get the chance to win.
Of course, it is possible to introduce PWA while operating the native application, but in that case, the cost for maintaining and operating both the native application and PWA will be doubled. It is necessary to consider the balance with the native application.
Some functions are restricted on iOS
iOS started supporting service workers from iOS 11.3, but some features are limited compared to Android.[Examples of restricted functions] (As of March 2018)
-Offline data capacity is limited
-Push notifications and banners prompting PWA installation cannot be used
Reference: What can be done with PWA support from iOS 11.3
PWA, which is a web page but has application-like functions, is expanding the possibilities of websites, such as being able to approach users and improve the user experience.
Previously, PWA was not compatible with iOS and did not spread easily in Japan, but with Safari 11.1 supporting Service-Worker, it is expected that implementation will progress on various sites in the future.
* Please see here for detailed mounting method