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.
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:
Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
Service workers allow work offline, or on low quality networks.
Feel like an app to the user with app-style interactions and navigation.
Always up-to-date thanks to the service worker update process.
Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Make re-engagement easy through features like push notifications.
Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
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.
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.