[Updated 11/27/2017]
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 1] Create a Single Page Application with VueJS, Webpack and Material Design Lite
[Part 2] Connect the App with a distant API with Vue-Resource and VueFire
[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!
VueJS 2 View Layer: renders our views with a little help of Material Design Lite
Vue-Router: handles the routing of the SPA
Vue-Resource & Vuefire: handle communication with an existing Firebase database
Service Worker: handles offline mode and keeps data up-to-date
WebpackVue-loader: build our application, provides hot reload, ES2016 and pre-processors.
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 pwa template is built on top of Vue webpack template. Webpack is a modern and powerful module bundler for Javascript application that will process and build our assets.
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 <charlesb@theodo.fr>
? 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
Then run:
cd cropchat
npm install
npm run dev
This will open your browser on localhost:8080
:
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 manifest.json
file.
Edit 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 index.html
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
Then, run:
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.
Create a src/components/HomeView.vue
view with following skeleton:
Same for src/component/DetailView.vue
view:
Same for src/components/PostView.vue
view:
Finally, update routing file src/router/index.js
:
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
Update 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.
Create a src/data.js
file:
Import data in HomeView.vue
script section and link pictures to their corresponding DetailView:
Update HomeView.vue
template and style:
Proceed to the same enhancements on DetailView.vue
:
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 to Perform Fraud Detection with Personalized Page Rank
This article shows how to perform fraud detection with Graph Analysis.