What is a PWA and why should we use it?

Utilising VueJS to deliver reliable, responsive and engaging PWA’s

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:

    Screenshot of an example manifest.json file
  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

    Screenshot of the install icon prompt that shows up in your web browser
  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:

Screenshot of what happens when you run 'Vue UI' in Command Line

The following interface will be presented and you can begin creating your VueJS project.

Screenshot of the Vue Project Dashboard
  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.

Once the project has been created, you will be presented with the following interface
Screenshot of the Vue Project Dashboard

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.

How to add your PWA app to your homescreen on mobile

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

Want more?

View the Blog

Sydney
Level 6
9 Hunter Street
Sydney NSW 2000
Phone 02 8188 5959
Melbourne
Level 2
696 Bourke St
Melbourne VIC 3000
Phone 03 8566 8819
Phone 02 8188 5959
ABN 15 120 572 750   ·   © 2020 Switch

Subscribe Now

Sign up to our newsletter to gain access to more articles like this one

No thanks