Progressive Web Apps are not losing their popularity – the market is constantly filled with new representatives of this solution. They allow you to provide users with a native experience without being an app of this type but a light web-based invention. They are fast regardless of connection quality and even work offline. They can run in the background and be installed on your home screen. They are also cross-platform based on a web browser, and therefore very universal.
On the other hand, the modern high-speed Vue.js is also gaining popularity recently. Despite its simplicity and relatively short presence on the market, it is highly functional. Therefore, more and more talk about combining the two to create an ultimate combination of features and advantages. But, in fact, not everyone is aware that it is possible or how to do it. So here’s a handful of information on building a PWA in vue.js.
Overview of PWA
Steve Jobs initially introduced the Progressive Web Apps concept at the iPhone launch in 2007. Apple’s developer then announced that web applications would be the standard application format for the iPhone. After many complications and a rather cold approval of the concept of web applications, most of the apps were moved to the App Store, and the idea died down a bit. However, over the years, the dynamic website design segment has grown so much that PWA development has become more accessible. In 2015, Google developers officially used “progressive web applications” to describe applications that take advantage of new features supported by modern browsers.
PWA we know today is a type of application built using popular web technologies, including HTML, CSS and JavaScript. So PWA is a kind of website. It is designed to work on any platform that uses a standards-compliant browser, including desktop and mobile devices. It does not require separate bundling or distribution. Developers can publish an application to the web after verifying that it meets the basic installation requirements. After publication, users will be able to add the application to their home screen. It is also possible to publish a PWA on the app store, but this is optional. Many publishers do this because their applications are better searchable by users.
What is Vue.js?
Vue.js is a front-end open source model-view-view-model JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and first published in 2014. It is prized for its lightness and simplicity and therefore has a low entry threshold. Out of the box does not have a lot of functions but is very easily expandable. For extensive applications requiring advanced features, many officially maintained support libraries and packages are to be used.
Vue.js features a progressively adaptable architecture that focuses on declarative rendering and component composing. The core library concentrates only on the view layer. At the heart of Vue.js is a system that allows you to render data to the DOM using simple template syntax declaratively. Vue.js also lets you extend HTML with HTML attributes called directives that offer functionality to HTML applications and come as built-in or user-defined directives. Vue.js is a framework cherished by developers, and it is created with them in mind. It contains many tools that facilitate and shorten many tasks, including starting a new project using Vue-CLI or Vue GUI. It is also valued for its refined documentation, community support, and accessibility.
Why use Vue.js to build a PWA?
The combination of Vue.js and PWA features gives a highly performant, light and fast web solution. Although Vue is primarily intended for single-page apps, it can be modified to be progressive web apps quite simply and conveniently. The framework itself is light and straightforward. The idea behind programming with Vue.js is to get good results with less code. In addition, it supports working with components that extend essential HTML elements to encapsulate reusable code.
Moreover, Vue.js is a great, highly customizable tool with all its features easily accessible. The framework is designed to offer fewer constraints and more flexibility in project execution. Developers can easily name the feature whatever they like, and each segment may have different features, making it easy to customize the application to meet individual requirements. Maintenance is also easier when choosing Vue as the framework makes the upgrade process more accessible. New releases, including major updates, are designed to be as backward compatible as possible. Therefore, after building and deploying the application, it will be easier to stay updated with bug fixes, improvements or new features.
How to start a PWA with Vue.js?
Actually, you need to start by building an application in Vue.js. After creating the basics, you will add PWA elements and expand the application as required.
You can start by creating a workspace, i.e. the appropriate directory for application files. Then, before writing code, some configuration steps are to be done, such as creating a structure to organize your source and distribution code. Of course, it depends a lot on the developer’s preferences and how to make this structure – for example, you can create two subdirectories in the leading directory: lib and src and put the index.html file there. Inside the first one is the code of the Vue library, the second directory contains one file: app.js.
Another pre-setup task is to initialize your project with NPM and install dependencies. Then you proceed to install the build and external dependencies. Finally, you also need to configure the web package, which will allow you to build and preview the app. After this configuration, you can start adding the application code.
You can also get a ready starter pack by installing Vue CLI. You will get a ready directory, with which there will also be some items required to create the PWA, including the manifest.json file, Service Worker registration, icons, etc. In addition, you have several files in your project like index.html, which is what the browser will look for when loaded, main.js – the entry point for the app that takes care of initialising Vue, specifying the base template (App.vue), and registering the service worker. The following steps will be to add the appropriate lines of code as well as any PWA-specific elements.
Is it possible to convert Vue App into a PWA?
Having a single-page application built in Vue.js, you can turn it into a functional PWA. It requires adding a few elements, including those needed to determine that the application is indeed PWA. So the first step is to create a web manifest – you need to make the manifest.json file at the root of your project.
The web manifest describes the application in terms of metadata. It must contain at least five key properties:
- name
- short_name
- start_url
- display with a value of standalone or fullscreen
- an icon at least 144×144 large in png format.
Next, you just need to open index.html and then add a link tag to it, pointing in the direction of the manifest.json file. Then, you should also add Meta tags (pieces of text or notes that can aptly express the page’s entire content) that will make PWA installable on various browsers.
Next, you need to use Service Workers to cache your resources and allow push notifications to be sent. Service Workers is a class of web workers that is actually a JavaScript file that can run independently of the main browser thread. Typically a separate Service Worker is required for each job, which can be a bit tedious. You can use sw-precache to automate this process. The generated Service Worker must also be registered. The easiest way to do this is to register the code in the main.js file. You must use the navigator API for this as it contains a service worker property combined with a register method. Service workers are only generated when the application is in production mode, so you also need to ensure that your code only runs when the application is in production mode. It will also be helpful to perform a Service Worker unregister, which is useful when you are still developing your application and don’t want Service Worker to cache anything. This new service worker creation will overwrite the original one created in production mode.
What are the minimum PWA requirements?
Each progressive web application is designed to run in any browser compatible with web standards. Thanks to its operation in the browser and not directly on the user’s device, it is a cross-platform application, more universal than native.
The basic requirements for a website to be considered a progressive web app, as described by Google engineer Alex Russell, are:
- Secure source origin – PWAs must be supported by TLS displays and green padlock (no mixed content active) and supported by HTTPS protocol to ensure security, privacy, and authenticity.
- Provide offline loading – This will enable Service Workers to be registered. PWAs must use Service Worker processes to create programmable content caches. These caches can explicitly fetch content before using it for the first time and explicitly discard it when it is no longer needed. It makes it easier to access websites offline and on networks with poor connection quality.
- Refer to the Web App Manifest – thanks to the Manifest, PWAs can be easily shared via a URL detected by a search engine and do not require complicated installation. In addition, they support native interactions and navigation, including adding to the home screen.
Conclusion
We have shown some general basics of PWA creation in Vue.js. We hope this has increased your awareness regarding the development of this kind of application in Vue. Such a combination is not only feasible but can bring exceptional results for your business. So if you are intrigued by this framework and are thinking about creating your own web app, contact us. Our specialists will be happy to estimate your project, advise you on which development path to choose, and develop a reliable, robust and profitable application.
February 1, 2022
