The Artima Developer Community
Sponsored Link

Java Buzz Forum
Offline web application with Vue.js

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
Ross Mahony

Posts: 60
Nickname: rossma
Registered: Apr, 2010

Ross Mahony is a Java developer interested in collaboration, development and new ideas
Offline web application with Vue.js Posted: Oct 24, 2017 6:20 AM
Reply to this message Reply

This post originated from an RSS feed registered with Java Buzz by Ross Mahony.
Original Post: Offline web application with Vue.js
Feed Title: Monster Sandwich - Java, Spring, Hibernate, JPA, JEE, Scala
Feed URL: http://monstersandwich.blogspot.com/feeds/posts/default?alt=rss
Feed Description: A practical site with discussions on a wide range of Java topics where I have tried to include best practices. I try to include practical working examples that anyone can download, install and run. I would love to open discussion to other developers to collaborate with and to learn.
Latest Java Buzz Posts
Latest Java Buzz Posts by Ross Mahony
Latest Posts From Monster Sandwich - Java, Spring, Hibernate, JPA, JEE, Scala

Advertisement
I have recently been learning Vue and in so doing a million other things, it seems, to do with modern web frameworks like Vue. Vue is described as:

The Progressive JavaScript Framework

So what is a Progressive Web App? Wikipedia explains it as follows:

Progressive Web App (PWA) is a term used to denote web applications that use the latest web technologies. Progressive Web Apps, also known as Installable Web Apps or Hybrid Web Apps, are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.

The following characteristics make up a PWA:

Progressive

Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

Responsive

Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.

Connectivity independent

Service workers allow work offline, or on low quality networks.

App-like

Feel like an app to the user with app-style interactions and navigation.

Fresh

Always up-to-date thanks to the service worker update process.

Safe

Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

Discoverable

Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

Re-engageable

Make re-engagement easy through features like push notifications.

Installable

Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

Linkable

Easily shared via a URL and do not require complex installation.

For me I was quite keen to see how the connectivity independent characteristic could work so that regardless of whether or not a user is online they could still work away as if they were connected. I started reading up on service workers to get an initial understanding of the concepts.

I found the following links most helpful:


Over and above that there are these two vue-cli templates designed to give you a running application with all the PWA features configured and ready to use:


The Vuetify example is based off the vue-pwa-boilerplate just with Vuetify semantic material components.

I took these examples and created my own vuetify-pwa application. The goal was to have some web navigation between pages and to be able to complete some forms and submit them regardless of internet connectivity. Once online the goal is to auto sync the changes with the server. This background sync hasn't been implemented yet and hopefully I can get to update this later on when it is done.

Read: Offline web application with Vue.js

Topic: Java 9 JShell Examples: Collections Static Factory Methods Previous Topic   Next Topic Topic: Closed-loop feedback control with Scrum


Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2017 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us