What is a PWA and why should we use it?

Some time ago, the Switch team in our Sydney office spoke about the What and Why of Progressive Web Applications. Since then, there have been advances in the area of web apps. JavaScript frameworks have been developed and refined to allow us to create and deploy Progressive web applications with ease.

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.

The Setup

VueJS, like many other JavaScript frameworks comes with an intuitive CLI (Command-line Interface). This will provide a guide on how to configure and enable Progressive Web Applications. Alternatively, the Vue user interface can be used to easily set up your Progressive Web Application.

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:

1. Mobile Responsive Website

   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.

   
   

2. Application manifest.json

   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:

   
   

3. A Secure Connection (HTTPS)

   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

   
   

4. Deep Linking

   Every route (or URL) on your website must be unique. In addition, individual pages must all be deep linkable via URLs

   
   

5. Service Worker

   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.

   
   

Using Vue UI (Vue CLI)

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.

1. Click on ‘Create a new project here’.
2. Insert a Project folder name.
3. Select a package manager of your choice, in this example npm is in use.
4. Overwrite target folder if it exists (toggle this if you need to)
5. Scaffold project without beginner instructions (toggle this if you are familiar with VueJS)
6. Initialise git repository (recommended)
7. Click next
8. Choose ‘Manual’ to manually select features to install along with your application
9. Features
   • Typescript (toggle on if you are using Typescript)
   • Progressive Web App (PWA) Support - Toggle on
   • Router - Toggle on if you are working with a Single Page application that requires its own routing and would like dynamic pages.
   • VueX - Application state management - Toggle this on if you would like to utilise local storage for your application
   • CSS Pre-processors - Toggle on if you use Sass, Less or Stylus
   • Linter / Formatter - Toggled on by default
   • Unit testing - Toggled off by default
   • E2E testing - Toggled off by default
   • Use config files - Toggled on if you do not want to use package.json
10. Click Next,
11. If you toggle on for CSS Preprocessors, select your pre-processor. In this example, node-sass will be used.
12. If you toggle on for Linter / Formatting, choose your formatter. In this example, ESLint + Prettier will be used.
13. Lint features
    • Toggle on for Lint on save
    • Toggle off for Lint and fix on commit
14. Click Create Project and you may choose to save the pre-set for reuse later on if you wish.

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

• Plugin mode

  Defaulted to GenerateSW (default) - This option will automatically create a service worker implementation in your code base. Use this option for now.

• App Name

  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.

• Theme color

  You can choose your branding here using the colour picker.

• Splash background color

  When the application loads, this will be your splash background color.

• Window app title color

  The title bar background colour.

• Apple mobile status bar style

  on iOS, there are three options; default, black and black-translucent.

• Attribute value

  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.

Using your Progressive Web Application for the first time

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.

To conclude…

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.

Happy coding!

— Ez Hafiz