Nowadays the technology is changing rapidly, We are using many mobile apps which are building under different technology. Most of the users are using Mobiles to view the websites which are supported by Pc and Desktop. The PWAs are the key role to view any kind of websites in any kind of devices which can be responsive. They work regardless of the network connection. It is a platform specific application.
What is a Progressive web app (PWA)?
Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. It is a website that can be downloaded to your device and used like an app by adding to the homescreen. Some of the features are Fully Responsive, Access Offline, Secure and Installable.
Fully Responsive:
These are fully responsive means it can be used in any platform and adapt to any screens and it can ensure the user experience and app like experience.
For example:
Here by using the PWA the website is responsive. And in the ipad we can view according to the device screen size. These can be fit to any type of screens.
Offline access:
These can be operated offline and can run the apps in the background. An installed PWA can still be used without an internet connection.
For example: Using the Spotify app we can listen to music without connecting to the network. And we can load and scroll the music list which are played recently.
Secure: These are secure to use, as we are used via HTTP server.
Installable:
The PWAs can be installed on the user’s home screens,taskbars. Installable means without opening a browser we can use it by tapping on an app icon like a native app. It opens in a standalone mode without the browser interface and it acts like an app-like experience. Installing a PWA varies depending on the Operating system.
- Installing PWA on the Android:
A PWA can be installed on Android using the chrome browser. First we have to navigate to the website and by tapping the three dots icon we will be able to get the Add to home screen option so that on clicking the Add to home screen the PWA is installed and acts like native app.
- Installing PWA on Windows or mac:
In this we can use edge or chrome as a browser and we are having a share icon or on clicking the three dots we can download the page so that the PWA can be installed and used without any access to the network.
Automatic Updates:
These can be automatically updated when the developer releases a new version of the PWA, it is automatically fetched in the background, ensuring users always have access to the latest features and improvements.
Single Page Application with Angular or React:
SPAs load a single HTML page and dynamically update the content as the user interacts with the application. This approach provides a smooth and responsive user experience without full page reloads via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown. Single Page Applications(SPA) are a great way to create a fantastic user experience on mobile devices.
Examples of SPAs like Gmail, Google Maps, Netflix and many more. Companies all over the internet are using SPAs to build a fluid, scalable experience.
SPAs can be build on Frameworks like:
Angular: It is a TypeScript-based open-source framework from Google, Angular simplifies the development of complex web applications by providing a structured approach.
By using the angular routing and navigation the browser needs to render only the parts that matter to the user,instead of loading a new page. A single SPA can be built for multiple angular routes.
React: It is developed by Facebook, React is a popular JavaScript library for building user interfaces. It’s known for its component-based architecture and high performance.
React is most useful for single page applications because it allows developers to create applications for the mobiles and responsive, it allows developers to create applications that are fast and easy to update which is best for the mobile apps.
Same as the angular routing in React we have React Router which provides routing capabilities to single-page apps where we can load the data with the navigation.
Hosting a Web App on AWS:
Amazon Web Services(AWS) is a public cloud platform that offers a lot of services like computing, ML and cloud web hosting services to businesses, individuals and governments at inexpensive prices. It is a public cloud that allows others to rent a share of massive server farms and data centers. We are having different types to host a website like:
1)Hosting a website in AWS S3.
2)Hosting a website in AWS EC2.
3)Hosting a web app in a container in ECS, EKS, or Farget.
4)Hosting a web app with Elastic BeansTalk.
What is a Web Application?
Any service which can be browsed on the internet is a web application. Web apps can be built by various frameworks and libraries(Angular,React,etc..).
Ex : online forms, shopping carts , social media, Games, Email etc… are web apps.
Hosting a website in AWS EC2:
To host Web apps into the Aws using EC2 we are required to have an AWS account. AWS is designed for quickly hosting the websites securely.
Steps to guide:
Create an AWS account:
If we don’t have the Amazon Web services(AWS) go to aws.amazon.com and create an AWS account by logging our details into it.
Create an EC2 Instance:
To host the website we need to have a virtual server on the cloud. Here AWS provides an Amazon Elastic Compute Cloud (EC2) instance as a virtual server.
To set up the EC2 instance we need to have a virtual machine in the cloud that we can access remotely. With an EC2 instance, we can install the server software and applications we need to host our website.
Steps to set up EC2:
To launch an instance, log into the AWS console and search for EC2 and click Launch Instance, and choose Launch Instance to begin creating the EC2 instance.
- Choose Amazon Machine Image(AMI): Configure the Name and OS image for our EC2 instance and required software/Applications which depends on AMI.
- Choose EC2 Instance types:
AWS offers a variety of Instance types, like small(micro) size to the large size. Based on our website growth we need to select the type. We can use t2.micro which is free tier eligible. Keep the security group as default or existing security group and storage as 1 volume 8Gib.
Click on the launch Instance and back to the EC2 console there we can see the created EC2 Instance setup is ready to host.
- Installing a webserver to host a website on EC2: We now need to deliver the web content to users over the internet, a webserver. As a software program, a webserver on our EC2 instance allows us to host our website and make it accessible to users. There are many web servers available like Apache, NGINX and Microsoft IIS. Install any necessary server-side software(e.g., PHP, Node.js, Python) depending on our website’s requirements. Apache, is one of the most popular widely used web servers, open-source and it is highly configurable.
- To install our website we need to follow some of the commands:sudo su: this allows the user to change to root user.yum update -y: To update the EC2 instance.yum install -y httpd : This is installing apache in EC2 instance.service httpd start : Starting the web server.
Hosting the Website:
Navigate to the root directory of the web server which is the main directory where all of the web content for the website is stored.
When a user accesses the website, the web server looks in the root directory to find the requested content.
Navigation to the directory: cd /var/www/html.
Create an index.html in the directory using the command: nano index.html.
Now add any html content to the file.Save the file and test the website.
Test the website:
Now go to the amazon console and navigate to instance. Click on the instance that you had just set up. There we will see the public ipv4 address of the instance. Copy the public IPv4 address and paste it in another tab of your browser.
We can see the Html content is rendering then it is successfully deployed with EC2 Instance. Now we can share this IP to the users so that they will be able to use the application which we built. We can give a proper domain name so that it will be like a website.
Conclusion:
Most of the companies are using the PWAs, as there is more growth in mobile users. Most of the web apps built by the companies should focus on PWAs so that these can be adaptable to all kinds of devices and app-like experience to the user.
Nowadays most of the developers are using SPAs. The reason is that when users come to an application, they need the shortest possible wait time so that they can do their work smoothly. It gives a good performance, user experience and client side rendering.
There are some pros and cons in choosing the PWA or SPA.PWA is better than SPA as the performance and reload time is very less when compared to the SPA. Even in the offline we can access and it is more reliable.
References:
