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:
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.
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.
Previous Topic
