Progressive web applications are the future. And more and more big companies are starting playing with them (such as Twitter: https://mobile.twitter.com/).
Imagine a Web Application that you can browse in the subway, that keeps engaging its user through notifications, up-to-date data and that offers app-like navigation, and you get an overview of PWAs capabilities.
A Progressive Web Application (PWA) is a web application that offers an app-like user experience. PWAs benefit from the modern Web technological innovations (Service Workers, Native APIs, JS frameworks) and raise web application quality standard.
If you want to learn more about PWAs, please visit this great Google developer page.
Look at the following PWA ! It looks like a native app, doesn’t it?
From the developer point of view, PWAs have huge plus on native applications. It’s basically a website, so:
you can write them with any framework you want;
one code to rule them all: it is cross-platform and cross-devices (the code is executed by user’s browser);
easy to ship: no need to download it through a Store.
However, in early 2017, PWAs still face some restrictions:
Safari does not support some basic PWAs features, such as Service workers, but Apple seems to be working on it;
some native functions are still not supported: for more information, see this page What web can do.
This tutorial aims to create a basic but complete progressive web application with VueJS and Webpack, from scratch. Our application will meet all the requirements announced in introduction: progressive, responsive, connectivity independent, etc. I want to give you an overview of what can be achieved with PWAs: fluid native-like application, offline behaviors, native features interface, push notifications.
To keep things challenging, we are going to build a cat picture messaging app: CropChat! Cropchat users will be able to read a main flow of cat pictures, open them to view details and post new cat pictures (first from internet, then from device drive or camera).
The tutorial will be split in several parts, that will be published successively:
[Part 5] Access device drive to upload pictures
[Part 6] Implement push notifications
[Part 7] Access device location
Our Progressive Web Application is based on modern components you are going to like!
Vue-Router: handles the routing of the SPA
Service Worker: handles offline mode and keeps data up-to-date
Let’s start with part 1!
If you are not familiar with VueJS 2, I strongly recommend that you take a look at the official tutorial
We are going to use Vue-cli to scaffold our application:
npm install -g vue-cli
Vue-cli comes along with a few templates. We will choose pwa template. Vue-cli is going to create a dummy VueJS application with Webpack, vue-loader (hot reload!), a proper manifest file and basic offline support through service workers.
vue init pwa cropchat
You will be asked a few questions. Here is the configuration I used:
? Project name cropchat ? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) cropchat ? Project description A cat pictures messaging application ? Author Charles BOCHET <firstname.lastname@example.org> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? No vue-cli · Generated "cropchat".
This process creates a project folder with following subfolders:
build: contains webpack and vue-loader configuration files
config: contains our app config (environments, parameters…)
src: source code of our application
static: images, css and other public assets
test: unit test files propelled by Karma & Mocha
cd cropchat npm install npm run dev
This will open your browser on
One of the biggest plus of PWA is that applications are easily installable and sharable. All web applications that provides a valid
manifest.json file in their
index.html are installable.
Vue pwa template provides a default
static/manifest.json file to customize your project:
You can customize a few things here:
app names ;
app icons that will be displayed on device home screen and splash screen (you can find cropchat official icons on our repository) ;
start url ;
display and orientation ;
background and theme colors.
Here is the complete list of manifest options on Mozilla Developer website.
Take a look at
index.html and see that manifest is already linked here:
Make sure you also have a viewport declared in the head section of
That’s it! Let’s try to install CropChat on a mobile device. There are many ways to access our
localhost:8080 from distant mobile device. My favorite one is to use ngrok.
Ngrok is a service that relays your local environment on a distant dns, for free!
To install it:
npm install -g ngrok
ngrok http 8080
That should give you the follolwing output:
ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Version 2.1.18 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://5ef29506.ngrok.io -> localhost:8080 Forwarding https://5ef29506.ngrok.io -> localhost:8080 Connections ttl opn rt1 rt5 p50 p90 39 3 0.01 0.01 120.01 881.89
Browse ngrok url
http://5ef29506.ngrok.io with your smartphone. You can add it to your device desktop!
Cropchat’s sources are available on GitHub here. Git history follows the tutorial steps.
To learn more about ngrok, you can read Matthieu Auger’s article: Expose your local environment to the world with ngrok.
Now that we have a proper base we are going to start building CropChat features. CropChat has three views:
Home View: displays cat pictures thread as a list of images
Detail View: displays a specific cat image details (accessible by click from Home View)
Post View: enables the user to post a new picture.
src/components/HomeView.vue view with following skeleton:
Finally, update routing file
Remove unused Hello.vue view too. You should see the changes impacting your mobile app directly (Hot reload is great, isn’t it?)
Don’t you know Material Design Lite? It’s a great framework that let you implement Material Design easily and lightly on your web application.
You can find an exhaustive documentation here: Get MDL.io
Update CropChat dependencies:
npm install material-design-lite --save
src/App.vue component to import MDL style and load MDL module:
Update main component
src/App.vue template section:
Because Material Design Lite is not designed specifically to build Single Page Application, we need to hide the burger menu when user clicks on a menu link:
We are not yet connected to a backend server. We are going to use fake data as of now.
Import data in
HomeView.vue script section and link pictures to their corresponding DetailView:
HomeView.vue template and style:
Proceed to the same enhancements on
We are done, CropChat is up!
Code source available on this GitHub repository: https://github.com/charlesBochet/vueJSPwa
I hope I have convinced you of the capabilities of VueJS and Webpack to create a web application with very little effort. To sum things up:
Vue-cli can create a dummy VueJS + Webpack application in one command line
Make your web application installable by adding a Manifest.json file
Use Vue-Router and Material Design to create a app-like user experience
However, CropChat is not yet a Progressive Web Application: let’s have a look to the PWA requirements checklist:
Half of the requirements are not yet met. These are the objectives of the next parts.
You can now switch to Part II that focuses on providing fast and fresh data for our CropChat application.
For those who are in Paris, I am co-organizing a Progressive Web App MeetUp. Do not hesitate to come and say ‘Hi!’.
GAN with Keras: Application to Image Deblurring
A Generative Adversarial Networks tutorial applied to Image Deblurring with the Keras library.
How Apache Airflow Distributes Jobs on Celery workers
The life of a distributed task instance
How to Perform Fraud Detection with Personalized Page Rank
This article shows how to perform fraud detection with Graph Analysis.