Progressive Web Applications (PWA) are a solution that addresses the increased use of native apps, mainly by smartphone technologies. Native apps are software programs developed for use on a particular device or operating system such as Android and iOS. PWAs combine the properties of native apps with traditional web technology.
This has become necessary because native apps are limited to the platforms they are made for. They are also limited by the cost of development and maintenance. Thus, native apps, though useful, may not adequately meet the diverse needs of various businesses.
What is a Progressive Web Application?
PWAs are web apps that use emerging web browser APIs and features. They use a traditional progressive enhancement strategy to bring a native-like user experience to cross-platform web applications. Basically, a PWA is a website or web app that you can share to your home screen and use like a native app.
PWAs exist as a modern fusion between your normal responsive website and a native app. They are not only supported by SEO through search engine links; they also offer native app-like functionalities such as: working offline, sending push notifications and accessing the device hardware, such as a camera.
Some of the most notable PWAs used today include: Aliexpress, Flipkart, Twitter Lite, Forbes, Pinterest, Instagram Lite, etc.
Features and Benefits of PWAs
- Fast: PWAs are relentlessly fast. They quickly respond to user interactions and you can smoothly scroll through pages without being interrupted. They also work offline so the user can access the information they need without internet access.
- Secure: The use of the HTTPS protocol ensures safety of input data and protection of the PWA content from third parties.
- Reliable: PWAs have instant loading time once the app has been installed.
- User-friendly and Engaging: PWAs allow users to install the website as an icon on the home screen of their phones and this app shell increases user-engagement. They can also push notifications to re-engage the users. PWAs are not limited to any specific platform or device.
- Cost-effective: PWA are less costly than native apps. They can be built using well-known tools such as HTML, CSS and JavaScript. Thus, you do not need to employ an iOS or an Android developer to build a PWA.
- Linkable: easily shared via URL and doesn’t require complex installation.
- SEO-Friendly: Since PWAs are linkable, they can be easily searched on the search engines, which broadens their use.
- Convenient to update: PWAs are not on the Google market or App store market. This means that as a developer, you have more freedom to release updates whenever you want, without undergoing the standard Google or app store approval processes.
Downsides of Using PWAs
- Limited Browser support: Google chrome, opera and Samsung’s Android browser support PWAs but IE and Edge don’t.
- Limited in functions: PWA doesn’t support any hardware that is not supported by HTML.
- Cross-application authentication support: as a web page, PWA doesn’t have a capability to communicate with other apps installed, such as Facebook, Google login, etc.
The Building Blocks for a PWA
- A service worker: Service worker is a core PWA technology in the form of a JavaScript file that your browser runs in the background. It is separate from a web page and is directly responsible for handling network requests and the core PWA features, such as push notifications or background synchronization.
- A web app manifest: This is a JSON file that communicates with the browser about the web app and how it should behave when installed on the user’s device. The manifest web app file also contains the app description, icons, name, display, and colors. It is responsible for prompting the user to “Add to Home Screen.”
- HTTPS: For the service worker to provide the offline functionality and fast performance, the app should be running on a secure environment. The HTTPS protocol ensures protection of the web app by preventing third parties from overriding your website using a malicious service worker.
Building a PWA Using Vue.js From Scratch
Prerequisites
Knowledge of HTML, JavaScript and Vue.js is needed to follow this tutorial.
Steps
1. Install Vue CLI : On your terminal window, install Vue CLI using this command:
npm install -g @vue.cli
If you prefer using Yarn, go ahead and type:
yarn global add @vue/cli
2. Check the version of the Vue CLI installed by typing this
vue --version
For this post, I am using version 3+, so you can upgrade to the latest if your version is less than 3, by using the steps above.
3. Create your PWA app
vue create <app name>
On create command, you will be prompted to choose, select the “Manually select features” option. You will then see a screen with more options, be sure to choose the ‘Progressive Web App support’ option, as shown below:
Once you select all other features you need for your app, the CLI will install all the dependencies and scaffold your project.
4. Compile and run your application
To test your app, create a production distribution by running this command:
npm run build
Run the app distribution locally on your machine using the following command:
npm run serve
Once the compilation is successful, open the application on your browser using any of the hyperlinks provided.You will see an output with the default Vue.js page that looks like this:
Auditing your PWA
Always make sure that your app meets the PWA standards during your development by adhering to the building blocks stated above.
To audit the performance of your PWA, you can use Google’s Lighthouse, which is a Chrome extension tool for testing and auditing PWAs. Inspect element by opening the browser’s dev tools then click on the audits tab. You will see a screen like this:
Click on the ‘Generate report’ button to see the details of your app audits. This action will simulate a mobile device emulator on the browser to run through the various tests on your app.
The final score will give you suggestions on how to improve different features of your app.
To change the content of your application, open the directory in your preferred IDE and navigate through. Keep building progressively!
If you have an existing site that you’d like to convert into a progressive application, you will find this post very useful.
Additional Resources:
- Vue.js Dev tools
- Google Lighthouse and PWA Development
- Download the source code from this repository
