How to use PWA plugin in Vue CLI 3.0

How to use PWA plugin in Vue CLI 3.0

In this post, I’d like to introduce you into PWA world using Vue CLI 3.0

Originally published by Tomasz Żdanuk at https://naturaily.com

What’s the PWA?

According to Google Developers PWA description, Progressive Web Apps is a concept which improves user experiences in web applications, by making them reliable, fast and engaging. During Google I/O ‘17 presentation about the PWA, it was mentioned that in top 1000 mobile apps vs top 1000 mobile web properties, mobile web has almost 3 times more monthly unique visitors than native apps, but even more interesting are statistics about average time spent there. Native apps users spend there more than 20 times more time than mobile web users! Those statistics are crushing! But there is an explanation to that!

Native mobile apps are more engaging to users than web pages. It’s way easier to just tap the icon on the home screen than to type a long URL. Native apps are also designed for mobile purposes, as well as in terms of graphic design, features and technical aspects. Unlike web apps, native apps have push notifications, access to your camera, or mic, but is that still true? No! PWA can that too!

PWA Characteristics

PWA is a mobile-oriented strategy of creating web applications, here’s how Google on their site about PWA described three key PWA characteristics:

  • Reliable,
  • Fast,
  • Engaging.

But what that’s really mean for user?

In my opinion, it means:

  • Accessible offline - to provide reliability,
  • Fast on every network conditions and every device,
  • Installable on your home screen - to be engaging.

More characteristics you can find in Lighthouse and PWA checklist section and across the whole article.

PWA in Vue - the first touch

Vue CLI 3.0 introduced plugin application structure, thanks to that you can easily add PWA support plugin to your app whenever you like.

To add PWA support plugin to your existing Vue CLI 3.0 app, simply type in your console:

vue add @vue/pwa 

Vue CLI generators will create all required files to make your app PWA ready.

When from the start you know that you need PWA in your new app you can use

vue create <app-name> 

and then simply choose in wizard ‘PWA support` option.

When you have your plugin installed or app created, you can find in your app tree files which are crucial in PWA app.

Those files are:

  • manifest.json
  • registerServiceWorker.js
  • and few less relevant files.

I’ll describe in more details the most important files in next sections of this article.

Make your web app installable

One of the ways to make your app more engaging is making it installable. Thanks to that users can have easy access to your site by simple tapping icon on home screen, what is way much faster than typing whole URL. To make it possible, you only need to create and/or fill manifest file. The manifest provides the most crucial information about your application, such as app name, an icon displayed on a home screen and more. The full list of settings you can find in official MDN web docs

Vue CLI 3.0 and PWA plugin would create default manifest.json file for you, but remember to customize it for your needs! Here’s how the default manifest.json file looks like (file is located in /public folder):

{
 "name": "pwa",
 "short_name": "pwa",
 "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"
   }
 ],
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#000000",
 "theme_color": "#4DBA87"
}

PWA template app also will generate a set of icons which will be used to represent your app on mobile devices. Imo, it’s a good reference of what icon sizes you should made to make your app looking good on a home screen.

manifest.json it’s not the only place where you can take a look when making your app installable. Few more tweaks you can make also from vue.config.js file, you can change there features like theme color, MS Tile color, or flag your app as not capable for Apple devices with iOS before 11.3 (you can read more about PWA support on Apple devices in PWA on Apple devices section). For the full list of tweaks you can make in vue.config.js file and example configuration take a look here: link

Service Workers

Service Workers’ is a script that runs in the background and that allows your app to work not only online, but also offline, what is one of the PWA characteristics.

The core feature of service workers used in PWA is its ability to intercept and handle network requests usually done by caching but thanks to the service workers you can do a lot more than only to cache your network requests. By using service workers you can also achieve background sync or push notifications.

To make your ‘Service Workers’ actually work, there are two prerequisites:

1 - Browser support

For a long time, the crucial issue with ‘service workers’ was the lack of support from every browser. Currently, the situation looks much more optimistic and the most popular browsers are supporting SW. You can find more details on Jake Archibald page.

2 - HTTPS

Service Workers are a very powerful thing. It can fabricate and filter your data or hijack connections. That’s why HTTPS is that important.

If you want to read more about Service Worker, I would recommend you to take a deeper look here.

What should we cache and how?

There are only two hard things in Computer Science:
cache invalidation and naming things.

~Phil Karlton

To make your app working offline, it is important to cache proper files and resources in a proper manner. In the case of web application it will be usually:

There is no universal rule what you should cache in your application, so the final decision you have to make on your own despite what’s best for your application.

There is one more decision for you to take in this case: how to cache those files.

Vue CLI 3.0 under the hood is using workbox to operate the service wokers, here are cache strategies available there:

  • cacheFirst
  • Suites best: Fonts, Images
  • networkFirst
  • Suites best: Network Requests
  • staleWhileRevalidate
  • Suites best: JS and CSS files that aren’t precached

Here’s how it can look in Vue Service Worker file, service worker code is quite self-explanatory:

workbox.setConfig({
 debug: false,
});

workbox.precaching.precacheAndRoute([]);

workbox.routing.registerRoute(  /.(?:png|gif|jpg|jpeg|svg)$/,  workbox.strategies.staleWhileRevalidate({    cacheName: 'images',    plugins: [      new workbox.expiration.Plugin({        maxEntries: 60,        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days      }),    ],  }), );

workbox.routing.registerRoute(  new RegExp('https://some-fancy-api.com'),  workbox.strategies.networkFirst({    cacheName: 'api',  }), );

workbox.routing.registerRoute(  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),  workbox.strategies.cacheFirst({    cacheName: 'googleapis',    plugins: [      new workbox.expiration.Plugin({        maxEntries: 30,      }),    ],  }), );

Remeber to register your Service Worker in the app. Vue CLI created the registerServiceWorker file for you, and here’s how it’s looks:

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {  register(${process.env.BASE_URL}service-worker.js, {    ready() {      console.log('App is being served from cache by a service worker.\n' +        'For more details, visit https://goo.gl/AFskqB');    },    cached() {      console.log('Content has been cached for offline use.');    },    updated() {      console.log('New content is available; please refresh.');    },    offline() {      console.log('No internet connection found. App is running in offline mode.');    },    error(error) {      console.error('Error during service worker registration:', error);    },  }); }

NOTE: Remember to give the same name for Service worker file as it stands in registerServiceWorker. In this case service-worker.js.

For more information about caching using Workbox take a look here.

Hardware access

One of the biggest advantages of mobile native apps is the accessibility to the hardware features such as camera, geolocation, Bluetooth, etc., but nowadays even web application can have an access to the many native features of your mobile phone or laptop. Of course, a lot depends of your web browser, and native mobile apps still will have a little bit better access, but web apps have nothing to be ashamed of.

If you are interested in What Web Can Do Today you should visit this link.

I will skip part of how to implement Camera or Bluetooth access in your Vue app, because that’s not the case of this article and the web is full of better written resources on how to get into those native features.

PWA on Apple devices

PWA is technology widely supported by Google, thanks to that it works without any problems on Android devices but it’s a little bit more problematic on iOS devices.

Apple has already showed the PWA support on iOS devices, so it’s only the matter of time. They still have a lot of work ahead of them to be as good as Google in this case.

The iOS 11.3 version was a ray of hope for PWA. This update comes with support for fundamental PWA features on Apple mobile devices, like service workers and app manifest files.

Even with that, developing an app for an Apple device needs a lot more focus from the developer than it is necessary for an Android app. There are still problems with a splash screen, home screen buttons, navigation, data persistence, etc.

Some of these problems were hacked by Netguru developers, you can read more about that here.

Generating a splash screen graphics will be a lot easier with Appscope tool.

Lighthouse and PWA checklist

PWA is supported by Google, they released tools and notes, which should help you write your perfect PWA.

Lighthouse is a built-in Chrome plugin which allows you to audit your application from different angles, one of them is also PWA. Lighthouse PWA audit will automatically check for you features like:

  • Service worker registration,
  • Splash screen configuration,
  • Respond when site is offline,
  • HTTPS presence
  • Speed on 3G connection
  • and a lot more

Lighthouse PWA audit will check only required part of baseline PWA Checklist, but even there are things which you should check manually like: Site works cross-browser, Each page has a URL or Page transition don’t feel like they block on the network connection.

Conclusion

PWA still have a long way to come, but it’s on very good track!

I hope the Apple will soon fully support PWA apps because that should help PWA in becoming better and more popular technology. Thanks to the Vue CLI 3.0, building PWA apps is as easy as pie, and thanks to the plugin structure you can easily inclue PWA to your project on every stage of the development.

All what you have to worry about is preparing graphics and making decisions on what and how you want to cache, Vue PWA plugin will do the dirty work for you.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Build a Progressive Web App In VueJs

Build a CMS with Laravel and Vue

Beginner’s Guide to Vue.js

How to build a Progressive Web Apps

Build a Progressive Web App In VueJs

Build Progressive Web Apps with React

The State of Progressive Web Apps - The State of the Web

A full-stack solution for fast PWA development



vue-js pwa web-development javascript mobile-apps

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

ECommerce Mobile App Development | Ecommerce Mobile App Development Services

We are leading ecommerce mobile application development company. Hire our ecommerce mobile app developer for your custom Ecommerce project at competitive rates. **Know about [Top ECommerce Mobile App Development...

Mobile App development Company in Melbourne Australia

If you are seeking online **[mobile app development Melbourne Australia](http://www.efrog.com.au/ "mobile app development Melbourne Australia")**? Then Efrog Pty Ltd is the best online choice for you we are an award-winning company in Australia....

Top Mobile App Development Company in Texas

AppClues Studio is a Top Mobile App Development Company in Texas. We offer comprehensive mobile app development services for businesses that are ready to tackle innovation head-on. We specialize in building mobile apps that leverage IoT, AR/VR...

Top Mobile App Development Company in Washington

AppClues Studio is an experienced mobile app development company in Washington. We have an experienced team of mobile app developers who are proficient in developing mobile apps for Android & iOS using state-of-the-art mobile app development...

Mobile App Development Agency in Marlborough | AppClues Studio

Get Custom Mobile App Developed by The Leading Mobile Application Development Company in Marlborough– AppClues Studio. Our Highly Skilled Team of Mobile App Developers Can Create Feature-rich Native Applications for Your Business in less time.