PWA Implementation! Get EXITED...

Hello guys, as per my latest article we have talked about PWA (Progressive web apps), so today we will implement progressive web app via Vuejs.

The Baseline

Here we have to explain what are the baselines simply before implementing this technique.

• HTTPS

  • It is used for securing communication over a computer network, and is widely used over the Internet

• Web App Manifest

  • Simple JSON file that tells the browser about your web application and how it should act when 'installed' on the user's mobile device or desktop.

• Service Worker

  • A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. ... Before service worker, there was another API that gave users an offline experience on the web called AppCache. To get to know more about SW refer to google

How to get started ?

We will use Vuejs2 framework and npm so you should be familiar with those technologies.

Getting Started !

We will divide our article to 2 parts, the first is implementing manifest and the second is implementing service worker.

1. Manifest

      1. Install fresh version of Vuejs via vue-cli

      2. My recommended settings [not recommended to select default PWA support of vuejs]

      3. Now we have a fresh version of vuejs project to build our manifest configurations

            a. Create a file with the name “manifest.json” inside a public folder

            b. Include this file in “index.html” in head

                    i. 

            c. Now copy the following code https://jpst.it/1D_fU into your manifest.json file

            d. Your file will look like:

             e. Now let me explain what every property means:

Property	Description
Short_name / Name	Short_name is used on the user's home screen, launcher, or other places where space may be limited. name is used in the app install prompt.
Icons	When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. NOTE: include a 192x192 pixel icon and a 512x512 pixel icon. Chrome will automatically scale the icon for the device. If you'd prefer to scale your own icons and adjust them for pixel-perfection, provide icons in increments of 48dp.
Start_url	The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. Your start_url should direct the user straight into your app, rather than a product landing page. Think about what the user will want to do once they open your app, and place them there. By the way it’s recommended to be your home page.
Scope	The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope.
Background_color	The background_color property is used on the splash screen and navbar color inside chrome when the application is first launched.
Display	You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Or games may want to go completely full screen. The recommended option is standalone Other available options are: Fullscreen:Opens the web application without any browser UI and takes up the entirety of the available display area. Standalone: Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar, etc. Minimal-ui: This mode is similar to fullscreen, but provides the user with some means to access a minimal set of UI elements for controlling navigation (i.e., back, forward, reload, etc). Note: Only supported by Chrome on mobile. Browser: A standard browser experience.
Theme_color	The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.

 

Recommended to read about web fundamentals .

         f. To verify what we did you can use the Manifest tab on the Application panel of Chrome DevTools.

Let’s check on the mobile phone...

1. Note the bar below

2. Click on it, then a popup will appear asking you to add a shortcut on your home screen

3. Check your home

4. Then launch it

To sum up the Manifest part...

Chrome reads your manifest file and generate the launch with your configurations that make the user feel like using a native mobile app. For sure I recommend to use vue-router with your app to make the user really experience the native usage with no refresh or page reload.

Now it’s time to talk about the Big Boss, the Service Worker

1. Now let’s start with the Service worker

        a. Install https://www.npmjs.com/package/sw-precache-webpack-plugin

        b. As a part of Vuejs, if you want to modify the default properties of vuejs and web pack … etc you should modify them in “vue.config.js”, so we will create a new file in the root of vue js project with name vue.config.js

        c. In first line we will import SWPrecacheWebpackPlugin

       d. Then will export our configurations and add SWPrecacheWebpackPlugin to webpack plugins. And will found our file with this look:  [https://jpst.it/1D-4o]

          e. Now we have to set up our configuration:

1. So let’s explain the expressions we've mentioned so far:

Property	Description
Cached	It has your application’s name
File name	The file created after building, it contains the configurations for service worker
Minify	If the case is true, it will minify your assets [recommended to be true]
Dynamic Url To Dependencies	This contains a list of routes you need to be cached on the user’s device to be able to open this urls while he isn’t connected to internet, and each item should contain key and value, the key will be the url and the value will contain unique key that identify this error so everytime you edit this url you need to modify this value, in my case i prefer to add something like v1, v2 …. etc
Runtime Caching	This contains an array of online assets that’s not served through your host to be able to cache them in offline mode and this arraylist contains 2 keys url Pattern: the regular expression of urls that need to be cached. Handler:tells the service provider to check cache, and there’s no need to get this file from an online resource

 

3. Our current file now turned into this look https://jpst.it/1D-jH

4. Now we need to deploy our project to server. If you’re not familiar with deploy vuejs app please visit deployment instructions.

       a. NOTE: service worker required https

Now let’s try with an offline mode:

Please note where are the sources loaded!

Now let say goodbye for this endless hassle!!!

Conclusion

 

Every request our app makes triggers a fetch event. This event is catched by our Service Worker who choose to retrieve from cache or fetch from the network depend on your selected strategy. As per our code configurations we select cache first with remotely assets but maybe you can use other strategy like selecting network first.  To know more about cache strategy refer to google .

You can refer to our source code on github.