A Progressive Web App (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. PWAs are intended to work on any platform that uses a standards-compliant browser. Unlike traditional applications, PWAs are deployed to servers, accessible through URLs, and indexed by search engines. Additionally, they can take advantage of native device features, such as push notifications, device hardware, and offline capabilities.
The trend in PWAs has been towards creating experiences that are more like native apps, utilizing features such as hardware access and native UI elements. Mobile app developers are now starting to embrace PWAs as an alternative to traditional apps, offering users features like offline support and faster performance without having to build multiple versions for different platforms. Companies like Twitter have started using Progressive Web Apps for their mobile sites, providing users with a better experience than the traditional web version.
This is an environment that sounds quite promising for the newest kid on the block – Progressive Web Apps or PWAs. Progressive Web Apps are often described as the web…but better!
In this blog, we would be talking about progressive web apps, their constituent characteristics, the technology & architecture behind them, the importance & benefits of progressive web apps, the disadvantages of PWAs, the challenges of building PWAs on your own, and the tools needed to build PWAs.
A Progressive Web App is a web app that makes use of modern web capabilities in order to offer an app-like experience to the users. These apps have certain constituent characteristics that define them, are deployed to servers, are accessible through URLs, and are even indexed by search engines!
Progressive Web Apps are web applications that are essentially normal web pages or websites, but to the user, they appear quite like the native mobile applications. The result is a fabulous combination of the top features of a modern browser and the benefits & delights of a mobile experience.
The Progressive Web Apps work for everyone. The PWAs work irrespective of the user’s choice of browser. This is because the PWAs are built with Progressive Enhancement as a core tenet.
The Progressive Web Apps are built in a manner that they would fit any form factor, whether it is a desktop, a smartphone or mobile phone, tablet, or the forms that are yet to come to existence.
Progressive Web Apps have the capability to work even when the device is not connected or is offline or is in a low connectivity zone.
To a user, the Progressive Web Apps feel like any other native mobile app particularly with its app-style interactions and navigation.
The Service Worker update process in the Progressive Web Apps make sure that the app is always up to date.
The Progressive Web Apps are served through HTTPS which makes sure that you are protected from snooping and that the content is not tampered with.
The W3C manifests make the Progressive Web Apps identifiable as “applications” and the service worker registration scope allows the search engines to find them, thus making them ‘discoverable’.
Unlike other web apps, the Progressive Web Apps make it easy to re-engage using features like push notifications.
Users can easily keep the most useful apps or their favorites on their phone screens without having to go through the hassle of an app store
The Progressive Web Apps can be easily shared by way of a URL, and you do not have to go through a complex installation of any kind.
It would be apt to say that the Progressive Web Apps are an enhancement on the existing web technology. Ideally, they do not need any special bundling or distribution, in fact publishing a progressive web app would be exactly the same as any other web page. Delving a little deeper, we may list out the technical baseline criteria for a site to be considered a Progressive Web App as under:
If you have ever been in the business of app development or have ever even owned one, you must be aware of the importance of regular maintenance for the success of the mobile app you are building. You would have to take care of certain things like implementing a continuous integration system so that you can limit the errors and streamline the maintenance and then there is the matter of the expenses.
However, in case of Progressive Web App you would not have to worry about the costs, high as they may be. Maintain Progressive Web Apps is super easy! It’s because they update automatically!
The commonly used technologies used to create Progressive Web Apps are listed hereunder:
The web app manifest is a W3C specification defining a JSON-based manifest to provide to the developers a centralized place to put metadata associated with a web application including:
The developers fix and manipulate the metadata for the web manifest file, in order to enable the user agents to build seamless native-like mobile experiences through the progressive web app.
The Service Worker Application Programming Interface (API) forms the core of any Progressive Web App. Service Worker is the proxy which sits between the client that is the browser and the server. This particular API is event driven and has the ability to handle a great number of separate processes that need to be run simultaneously or in succession. Additionally the API also keeps detailed cache resources.
All the resource requests and the navigation gets intercepted and modified by the service worker API which means that the page and the website is monitored in the form of a JS file. This also means that you have complete control over the behavior of the application because the app operates independent of the main JS. As there is no access to the Document Object Model or DOM, block issues are taken care of. Also, as the service worker API operates on the HTTPS, it is completely safe & secure.
The fun part is that you would not have to use localStorage, XHR, or any other synchronous APIs, simply because the service worker is asynchronous.
After the service worker has been registered, and if the browser supports it, the service worker file would run in ServiceWorkerGlobalScope. This is an independent execution thread that doesn’t have access to DOM, and doesn’t even interfere with the JS main thread.
The lifecycle of a typical service worker goes as follows:
This event, stage, or phase is mainly used to cache static resources including JS, CSS, images, etc.
This event is mainly used for cache management
As the name suggests, the API stays idle in this event
This is where all the network requests on subsequent page load are handled
To save memory, the processes are terminated, when not in use
Some of the progressive web apps make use of App Shell Model and adopt it as their architectural approach. What happens here is that the service workers store the Basic User Interface or ‘shell’ of the responsive web design web application to ensure rapid loading. It is this ‘shell’ that offers an initial static frame, layout, or a sort of architecture wherein the content may be loaded progressively as well as dynamically. It is because of this that the users can easily engage with the app irrespective of the level of connectivity being offered at that time and space. From a technical stand point, the shell is a code bundle stored locally in the browser cache of the mobile device.
The challenges of developing your own progressive web app are real and numerous. However, if you do decide to go that way, there is a list of tools that you must be aware of, before you get deep into it.
These days it is not a big deal to apply a mobile-responsive theme and use tools like Google’s Mobile-Friendly Test to get suitable commendations on ways to optimize your site. However, when you are ready to take it all a notch up, you need to get started on developing a progressive web app for business. This can help you develop a Progressive Web App to deliver fresh and enjoyable new experiences to the mobile users who use your progressive web app.
When you are looking forward to building your own progressive web app and decide to take a look at PWA.rocks, it is important that you develop a more reflective understanding of what this tool can actually do for you! When you go their website, you would be able to see different work that has been done, classified into a number of categories including business, demo, game, news, and more!
Having their work displayed on their website gives you a clear idea of what is it that you are going to get at the end of it all. You can even go through all these apps on the page to get inspired and motivated for your illustrations, functionality, navigation and other such things that might appeal to you. This, in fact has proven to be a fertile ground to find inspiration for both, the developers and the entrepreneurs. The rich rows of resource here on the website help you build up a picture of your future product and lets you gain a measure of clarity, so that you can communicate better with the developers and let them know what it is that you are looking for in your progressive web app.
If you are looking for one of the fastest tools or methods to get your progressive web app developed, this might be something that you should take a look at and explore. PWABuilder rapidly assembles an administration specialist for offline usefulness. This is made possible by pulling and serving the “offline.html” from your web server at whichever point the client may have lost internet connectivity or web availability.
One of the easiest ways to build your progressive web app with PWABuilder is to enter the URL for your website and fill in all the additional details like your name, site description, and the icon of your choice. PWABuilder also offers you the freedom and option to change certain properties like the orientation of the screen of your progressive web app, the language you would be using on it, and the color of the background. This when the platform takes all this information and on the basis of it, automatically generates a manifest.
This can prove to be one of the greatest instrument that has the ability to be used in combination with a ready-made web solution. The progressive web app you build with PWABuilder would be ready in minutes and goes a long way to improve the mobile experience of all your web visitors.
Knockout is one of the most effective tools when you are looking to build a lightweight progressive web app. When used with JavaScript, Knockout is great for managing Model-View-ViewModel (MVVM) bindings. Some of the greatest advantages of having a tool like Knockout in your library are as follows:
Some of the most serious developers have credited Knockout with the reputation of an awesome framework, almost an obvious choice for smaller projects where time is of the essence and the project needs to be completed in an expedited manner.
Knockout can be used to extend HTML, making it one of the easier tools to learn and grasp, and it doesn’t even need JSX. Additionally, it allows for templating. Templating makes it really easy for anyone to build some of the more complex apps because it brings down the duplication of DOM elements. This is one of those tools that even the junior developers would pick up quite easily. The tool also comes fortified with attributes that might otherwise need to be written in competing frameworks.
Though a progressive web app may not accurately be classified as a DIY venture for independent bloggers or other professionals of the kind, but the possibility of that happening is on the horizon with the right kind of resources. You might have some level of involvement with content management systems but that does not guarantee a deep knowledge about creating web applications. In such situations Google Developers comes in real handy as it can help you offer a rich resource library to pick your unique nuts and bolts for an innovative progressive web app. This resourceful library of assets can lend you the ability to actually figure out how to code your own progressive web app.
The instructional exercise for Google Developers has a much wider scope and covers the breadth and depth of the subject including exercises on how the progressive web apps function, ways to make a progressive web app, and ways to make enough adjustments so that they run effectively. In addition to this, Google Developers also covers some of the more imperative bases like empowering the “add to home screen pennant” and leveraging HTTPS.
For aspiring students who are on their first step to learn web development, JavaScript is the chosen introductory language due to its ease of use and wide scope. For the more seasoned developers who have had their fair share of experience with Java or .NET, AngularJS can prove to be one of the best JavaScript frameworks that can be used for web applications. What’s even more interesting is that their website has a whole lot of resource materials including guides, tutorials, and other instructional material that can help you familiarize yourself with the platform and use it to its maximum potential.
If you are using their latest version Angular v4.0, then you would notice that the experience of developing for the mobile and for the desktop is comparable! For those of you who, at any point figure AngularJS to be a little too complicated for you to handle, you can always opt for React or Polymer.
When you start building a progressive web app, the first step to get started is to choose the core framework. Though there are a number of frameworks, React has its own set of benefits. The biggest advantage here is that it is managed and supported by Facebook and Facebook uses this framework on its sites which means that the framework is rigorously tested with 1.18 billion users on a daily basis. Also, React forms the foundation for React Native which further helps you port apps built with React to native mobile apps.The things with React JS is that it has a component centered approach to web app development where each of the component is built using JavaScript and can be reused. The User Interface too consists of components. These components can render in the browser, on the server, using Node.js, and inside apps with the help of React Native. This means that all the challenges of managing apps that need to be delivered to multiple operating systems, different browsers, and a number of different devices.
The time required to setup a progressive web app is brought down considerably when you use Polymer as a template. This is an open source project from Google is updated frequently to be kept in sync with the open source projects the template makes use of. In order to optimize the delivery of the app to the device the Polymer templates make use of the PRPL pattern. You can use it to push critical resources for the preliminary direction, render the preliminary route, pre-cache the residual routes, and to lazy-load and create the residual routes on demand. It can help you build prototypes faster and enables them to get started on the important work and swiftly bypass custom setup.
There might be a time when you might want to consider getting into custom app development which is when Webpack comes in real handy. Webpack is essentially a module bundler for JavaScript applications. It actually helps make the process of drafting dependency graphs a lot more convenient. What a dependency graph does is that it removes the need for managed dependencies. This means that there no longer is any need to link the numerous JS files at the bottom of an HTML web page. So when you move to CommonJS or ES6 modules, you drastically bring down the number of calls to and from the server, thus making the app a lot faster. Webpack might have a harsh learning curve, and the documentation code too might not be as great as you would like it to be, but it is vital when it comes to complex progressive web apps that are front-end driven.
Lighthouse is Google’s progressive web app performance monitoring tool that can be easily installed as a plugin for Chrome. The report generated with this tool is pretty detailed. The first section of the report titled “Progressive Web App” comes up with the following analytics:
These are then further broken down into specific technologies and recommendations that can be added or updated in order to improve the overall performance of the progressive web app you made.
The next section is “Best Practices” which has the following details within it:
The next, third section titled “Performance” lists out the time it takes to load a single page from a responsive web app and the time taken for each item on the page to load. This section also has tools that would take care of any issues that are emerging as reasons for slowdowns.
The fourth and final section “Fancier Stuff” determines whether the app is making use of the latest HTML/JS features or not. With lighthouse, you can not only conduct a test for your progressive web app, but also get a sense of direction in order to fix the issues.
AMP or Accelerated Mobile Pages are the tools that can help you compress images/JS and thus speed up the website. AMP enjoys a generous support from Google, and even enjoys the favor of Google highlighting the mobile websites that are powered with AMP in search results.
Ionic 2 is an AngularJS 2 based framework and was only released last year. As a first impression, it does appear as an attractive solution to further the success of the initial Ionic framework which was first released in 2015. This is an especially good platform for the developers who are making their move from Cordova/PhoneGap on to the new age responsive progressive web app solutions.
This is a popular one! This is essentially a community driven website which has at its core, entire repositories of projects. The website covers a huge range of topics related to programming which includes JavaScript and service workers for progressive web apps. In fact, within the platform, you can find the repositories for Webpack & PWA.rocks. Mere exploration of the platform gives you a deeper understanding of the subject and can even help you make your own contributions to it.
Currently on GitHub, there are a handful of repositories in context of progressive web apps. This means you have anopportunity to learn from all these projects and may be even start your own repository when you try your hands at building your first progressive web app. The project management features at GitHub let you collaborate seamlessly with a host of other developers who are geographically far removed.
If we were to explain what a progressive web app is, in the simplest of ways, we would probably say that it is that web page which took just the right supplements in order to behave more like an app downloaded from one of the app stores. The experience begins just like any other web page on your browser, but as you explore it, you would get a prompt “Add to the Home Screen”. When the user would open it from the home screen, the UI controls of the browser are hidden away and the whole thing feels like any other app.
Progressive Web Apps have managed to hit the sweet spot between the mobile apps & the web and cracked the gap in the web. The web had been looking for a way to crank up their performance to come at par with the native mobile apps and has been yearning for a way to get into the notification tray, & on the home screen that the mobile apps have been enjoying for a long time now.
Did you know that more than 40% of the users would bounce from the websites that take more than 3 seconds to load?
This is one of the issues where a progressive web app can come to your rescue. The underlying idea is to get rid of any and all kinds of friction and make it easy for the users to get to what they want. The reason this works and why this seamless experience is possible is, as we mentioned earlier – the service workers – the proverbial back bone of any progressive web apps. The service workers make reliable and intelligent caching, content updating in the background, push notifications possible and also enable some of the most lucrative offline functionality for the sites visited at least once earlier. This means for the websites that you have visited earlier, you do not need a super-fast or super reliable network for any subsequent visit.
At this point, you may raise a question about the fast first load with reliable performance. To answer that, Accelerated Mobile Pages (AMP) steps in to join hands with service worker. AMP is known to offer reliably fast web component for first load. Not only are these components much faster to download, they are a lot less data hungry as well. The websites that use this combination would always provide as reliable a speed as provided by a native app. After the page has loaded, the site sets up the service worker and caches the assets intelligently. This means that the PWA would always be up to date and the users would be free from having to install frequent app store updates.
In a nutshell, a PWA is:
It loads faster and has the ability to work offline
It has junk free scrolling, smooth navigation, and seamless navigation, even when you are on a less than perfect network and connectivity
It can be launched from the home screen and can also receive push notification
If you think that the users would download the apps for all the websites that they visit frequently, you are more than mistaken. The complexity and the number of steps to actually download an app discourages customers to actually download it. PWA lowers the number of steps between discovering an app and getting it on the home screen, thus ridding the users of any kind of friction of getting an app installed.
Let’s take a look at the three defining matrices in order to understand the importance of PWA in molding the future web:
The web audience on mobile has only multiplied exponentially especially in the past few years. In 2016 where Chrome had 400 million users which reached and crossed one-billion mark in 2017. Being app-only can cause more problems for a business than having a more diversified plan which offers a better experience to a wider audience, bringing in a competitive edge to your business.
Mobile apps struggle with the issue of discoverability as compared to the websites. This means that the user acquisition costs for the web is about 10 times lower than the native apps. As PWAs get more exposure and have a much lower friction while onboarding, they tend to acquire a lot many more users for a lot less in terms of investment.
The fact that a PWA can offer a seamless end to end user experience even in the areas where the connectivity is really low increases the rate and total number of conversions.
Now that you have a little more understanding of what Progressive Web Apps really mean and involve you might be considering getting a progressive web app for yourself. However, as a startup, a small business, or an entrepreneur, there is little scope of taking decisions without delving deeper into the nitty gritty of any decision. It is important that you are aware of the kind of benefits and advantages that a progressive web app can bring for you before going ahead and implementing it.
In the year 2017, the total number of apps downloaded was a whopping 197 billion, and the trend only seems to go upward as more and more businesses are getting their own apps developed. Getting an app made has turned into something of a mandate for the businesses today, quite like a website.
The native apps are generally quite costly and tend to consume quite a bit of data & storage on the consumer’s phones. This is where Progressive Web Apps stepped in and shot to prominence and popularity. But this is not all, there are a lot of benefits and advantages that come with a Progressive Web App. Here’s a detailed list.
Cellular data and associated expenses might not be a matter of concern in the developed countries but is still quite an issue for most people in the developing countries. In the recent times cellular data rates might have plummeted for the benefit of the users but, it still is a lot more expensive than the developed nations.
Progressive web apps can be a sight for sore eyes in these situations particularly because they consume only a fraction of the data consumed by a typical native mobile app. This means the consumer would be saving that much when they are using your progressive web app, in place of any other traditional app.
If you have ever made an app, you have known the woes around app updates. These are sort a necessary evil that is tedious because you have to keep releasing them, not just to keep the bugs away, but also to make sure that your app is compatible with any updates on the software of the different mobile phone devices or even the new models that have been launched recently. At the user’s end it can actually be quite a cumbersome task as well! The updates for the apps consume data and when you do not have access to Wi-Fi, it can come as quite a cost. As an example, consider a run of the mill Facebook update, it might be somewhere around 200 mb easily, which can be expensive, and eat away a significant percentage of the user’s monthly data limit.
However, in case of progressive web apps, this issue does not arise, for the user and the developer or owner both. Characteristically and architecturally progressive web apps are quite similar to websites, which means that they are updates ‘on-use’ quite like the run of the mill websites. When you load the progressive web app you would see the update, but it would not have to be updated in the background or before the launch. This not only makes the progressive web app get updated a lot faster, but there actually is no need for the approval from the App Store or Play Store. This helps you as an app owner get rid of bugs or any other critical issues in no time!
All things considered, it is a lot cheaper to develop a progressive web app! If you were to develop an app for your business, you would eventually have to develop apps for both iOS and Android which frankly is not going to come cheaply. Especially if you are a startup or a small sized business, you are definitely looking for a high ROI on your app, this might turn out to be quite an expensive affair.
Though progressive web apps are considerably cheaper, it does not mean that you would be cutting out on any functionality! This means that you would have better chances of generating a positive ROI.
If you built an awesome app but not many people saw it, you didn’t gain much from it, did you? One of the biggest advantage of building a progressive web app is that they can boost the accessibility and searchability of your app.
As we discussed earlier, progressive web apps load really fast! For example, Uber’s progressive web app takes less than 2 seconds to load! This makes quite an impact on their search engine rankings, because the sites that load faster receive a boost in their ranking. Additionally, your progressive web app would be indexed a lot faster, which finally enhances the user experience and it all adds up to make your SEO strategy a great success. This is so effective that some of the businesses have implemented their own progressive web apps into the existing online marketing plan.
In the short period of their existence progressive web apps have been associated with great results for businesses that implemented them. The progressive web apps offer a seamless experience with a considerably low consumption of data, and significantly shorter load times, and this is probably why many of the businesses have confessed to seeing a notable increase in their conversion after they began using a progressive web app for their business.
Over time, progressive web apps have emerged as a great way to boost the business by not just increasing conversions but also with an increased time spent on the website by the users and a definite boost in the revenue generated online.
This is especially true if you already have a web app. All you have to do then is spend 15-20% more front-end coding resources and you can have a progressive web app to supplement it! The progressive web app is built using JavaScript, a standard front-end language, which means that you would not even have to change your framework, nor would you have to introduce any new technologies.
As a web app owner, you would not even have to hire any additional resources or people for building a progressive web app for your business.
This is one of the more interesting aspects of having a progressive web app. You can keep adding on functionalities, fun new features, or anything else under the sun as and when you please, because basically you are working on a website after all and just adding on to it. As more and more browsers are becoming compatible with the progressive web apps and all that they have to offer, you can keep updating your PWA with new features.
If you have thought of building a native mobile app, you have definitely considered the age-old question of whether to build your app for the Android or iOS platform. The progressive web apps have a definite edge here, because like regular websites, PWAs are cross-platform.
Google is, without a doubt one of the largest software companies in the world, and since they are backing the progressive web apps, there is a bright future for them. If you have had a chance to look at the presentations from Google I/O 2017, you would understand what we are talking about. Not only do most of them touch upon progressive web apps, but they are pretty clear about Google’s desire and encouragement for more and more websites to become app-like attaining indistinguishability from native mobile apps in some cases.
In absence of an internet connection or when you are offline, most of the websites do not work, and those that do, are limited in their functionality. A progressive web app, however is self-contained, which means that users can browse through it even when they are offline, which in turn greatly increases engagement and availability. As the progressive web apps work in the offline mode, they can save any information automatically during the last online access. The offline page can not just have the brand logo and vital information, but you can even work some advanced features into it. For example, let’s say if yours is a home furnishing business, you can allow the users to access your catalogs in the offline mode, and increase engagement and retention.
The cool thing about a progressive web app is that they are designed to simulate a native mobile app while retaining the advantageous functionalities of a website like dynamic data and database access. Typically, a developer would choose how extensively they want to program their progressive web app, however, most of them leverage existing frameworks and traditional theory on the ways a mobile app offers better user experiences in comparison with the websites.
The added advantage of getting a progressive web app over a native app is that you offer access to your users through URLs, which makes them indexable by search engines, which is a huge advantage for any business.
It is because of the unique ways in which the underlying technology caches and serves the text, stylesheets, images, and other content on the websites, the PWAs work way faster! It is for this reason that the conversions are higher, user experience is greatly enhanced, and the retention rates are significantly better with progressive web apps.
When users install your progressive web app on their devices, it does not involve a long wait time for download, nor do they have to be routed through App Store or Play Store. The app is directly downloaded on to the user’s screen. So what this effectively means is that your progressive web app gets its own icon on the device quite like a native mobile app, but there is no hassle of going through the complex App Store submission process! That’s a one up for both you and the end user!
When you are building a progressive web app, you are getting an opportunity to implement a number of different, very useful features, like for example push notifications. The app publishers and the developers hold absolute control on the ways of implementing this option which offers businesses an opportunity to come up with creative solutions in context of advertising fresh content.
Like we mentioned earlier, the progressive web apps do not need to be published in Google Play, Windows Phone Apps, or iTunes. This means that there is a huge chunk of time saved here! The developers can simply push new updates without having to wait for approvals which allows them to release updates at a level impossible to attain with regular mobile apps. The updates would simply be downloaded and implemented whenever the users relaunch the app.
Though we have talked about the cross-platform capabilities of progressive web apps, we must also caution you that there are some noticeable differences in the way progressive web apps function over iOS & Android.
The user who is installing the progressive web app can make changes to the icon’s name before the app is installed on their iOS device, not on an Android device
On iOS devices, the progressive web apps can be configured to let the corporate users receive app shortcuts from the company
Though progressive web apps may seem like the best thing to happen to you today, but it is important to think straight and understand that like any other technology, this too has its own share of disadvantages.
As a business that is dabbling with the idea of building a progressive web app, it is important that you have a clear picture and understand what is it that you are going to get or not get.
In the present scenario at least, the progressive web apps have less access to the native system features of the device they are designed for, when compared to the traditional native mobile apps. This means that the hardware components like fingerprint scanner, GPS, or camera that are easily accessed by a native mobile app for better user experience and app functionality can not be accessed by a progressive web app.
This has been a point of contention but, as of now, the progressive web apps are more or less an Android-centric solution. Apple’s iOS only partially supports progressive web apps.
While we are going gaga about the enormous amount of time we are saving by not having to go through the app stores’ scrutiny and approval process, there is a downside to it as well. The native mobile apps that are released on the app stores benefit a great deal from the promotional and marketing potential of any app store, whether it is Play Store or App Store. This might eat into the number of audience you and your app might have been exposed to.
This is a known fact that the progressive web apps do not support all the browsers, not yet anyway. The newer versions of popular browsers like Opera, Samsung’s android browser, and Chrome do support progressive web apps. However, browsers like Internet Explorer, Safari, Edge and quite a few more of the custom browsers do not support them. The significance of this point can only be understood by the fact that the Safari browser by itself covers 50% of the browser market for mobile devices.
Not all the devices support the entire software functionality of the progressive web apps. This means that for Android devices the progressive web apps might suffer from support issues, for iOS devices a progressive web app would not be supported with notifications and shortcut prompts for the home screen. To drive this point home let us tell you that in the US market, iOS devices hold 50% of the mobile device market today.
The progressive web apps do not have any cross-application login support. They require individual login and unlike many other applications, they are not capable of collecting this data independently.
Each of these have their own advantages and their own problems. The progressive web app support for your brand would always be important for the people so that people who have access only to slower connections and own one of the affordable smart phones can use your Web App easily. If however, you have a large app and you cannot afford to get into lazy loading then you can get into bundling it all up into a hybrid app. However, if your app would have to perform intense tasks or is highly interactive, then maybe getting a native mobile app would be the right thing for you!
For apps like Twitter or sites that offer a lot of information in form of text, like news sites where you would read a lot but do not need to interact with it, Progressive Web Apps are a great option. Having progressive web apps for such sites let you open the app, load its data, then read its content at a later time even when you are offline. This does not work in a normal web application, nor does it work for native apps when the connection is slow, and the smartphone being used is one of the less powerful ones. So, even if you do have a native mobile app, it is critical that you build a lightweight progressive web app which will not only load in seconds but will give your users the option to explore it even when they are offline.
Progressive web apps seem to be the way to the future and are quite relevant today. Most of the browsers support progressive web apps, and Safari is one of the prominent browsers yet to offer its support. It is interesting, to say the least that Apple is yet to extend support to progressive web apps because they were the ones who supported web apps on the first iPhone. But, one hopeful sign is that they have decided to label service workers as “under consideration in WebKit. Google on the other hand is supporting and championing this movement towards the progressive web apps with great amount of documentation on the topic, developers dedicatedly advocating progressive web apps and even quite a few conference sessions on the subject at their annual event Google I/O 2017.
There would always be advantages and disadvantages for any technology that comes up. This holds true for building a progressive web app as well. However, as we have seen earlier the advantages take over the few disadvantages that building a progressive web app may bring to the table. Today, most of the business owners are aware of the many advantages like being able to work in the offline mode, app like experience while it actually is a website, features like push notifications, no need to install from any app store, but there is question that you as a small business owner might have asked at one point of time or another – Why use a platform to get a progressive web app instead of building it from scratch with an in-house team?
This is one of those typical questions where you need to make a choice between “build & buy”. If you decide to build a custom progressive web app from scratch, you would get an app that would meet the pre-defined requirements that were decided upon at the beginning of the project. However, when you buy from a platform, you are going to invest in an ongoing innovation.
Here is a list of the top challenges that you would have to face if you were to decide to go ahead and build your own progressive web app.
Progressive web apps are not websites and it is exactly for this reason that there are merits and benefits associated with it. Your front-end team members may not have the experience that is needed to build large web applications that would have the capability to power a business that might be dealing with hundreds of millions of dollars. The development of progressive web apps is as yet a niche with few experts in the field, and it is not because of lack of trying, it is simply because it is tough to accomplish.
Remember when you began working on building your responsive website? Did you not run into a million different issues while doing it? Now understand that the keyword in progressive web apps is “app”! Development of a progressive web app needs application architecture including event management, state, and caching. If your in-house team has only worked with websites for desktops and mobile devices, chances are they would not be familiar with service workers. And, we have mentioned the importance of those earlier in the post.
There is a world of a difference when it comes to building websites and building apps. It is not necessary that a good website developer would be able to develop a great app or vice versa. When you are developing a progressive web app, you essentially have to do all the work that you need for native mobile app development, but all this work is finally for the web. This is an entirely new concept for most. If you were to decide to go for in-house development you would have to make provisions to train the entire team including the front-end, back-end, and full-stack on all the concerned new paradigms and toolchain.
In order to build a progressive web app, the application building process is way beyond the scope of JQuery & HTML, which is why the progressive web apps need to be developed by the front-end engineers who are at least at the intermediate or higher levels. Typically a small or even medium sized business is least likely to have a generous resource of this level of front-end engineers, which is why your in-house team might lack the experience and expertise for this. A mobile platform that can help you build your own progressive web app has all this expertise and experience particularly for development of a progressive web app for your business.
Let us take the example of a retail business where the front-end solution involves multiple vendors. In such a situation there is a need for a whole lot of custom integration work and a whole lot of complex relationships that need to be managed. These complexities increase to such a level that some of the businesses have to resort to some kind of a vendor management software just to be able to keep a track of all the things that are going on. you can’t simply take a step back and bring down the offerings. Today, if you want to offer a complete brand experience, it is imperative that you incorporate a host of omnichannel experiences for your customers.
Caching is one of the tougher obstacles because it involves the perennial tradeoff between performance and freshness. For progressive web apps, caching is one of the most critical components, because this is exactly the part that lets you to carry out instant rendering. One of the toughest things to accomplish here is getting the caching architecture right. One of the less experienced developers might end up spending thousands of hours on this problem only.
The leading open source technologies like Angular or React are mere User Interface libraries and offer some great low-level tools to manage events and the state. And when it comes to the progressive generators, all they do is take care of the easiest parts of progressive web app development, like generating the Manifest or a basic Service Worker. If you were to rely on them for developing your own progressive web app you would miss out on some of the more creative & innovative integrations that can power your progressive web app and optimize them for speed & conversion.
Some industry specific platform integrations like Salesforce Commerce Cloud for enterprise ecommerce platforms can generate mobile experience APIs that are easily consumable. This effectively brings down thousands of hours that could have been spent in achieving similar results and can ensure that there would be no impact on the mobile experience due to any desktop or other changes. However, these integrations need certifications and gaining them is quite a task by itself.
We have talked admirably about the great speed that progressive web apps offer, but it is important to be clear here that this does not happen on its own. After all progressive web apps are applications, and these apps still need to boot when the visitors arrive on the first page of the site. In order to make sure that app boots quickly, the developer needs to have a deep and advanced understanding of mobile web performance.
When you build your progressive web app in-house, it might solve the problems of today, but you would need to understand that new web features (like Accelerated Mobile Pages, native payments for the web, credential management API, thumbprint login on the web etc.) are evolving and being released at an astonishingly high rate. When you build your progressive web app in-house you would not have the instant access that you would need, when you are building APIs for features like these.
The offline mode of your progressive web app works beautifully, but did you remember to account for the analytics and the third-party marketing JavaScript tools on the offline mode? The third-party integrations including analytics were not built for use in progressive web apps. In context of a progressive web app, it is imperative that a central dispatch event system is in place to manage state changes inside the application and then alert the third party at the right time. In case the device is offline, it must then hold back the information. You might end up dumping thousands of productive hours in dealing with the analytics of your progressive web app.
We have extensively learnt the numerous advantages or benefits of using progressive web apps. We have witnessed them make onboarding simpler and solve the problems of compatibility! However, they have a new problem of their own which is their inability to fully interact with the device on which they are running. It is important to remember that it indeed is the browser that offers the experience of the progressive web app, but the browser itself is made possible only by the device and the OS that it runs on. When you are using a Progressive Web App what happens is that there comes an extra layer of software-running-software becomes the unintended wall between the progressive web app and the device. It is this advice that finally lends a special advantage to the native apps in several areas.
Yes, they are. The native apps are definitely faster than the progressive web apps. This is because in case of a native app, the device on which the app is being run has the code living on it. Also, the code is usually written specifically for that device taking into consideration the device configuration and the Operating System. This can be easily understood with the metaphor of languages and translation. If two people speak the same language – English let’s say, they can then speak to each other, understand each other, and communicate effectively. However, if one of them only spoke Chinese, they would need the help of a translator to communicate with each other. The conversation will still happen, but the process would be slower. In case of a progressive web app, the browser becomes the translator for the progressive web app and ends up adding a kind of latency to the entire experience, as compared to the native mobile app experience.
GEO-fencing is quite an interesting feature. It actually helps the app developers define and leverage virtual perimeters in this real world. This means that when a user in the real-world steps inside the boundaries, an action is triggered automatically on their device. GEO fencing can be profitably combined with push notifications and may be turned into a really powerful tool for marketing and retail applications.
What this means is that whenever your customers or prospective customers step in into the virtual perimeters defined by you, they would get a message informing them about deals of the day, limited period offers, special deals just for them, and a whole lot of other things to invite more and more customers in to your place of business. Though a Progressive Web App can make use of the location services to tell you where the device is, but it cannot use GEO-fence to help you fortify your push notification game!
NFC or Near Field Communication is the protocol that is made use of, by your phone, when you are using it to make payments! Progressive web apps, as of now do not have the ability to interact with these NFC chips which make these payments possible. if you have a brick and mortar store, and are accepting digital payments, at some point in time you would have to go for a native mobile app, if you want it to be able to stand abreast of the competition instead of having to keep playing catch-up with them.
The customer experience is taken to much greater heights when you have provision for mobile payments. Also, if you have the feature of mobile payments, you can tie in some great features within your app like the loyalty membership & more.
Native mobile apps have this awesome ability to interact with other apps. You must have been offered the option to sign into an app or create a user account on an app by logging into it through Facebook, Twitter, Instagram or any other social media channel. This method of creating a user account is preferred by many users because they make it simple, convenient, and faster. What happens here is that you choose the option let’s say Facebook and the app pops up, passing your credentials on, and that’s it! You can now simply go back to doing what you were doing before logging in! there is no way to do this with progressive web apps. There is no way or method with which they can interact with other apps (native or any others).
This ability of the native apps to interact with the other apps not only saves time for the users, but also helps them centralize their logins to a single sign-on. This means that a native app would ensure that the users do not have an additional account and related details to remember, which is an awesome thing to do for the benefit of the user.
The native mobile apps have the ability to leverage the “smart” features and the native hardware of the devices that they are running on. this means that features like proximity sensor, ambient light detection and so many other features that make your phone smart are all there for the native mobile app to leverage. This is where the progressive web apps lose out, because they are still browsers, hence do not have the ability to connect with the “smart” features and native hardware of the device.
Wake lock is an interesting feature that gains prominence in case of apps where you are reading books or are watching videos for long. This feature lets the app override the system settings that turn the screen off when the device has not been interacted with, for a particular period of time.
You must have noticed that if you are watching a video that is streaming through one of the apps that you are using on your phone, it does not go black, even though you have not interacted with the device for a long period of time. The progressive web apps do not have this capability, which means that the screens of the users are going to go black, even if they are reading a book, or are in the middle of watching a video.
In this article we have often talked about the progressive web apps not having to go through the complicated review and approval process of app stores and how that makes the world simpler. However, we need to understand that though the complications may be a nuisance, they do serve a purpose. The review process on the different app stores is essentially a control review by a third party. This means that the prospective users can easily download these apps confidently without worrying about any malicious code, spyware, malware etc. This guarantee however, is not extended by the progressive web apps. It is true that they operate over secure connections but running a web app is as simple as visiting the web page where it lives. Here, you basically arrive at the page and you are running the app. This means that anyone with malintent can easily exploit this connection.
The progressive web apps are quite quickly growing in popularity and reputation. The word about the progressive web apps is spreading quite fast. More and more people are jumping on the progressive web apps bandwagon and it is headed straight into the future. As it appears, the progressive web app experience is only going to become more dominant by the time this year wraps up. There is of course some time left for the market to mature, this seems to be the correct time for the progressive web apps to break out for the future.
The mobile users have been using the smart phones are reaching a point of overload when it comes to native mobile apps. The situation is so dire that the majority of consumers only download zero apps in a month. This means that even though the users are spending a whole lot of time using mobile apps, they are only interacting with the same apps that they favor and not downloading anything new. This means for any new customer-facing app to bring in new app users on-board their native mobile app.
Some developments in the past like changes in the Apple’s App Store Guideline 4.2.6 brought about a lot of trouble that were leveraging commercial app building templates and app building platforms. Now, the Apple App Store Guideline has changed and relaxed their standards a little, but the small business owners who had chosen the low-quality app builders still couldn’t make the cut. This means that they are missing out on the App Store’s huge audience.
The mobile-first indexing processing from Google would be completed by the end of the year 2018. This means that Google would start treating the mobile versions of the websites as the primary site while ranking the search results. The progressive web app experiences are indexable, which offers a definite competitive edge to them. As the progressive web apps will come up in the search results, the chances of people stumbling upon it are higher.
Recently Google announced that their Chrome Apps will now be progressive web apps. Currently, the Chrome apps work quite like a progressive web app. However, they need a heavier download which means that they also leverage a lot more resources as well. This shift by Google is expected to conclude by the middle of 2018.
The progressive web apps and the related technology has been on a path of progress, but there still is some room for it to grow. The progressive web app developers have made a huge progress in developing better APIs which are loaded with higher and more efficient functionality. This can effectively close the gap that exists between the functionality of progressive web apps and native mobile apps.
In order to improve the mobile engagement and bring down the data usage of its users Twitter has made use of progressive web app technology. 80% of the users for this social media giant are mobile users and they wanted to serve these users with great speed, consume as less of their data limit as possible, and offer to their users an experience that would be more robust, reliable, and engaging. It is this intent that was formulated into Twitter Lite Progressive Web App.
Once the progressive web app was launched, they confessed to the app meeting their satisfaction and substantiated this confession with the following results.
Pinterest was struggling with only about 1% of the users converting to sign-ups, logins or native app installs and they realized that it was largely due to the slow web experience of this popular image sharing social networking site. This realization led to their decision of developing a progressive web app for their mobile web. Though they invested 3 months in order to build the progressive web app – Pinterest and this brought about a number of great improvements for their business.
The American business magazine giant – Forbes have a momentous name and great reputation in media. In order to increase user engagement, they came up and developed their Progressive Web App. The progressive web app was developed with the intent to cater news and information as per the preference of the user and stay in touch with them through push notification. Progressive web apps have made the mobile web experience a lot faster, personalized, and pleasant.
The world’s largest online B2B trading portal Alibaba serves more than 200 different countries and regions. They were looking for a prompt and convenient solution to carry on the transactions for their users. They experienced a hesitation among users to go ahead and install a native mobile app and wanted to stay within the browsers. It is for this reason that Alibaba developed their own progressive web app in order to offer to their web users an app-like experience.
One of the most popular online classified ads platform – OLX acts as a marketplace that connects the buyers and sellers of used goods and services. In an effort to provide prompt and convenient service to its users, OLX developed their own progressive web app for the web user segment. Needless to say, there have been marked enhancement in their business.
There of course are so many things that can be said, explored, and discussed when it comes to progressive web apps, especially in comparison to the native mobile apps. This is because there still is a world of a difference between the two, hence deciding between the two, can actually be quite simple and depends largely on your specific needs.
It is true that the future remains uncertain, especially when we are talking about the emergence of various different new age technologies. It is quite possible that as the year ends, we might end up talking about an app experience that is completely different from what we are talking about today. But, if we were to look at all the identifiers and the hints that the technology giants like Google are offering, progressive web apps are the way to go this year, and maybe for many more years to come! They are definitely here to stay!