Progressive Web Apps with vue3

What is PWA?

PWA is a set of features that bring existing mobile features to the web. Its considered that mobile specific feature could help in user retention. This is the main reason why PWA is gaining popularity.

If the mobile experience is added to a web app it eliminates the need to maintain different code bases of same the same user experience written in multiple languages for example: swift for apple apps, java for android apps. This overhead could get costly really quickly.

PWA, applications can be written in just HTML, CSS & JavaScript. There are several api’s that can be leveraged to get mobile features on browsers.

What are the basic Mobile features that could help in user retention?

Background Sync
Push Notifications
Geolocation
Access to hardware
Open apps from device homepage
Offers Offline Support

PWA must include following characteristics:

App must be Capable of utilizing features of any device
App must be Reliable in case user interacts with the app with no connectivity. All actions taken during such time would be uploaded after app comes back online
App must be installable

SPA vs PWA

SPA will dynamically updated the current page with most recent data without explicit page reloads.

PWA is set mobile features added to any web app

Any site with mobile features and PWA characteristics is a progressive web app.

Checklist for Installable Web App

App must not be already installed on user device
User must be engaged with the app prior to prompting for the app installation
Web app must be served over HTTPS this is important for user safety
App must contain a Manifest file, this is a configuration file which includes a json object containing app information for example: app name, icon, orientation etc.
A service worker must be registered to perform background tasks

PWA setup with vue3

Step 1: Adding plugin to vue cli

start vue cli: $ vue ui

Step 2: Install vue cli-plugin-pwa developed by vuejs

Make sure to select cli-plugin-pwa developed by vuejs see screenshot. Successful installation of the plugin will result in addition of the new files in vue project directory.

registerServiceWorker.js is imported in apps root js file. This file will make our app installable.
Project public directory now also includes icon files in public > img > icons. These icon files will be used by PWA in variety of devices. In our application these should be updated with project icon.

Step 3: Build manifest file

PWA plugin will not generated the manifest file until the project is build. manifest files are cached and plugin developers have decided to ship the manifest file with production build only. Run the build task using vue cli see screenshot.

To preview the application we need setup a server manually. For this we can install live-server extension in VSCODE.

Debugging live-server issues:

Manifest: Line: 1, column: 1, Syntax error

If your manifest file is at root level (where your index.html is) 
you can reference to it like the following in the <head> tag of your index.html file:

<link rel="manifest"  href="manifest.json"/>

ERROR: Failed to load resource: the server responded with a status of 404 (Not Found)
app.c2115832.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found)
chunk-vendors.fb29d323.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found)
app.c2115832.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found)
app.8d0d60ac.css:1 
Failed to load resource: the server responded with a status
 of 404 (Not Found)

If you are receiving 404 errors add following to your 
vue.config.js file

publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
 
This should resolve 404 errors when running live server.

Step 4: Serving manifest file locally

manifest.json in dist folder generated by plugin after app build

{
  "name": "app_name", <-- application name provided from package.json
  "short_name": "myApp", <-- optional used when space limitation is imposed from device
  "theme_color": "#4DBA87", <-- application theme color
  "icons": [
    { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "./img/icons/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./img/icons/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".", <-- application url after user clicks on the app
  "display": "standalone", <-- creates the illusion that app is not opened from browser 
  "background_color": "#000000" <-- app background color
}

To verify manifest file is loaded in the browser look for link tag in dist > index.html

<link rel="manifest" href="/manifest.json" />

We can also verify that browser is loading the manifest file by using live-server extension that we installed earlier.

To serve the manifest file using live server extension we must be in /dist directory. right click on index.html and select the option to ‘open with live server’ see screenshot.

We can verify that manifest file is loaded into the browser by opening developer tools. Click on Application tab and select the Manifest option see screenshot. You can view the computed manifest json inside the browser.

Google chromes lighthouse extension can be used to verify if we can install the app using generated manifest file. Generated report will give this app near perfect score and confirm that our app can be installed.

Step 5: configure the manifest file

vue pwa plugin configuration documentation : https://cli.vuejs.org/core-plugins/pwa.html

// vue.config.js these changes will overide default manifest.json content
module.exports = {
  pwa: {
    name: 'My First App',
    themeColor: '#7985cb',
    manifestOptions: {
      short_name: 'myApp',
    },
  },
};

Step 6: Offline support with service worker

Service worker is a javascript file that runs in the main application background. Service worker can run simultaneously with the app. Service workers can be used to send push notification, caching files and syncing application in the background.

Service Workers can not access the DOM so we can not perform any app element level updates. Service workers has limited browser support. caniuseit check.

Service worker will allow us to cache the app so it can be accessed offline.

Cacheing with Workbox

Workbox is a library that bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers.

vue cli-plugin-pwa plugin uses workbox behind the scenes. see screenshot.

workbox does not cache data requested using api’s.

keep dabbling…

Leave a comment Cancel reply