Invented by Google in 2015, Progressive web apps (PWAs) are websites built with the features of both traditional websites and native mobile applications.
The main advantages of Progressive web apps are the capability to work both online and offline, incredible performance that combines the best of websites and mobile applications and easy installation in the user�s device.
The offline capabilities of PWAs ensure speed and performance with absolutely no faltering. Developers can deliver the apps on user devices without going through the process of submitting them through app stores
PWAs are widely used by top companies all around the world including AliBaba, Flipkart and Google, to name a few. In fact, many companies have now started to build PWAs instead of native apps.
A Progressive web app gives you the look and feel of an existing mobile app or corporate website, and they can also be made different, depending on the goals of the business.
As it is possible to seamlessly integrate PWA with the existing website or web app, the usability feature of the technology just went several notches higher. And Time to Market a product has considerably reduced.
Progressive web apps are also great for implementing various specific hardware features like push notifications, for instance. This is a major boon for ecommerce websites because for such businesses, push notifications are far more effective than other communication modes like emails and newsletters.
Below is a snapshot of the Progressive Web Apps of major companies like Flipkart, Washington Post and AliBaba.
Credits:Google Developers
If you are planning to build Progressive Web Apps, then choosing the Ionic framework would prove to be fruitful. Ionic is a powerful HTML5 mobile SDK that helps you build apps that delivers a native-like feel to the users.
As it is a cross platform and hybrid mobile app framework, it has all the tools and services (HTML5, CSS and Sass) that improves the look, feel and UI of the app. (which will be discussed later in the article)
Progressive Web Apps - Access Anywhere, Anytime!
Progressive Web Apps is actually a collection of technologies, Web APIs and a host of design concepts that work in conjunction with one another to provide an amazing experience to the user.
It brings forth the features in native apps through Web based technologies within a secure container that can be accessed anywhere, anytime. In fact, Progressive Web Apps bridges the gap between websites and native mobile apps, and offers a host of benefits like:
1. Offline access
Regular websites stop working when the internet connection is cut off, but PWA uses caching to continue working offline. You will not be faced with the typical 404 error page. The offline functionality of PWAs generates engagement and availability; especially for ecommerce websites.
In the absence of internet connection, a user can even access a page that he hasn�t previously visited in his device. Instead of the error screen, a custom offline page with the company�s brand name, logo, and certain other information will be displayed. The overall benefit is that the user will continue accessing the site irrespective of the internet connection.
2. Faster loading time
Progressive web apps loads instantly for both regular and first-time customers. If done correctly, users can enjoy a loading time that�s 3 times faster than what they are experiencing now.
3. App like feel
Though PWA is a regular website, it generates an app-like feel because the app shell model separates the functionality part from the content part. In other words, PWA is engaging because it behaves like an app on the user�s device and provides an impressive user experience. This could be because it is fast, and highly responsive, with absolutely no loading time.
4. No app store submissions
Progressive web apps can be downloaded and used as it is, without the requirement of any app store submissions. This reduces TTM (Time to Market) considerably because getting the permissions from each app store is a painstaking process as the developers have to follow the rules and guidelines of each of the store before they are published.
Now, let�s see the two main functionalities that power PWAs - Service Workers and Web Manifests.
Service Workers
Service workers are scripts that offer excellent caching capabilities, offline functionality, push notifications, background synchronizations and so on. They run in the background in the user�s browser and interact with the client�s browser page and HTTP/Get/Post/Set requests. Developers make use of service workers to build Progressive web apps.
They do this by intercepting the requests of users, and sending them through the original end point or changing them to suit different kinds of requirements. Service workers let you enhance the performance of the website through HTTP/2 Push. Additionally, it is also possible for you to write separate codes for new users so that they can fetch cached content and app cache.
Web Manifests
The main function of Progressive web apps is to provide seamless app experience. Through web manifest, you can provide information about the application in a JSON text file. The web applications are installed on the home screen of a device letting users enjoy quick access.
The users doesn�t have to install anything or go through app stores; they also receive push notifications along with other online capabilities as well. The code for deploying web app manifests in the HTML pages with the help of a link tag goes like this - <link rel="manifest" href="/manifest.json">
Ionic - the �Iconic� Framework
Out of the several frameworks that can be used for developing Progressive web apps, Ionic is the best choice of all. It is an open source, cross platform, hybrid mobile app framework, equipped with the tools and services required to develop apps using web technologies like HTML5, CSS and Sass.
The basic foundation of Ionic is AngularJS and is powered by Apache Cordova to help develop native apps. Developers can now make use of one common language and framework set to develop both native and Progressive web apps.
Let�s learn more about Ionic framework.
Ionic is based on SASS UI, which comes with a host of rich features that lets you create fast, robust, interactive, native-like applications. The framework has a wide variety of custom elements that helps you develop interactive mobile apps in Angularjs.
Ionic is an amazing framework because it is equipped with pre-built components that are used to customize design themes and elements. Hence, developers don�t have to build such features from scratch.
The framework comes with a lot of options for you to build amazing UI with awesome features. It employs functionalities found in native mobile development SDKs and follows native application UI guidelines to develop apps exuding commendable performance.
Why Choose Ionic?
1. Free and Open Source
This is one of the best reasons to choose Ionic framework for Progressive web app development. Developing an app is quite expensive, as there are number of processes involved in it, including testing, deployment, marketing, launch, and upgrades and timely maintenance.
Selecting an app development framework itself is a $1000 dollar job, so when Ionic comes free and open source, developers choose it especially for making hybrid mobile applications. The open-source feature of Ionic makes you manage the code structure easily, thereby saving time, money and efforts.
It is licensed under MIT and is integrated with attractive features including mobile-optimized codes of HTML5, CSS and JavaScript components.
2. Cross Platform
Developers looking to develop apps that work in different platforms will prefer Ionic, because it is a platform-independent framework. It lets you build apps that open seamlessly in Android, iOS and Windows.
The apps are deployed through Cordova through a single code base, and will function in all user devices and platforms. The application adapts automatically to the device it is functioning in.
Because of the �one codebase� feature, all the members in the team can handle the codes in whichever way they are comfortable in, regardless of the platform. This makes app development much more consistent. Therefore, it would be a cost-cutting move for companies to�develop ionic apps for their projects.
3. Angular Support
Ionic framework is supported by Angular, the most common framework used for developing highly interactive web and mobile apps. The component API of Angular is the foundation of Ionic framework that helps developers create awesome hybrid and web apps.
Developers can make use of the core components of Angular to incorporate user-friendly and exciting functionalities to the app. Additionally, HTML�s sentence structure extensions provided by Angular.js makes the job very easy.
4. Cordova Plugins
Cordova is a set of command line tools and plugin bridge. It helps developers to build native apps, by calling the native code from Javascript, add platforms, run and build applications. And being an HTML5 framework, Ionic needs a native wrapper like Cordova to ensure its functioning as a native app.
Ionic framework comes equipped with Cordova Plugins; it has evolved to be an important part of the framework�s app development. This makes it easier for accessing the various native features, like Camera, GPS, and so on.
Additionally, there are more than 120 Native plugins like Bluetooth and HealthKit, FingerPrint Auth and other TypeScript extensions available in Ionic.
5. Beautiful UI
Apart from having functionalities, it is also important for the web app to have a pleasing appearance. Ionic makes this possible with the default UI elements that are reusable and re-adaptable and it lets developers create extremely beautiful user interfaces.
The main components are equipped with HTML, CSS and Javascript, and they can be modified and customised to suit different requirements by adding predefined CSS classes. Some of the main components are navigation, caches, sliding menu, buttons, form inputs, pop ups and much more.
Ionic is quite a responsive framework, as it comes with native-styled mobile layouts and UI elements when compared to native SDK on Android or iOS. The framework is strong enough to build applications that surpasses other existing HTML frameworks.
6. Powerful CLI
Ionic�s powerful CLI or Command Line Interface makes it possible to create, build, test and deploy apps to the platform of your choice. The CLI provides the functionalities found in native SDK, including built in development server, build and debugging tools, etc.
The new CLI installs eliminate over 90MB of dependencies, and thousands of legacy code. It allows for a much faster install time coupled with a smaller footprint. Ionic CLI allows for better speed and performance, apart from providing more guidance and feedback for developing providing information when problems arise.
7. Strong Community
Ionic has the best community with over 5 million developers worldwide. These include World Wide Slack, Community Forum, Stack Overflow where you can clear all your doubts and questions, and Github, with over 31,000 stars.
How to Develop a Progressive Web App in Ionic
In order to develop a Progressive web App in Ionic, you need to download Ionic and install the necessary dependencies for the same. Though Ionic is meant for Android and iPhone devices, it is important to remember that the framework may not support certain Android devices. This could be because of the wide variety of Android devices that�s presently in the market. Anyway it does support iOS 7+ and Android 4.1+.
Start the ball rolling by creating an Ionic app. To install Ionic, follow these steps:
1. Download Node.js 6 LTS and NPM 3+ installers.
2. Install Ionic CLI globally.
You need sudo for this step.
sudo npm install -g ionic
Verify the installation with the command:
ionic --version
3. Start a new project
Next, start a New Ionic project with ionic start.
$ ionic start myCabotApp
Ionic start is a prompt that lets you select a �starter�. If you are developing an Ionic app for the first time, then use the tutorial starter. See Starter Templatesto know more. After choosing the starter, the CLI will create the new app.
4. Run ionic serve
Next, you can cd into the project�s directory to make use of the few commands that opens before you.
$ cd ./ myCabotApp
$ ionic serve
Like the ionic serve, for instance. While running ionic serve, the changes made to the codes in the app will be automatically refreshed in the browser. Use ionic --help to get a comprehensive list of commands.
5. Integrate Ionic with Cordova
This step is important as it brings forth the native capabilities to the app. The command, ionic cordova wraps the Cordova CLI.
$ npm install -g cordova
$ ionic cordova --help
$ ionic cordova run ios
Credits: Ionic Framework
For a detailed overview of creating an Ionic app, visit the following links:
Now that your Ionic app is ready, the next task is to convert it into a Progressive web app. This is done by adding Web Manifest and Service Worker to it.
Adding the Web Manifest
Recall that a Web Manifest makes the PWA to get automatically installed in the user�s home screen, so they can access it exactly like a native app, complete with the same kind of experience.
The Web Manifest can be added by opening the www directory and adding a file named manifest.json. In this file, you need to list out those things required for the browser to install the PWA to the user�s home screen.
{ "name": "myCabotApp",
"short_name": "myCabotApp",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "img/icon.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#FF9800",
"theme_color": "#FF9800"
}
Once the file is created and filled, you have to link the Web Manifest from the index.html in the www directory. The code for doing that is as follows -
<link rel="manifest" href="manifest.json">
With the Web Manifest added, you can install the app on the home screen.
Adding the Service Worker
You can get this as simple or as complicated as you want. As Service Workers are meant to provide offline functionality, you can control how much information you want users to access when their internet connections gets erratic or broken. The Google Chrome team has many different service workers, and there are comments on what they do, complete with demos and all.
To add the service worker implementation on the Ionic app, just create a file in the www directory named sw.js. Next, copy and paste the service worker you chose to that file. This action is followed by index.html to add Javascript. This will enable the Service Worker. Next open the index.html file in the www directory to add this code to the head:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then((registration) => {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch((err) => {
// registration failed
console.log('ServiceWorker registration failed: ', err); });
}
As the last step, you can simply run ionic serve inside your project directory from the command line. Your PWA with Ionic framework is now ready to use!
If developers are concerned that building a PWA will not be good for Safari - Apple�s pre installed browser, all they need to do is add a few extra lines of code. This was made easier when the browser engine behind Safari, Webkit started implementing a key API for PWAs.
Code Credits: Ionic Blog
Closing Thoughts
Progressive Web App is one of the best you can give your customers because a flaky internet connection no longer prevents them from having an awesome user experience. Also PWA development is less expensive compared to the costs incurred in native app development. The fact that PWAs takes up less storage space of the user�s device than native apps is another attraction.
With a solitary code base and standard tools, Ionic lets you build highly interactive applications in no time. Ionic offers the best of UX and UI; and being cross platform, you just need to build the app once and run on all platforms and devices.
To sum it up, building Progressive web apps in Ionic is definitely a good option to consider; businesses can leverage the immense possibilities that PWAs offer and developers can comfortably work with a framework that runs on a single codebase.
Want to develop a Progressive Web App using Ionic framework for your business? Come to us; we can do it for you!
