Utilising VueJS to deliver reliable, responsive and engaging PWA’s
This article will describe how we utilise the VueJS framework to deliver reliable, responsive and engaging Progressive Web Applications for both our Sitecore and non Sitecore clients.
There are a number of prerequisites to allow a web browser to identify a Progressive Web Application. This will in turn allow the users to install the application on their mobile devices. These prerequisites will also allow the website to prompt the user with an installation notification when they first access the website.
The following are the technical requirements for a Progressive Web Application:
For the CSS gurus out there, this is your time to shine! Solid stylesheets are required to deliver engaging content via your progressive web applications.
Sit within the public folder of your application. The manifest tells the web browser how the application is configured. It will include the application name, icons to use and display modes for the application (standalone,full screen, minimal UI, browser). Here is an example of what that would look like:
When developing, you may force-install your application without HTTPS. However, for the browser to detect if an application is installable, SSL is required. This will prompt the user with the install button in the address bar
Every route (or URL) on your website must be unique. In addition, individual pages must all be deep linkable via URLs
If your application needs to work offline via cache, a service worker is required, otherwise, it is not necessary. For some applications, particularly ones that are dependent on API interaction; which invokes live-data, sevice workers can be excluded.
The following article details how to install Vue CLI onto your local computer. Once installed, simply run the following command:
The following interface will be presented and you can begin creating your VueJS project.
From the interface, navigate to Configuration → PWA. The PWA configuration page will allow you to configure the application”s manifest.json (one of the prerequisites mentioned above).
Let”s go over the options
Defaulted to GenerateSW (default) - This option will automatically create a service worker implementation in your code base. Use this option for now.
This will be mapped to the name property in the manifest.json. It is just a string, and will appear in the application”s title bar.
You can choose your branding here using the colour picker.
When the application loads, this will be your splash background color.
The title bar background colour.
on iOS, there are three options; default, black and black-translucent.
This is the value for cross-origin attribute within the manifest link tag in the generated HTML. You may be required to set this if your PWA is sitting behind an authentication proxy.
Once configured, click on Save changes. You can view these changes (using an IDE of your choice) within the vue.config.js file under the root directory.
From the Vue User Interface, the application can be served in development mode. To do this, navigate to Tasks → Serve → Run task → Open app
Since we do not have HTTPS, we can force-install the application through the browser options menu like so:
Once installed, we will be able to see the application in the Microsoft Windows start menu or the home screen of the mobile devices.
At Switch, we deliver solutions which include the capability to run as a Progressive Web Application for both our Sitecore and non-Sitecore customers. This is to ensure that we provide a variety of ways for viewing their beautifully designed websites.
Whilst we have shown an example running on a VueJS application, there are many different frameworks available which support Progressive Web Application.
To summarise; Progressive web applications will require specific albeit minimal configuration to run. Hopefully, after reading this article, you can all begin working on PWAs of your own.