PWA in VueJS

One recent survey shows that people don’t want any more apps on their phone. If you look on your phone you will find there are dozen apps that you do not use regularly and some of them only work good when you have internet connection.
And it is also noticed that most of app have fully responsive website which provide same functionality as the webapp. Average size of native app is between 20-200MB, and they need to be updated quite often. What if a website can do that and much more than a Native app? This is where Progressive Web Apps (PWA) comes in picture. On a side note,Frances Berriman and Alex Russell came up with a concept called Progressive Web Apps.

Progressive web apps combine everything that is great about a native mobile application with everything that is great about a mobile website. It is progressive because it is constantly progressing. It uses modern web capabilities to deliver an app-like experience to users. These apps are deployed to servers, accessible through URLs, and indexed by search engines.
PWAs benefit from the modern Web technological innovations (Service Workers, Native APIs, JS frameworks) and raise web application quality standard. Progressive Web Apps are within some KBs and are automatically updated. Thanks to service workers.

Some of the features of Progressive app which attracts users are.

  • Reliablility: Service workers enables an app to load instantly regardless of the network state.
  • Fast: Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging: Feel like a natural app on the device, with an immersive user experience.

There are a lot of things that developers need to consider when building a PWA, your app must be Progressive, Responsive, App-like, Fresh with data, Safe, Discoverable on web, Re-engageable, Installable so that it Allow users to “keep”, Linkable so easily able to share, Offline Support Apps should be able to work offline. Whether that be displaying a proper “offline” message or caching app data for display purpose,

Some Popular Companies that Do Progressive Web Apps

  • Ola
  • Flipkart
  • pinterest
  • Twitter
  • Alibaba
  • BookMyShow
  • MakeMyTrip
  • OLX
  • The Weather Channel
  • Forbes
  • JioCinema
  • Trivago

So lets start with our PWA app, Actually we already have a vue js app. you can know more about it from Here. We will continue with the same app add PWA functionality.

Creating pwa from existing app

All web applications that provides a valid manifest.json file in their index.html are installable. The manifest.json file is the only file that every extension using WebExtension APIs must contain. Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension’s functionality, such as background scripts, content scripts, and browser actions.

The block below contains shows the basic syntax for some common manifest keys.

We can customize a few things here  such as names, icon, display, background_color etc. A list of manifest option are listed here Web App Manifest

As we are adding PWA functionality in our existing app we will use @nuxtjs-pwa,
so lets install manifest in our application.

$ npm i @nuxtjs/pwa

Now edit your nuxt.config.js file to add pwa module

modules: [
         ...
        '@nuxtjs/pwa',
    ],

Here’s the trick we don’t need to create manifest.json. We can pass options to manifest section in nuxt.config.js to override defaults.

manifest: {
  name: 'My Awesome App',
  lang: 'fa'
}

here’s how our manifest looks in browser.

We will also add viewport in application, specifying viewport. You can read more about it on your favourite search engine, but for now, if you reload the site (either on your Android device, or under Developer Tools) you’ll see the webpage will be correctly sized to the page.
As we have nuxt we will add this to nuxt.config.js file.

Thats it, now to exposes our localhost to the web, we will use ngrock
So lets Install

$ npm install ngrok -g

lets start our local server and run the app

$ npm run dev

now expose the local server

 ngrok http 8080 // replace 8080 with your app port

this will out put

 ngrok by @inconshreveable                                                                                                                                               (Ctrl+C to quit)

Session Status                online
Session Expires               4 hours, 36 minutes
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://c362641e.ngrok.io -> localhost:8080
Forwarding                    https://c362641e.ngrok.io -> localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              7       0       0.00    0.00    5.57    12.12

Here “Forwarding” is the your ngrok web url in our case https://c362641e.ngrok.io.
Now you can add it to your device desktop!.

References:
All you need to know about Progressive Web App
PWA Module
manifest.json
Progressive Web Apps
Building PWAs with Vue.js



Leave a Reply