Close

Progressive Web Apps on the Road

Progressive Web Apps have lately been the subject of a lot of discussion in the web development world. While some tout Progressive Web Apps (PWAs) as the future of the web, others are more skeptical, while the majority of developers probably don’t even know what they are! Progressive Web Apps are an emerging technology that is already ready for business today with Vaadin Elements through a framework such as Polymer. It will certainly be the future for any framework - including Vaadin Framework in the very near future.

To further explore the world of Progressive Web Apps, my colleague Marcus and I had the great pleasure to go to a few PWA focused events in the past week, and I even got to speak about them.

What are Progressive Web Apps?

“Progressive Web Applications are a new level of caring about the quality of your user experience.”
--Chris Wilson, Developer Advocate at Google

Firstly, what are Progressive Web Apps? Progressive Web Apps are apps that use the latest web technologies to create high quality web experiences across platforms. High quality web apps are those that are reliable in all connectivity conditions, secure from end to end, and engaging to customers on all platforms and devices. The term Progressive Web App was coined by Frances Berriman and Alex Russell to describe “websites that took all the right vitamins.” These are apps that push the web further into creating great experiences. 

Learn more about Progressive Web Apps at the Google Developers site

Progressive Web Apps Roadshow

Last week, Marcus and I attended the Progressive Web Apps Roadshow, which toured the country and the world this autumn. Run by the Google developer relations team, these events were well organized and very informative. The event was split into two parts: a series of talks followed by codelabs. At Vaadin we have been closely tracking Progressive Web Apps, but we still learned a lot from this event. There was a strong focus on PWAs as -quality- applications. From the talks, we learned how to bake in security and and performance rather than leaving those as nice-to-haves. After the presentations were a series of codelabs, which were really useful, especially since we could ask follow-up questions of the facilitators.

Try the codelabs yourself at the Google Developers Codelabs page

Vaadin is committed to enabling developers to create powerful web apps, and we are going to put a lot more energy into teaching and presenting Progressive Web Apps as a better way to make web apps.

Progressive Web Apps Roadshow
Progressive Web Apps Roadshow

GDG Devfest San Francisco

The following weekend I spoke at the GDG Devfest event in San Francisco, one of a number of events happening this Autumn. It was a great event with a really diverse set of people from all levels of education, experience, and industries.

I gave a talk about Progressive Web Apps titled “Why (not) build Progressive Web Apps.” I presented the case for Progressive Web Apps as a cross platform -alternative- to native apps. PWAs are a powerful tool for building apps on all platforms, but they are not going to simply replace all native apps. When you go to build an application for multiple devices, whether you choose to build a PWA or a native app or both remains as a decision for the architect. 

Click here to view my slide deck

My talk was fairly well received, but as expected, there is still quite some confusion about what Progressive Web Apps are and why someone would build them. The Q and A session after my talk was quite lively and I took many great questions to hopefully elucidate some of the finer points of PWAs. I will also be giving my talk at the GDG Devfest event in Orlando this November, so it’ll be great to talk to even more people about Progressive Web Apps.

GDG Devfest SF
GDG Devfest SF

Progressive Web Apps Workshop

Then this past Monday, Marcus and I went to a Progressive Web App workshop hosted by Microsoft and Mozilla. While much of the conversation today about PWAs has come from Google, it was really wonderful to see the work Microsoft Edge and Mozilla Firefox teams. At the workshop we learned about service workers from some of the people who are actually on the specifications committee! Most of the workshop was codelabs, but there was plenty of time for us to mingle and make connections in the Progressive Web App world. Sometimes it’s not merely about what you learn at these events, but who you meet and can collaborate with in the future. It’ll be great to hear more about Progressive Web Apps from the Mozilla and Microsoft teams.

PWA Workshop
PWA Workshop with Mozilla and Microsoft

Progressive Web Apps and Vaadin

We’re always trying to stay up to date to help our teams at Vaadin create the most relevant and useful products that people use today. We think that Progressive Web Apps are a great new way to write high quality web apps for business, especially with Vaadin Elements and Polymer. Look forward to hearing more about Progressive Web Apps at Vaadin.

Learn more about Vaadin Elements

Vaadin Dev Day videos published

Vaadin Dev Day

Vaadin Dev Day Raleigh and Dev Day Munich are just around the corner, so we wanted to release the material from the previous Dev Days. Those Vaadin Dev Days were held in Berlin and New York in May. If you couldn’t attend then, we now have made the video recordings available for you. The topics were:

   

So sit back, enjoy, learn and please share your comments in the videos.

If you are eager to learn more with Vaadin, the Vaadin Dev Day series continues with fresh topics on November 29th in Munich, Germany and December 1st  in Raleigh, NC, United States. Make sure to reserve your seat and learn how to really master Vaadin.

Vaadin Dev Days are one-time events organized around the world. This is the third time we organize a Vaadin DevDay.

Read more about Vaadin Dev Day

Building Progressive Web Apps: Webinar and Tutorial

Progressive Web Apps are web applications that utilize the best features of the web to provide app-like experiences. As users visit your web app, the apps progressively become more like native apps with offline support, push notifications, and the ability to add your web app to the home screen of their device.

Last week we presented the Building Progressive Web Apps webinar. Check out the webinar page here.

As a companion, this blog post will show you how to set up a simple progressive web app with Vaadin Elements and Polymer.

Your completed app will look like this:
Demo PWA that you'll be building

Getting started

First, install the Polymer CLI and the Vaadin Elements generator. This will build out a basic app that you will modify to add progressive web app features like service worker and offline support.

$ npm install -g polymer-cli generator-polymer-init-vaadin-elements-app
$ polymer init vaadin-elements-app

Serve the app with the Polymer CLI to see this basic app.

$ polymer serve --open

This runs the app, however if you disconnect from the internet or set your browser to offline, then you’ll see that your app stops working.

PWA going offline and failing

 

Tools for working with Progressive Web Apps
Chrome Developer Tools has an applications tab, which is perfect for working with Progressive Web Apps. You can toggle the network, you can inspect the service worker, and you can view and clear the cache.

See Chrome DevTools at the Google Developers site

Service Workers and offline support

To add offline support to the app, you’ll use a service worker to cache resources and display the cached app when there is no network connectivity.

Service Workers

A service worker is a programmable proxy that runs in a separate thread from your code. It cannot access the DOM and it can run even after you close your app. The service worker works in conjunction with your app to provide fast startup, background sync, and offline support. For this example, you’ll use a service worker to help run your app offline.

Diagram of application talking with the service worker proxy

Learn more about Service Workers at the Google Developers site

The App Shell Model

The first thing you’ll do is make sure that when users visit your app they are presented with something, anything that’s not an offline dinosaur. One way to do this is to serve up the basic shell of your app before there is even data to put into it. This is called the app shell model, and it enables you app to still look like an app even without network.

Learn more about the App Shell Model at the Google Developers site

Trying it offline

Your app has already been set up to work as an app shell. You just need to make sure the service worker serves the correct data.

The basic app is already set up to load a service worker when you first visit it, but if you inspect the service-worker.js file in your project directory, it will read:

console.info('Service workers will be generated at build time.');

So to get service worker support you will need to use Polymer to build your application. Run:

$ polymer build

This will create two build folders: an unbundled folder, which is optimized for HTTP/2, and a bundled folder, which bundles all the assets into as few files as possible. You’ll serve the the bundled build for now.

If you check the service-worker.js in the build/unbundled folder you’ll see that there is now quite a bit of data there that was generated in the build step. This built service worker will serve just the shell of your application.

Next serve the application with:

$ polymer serve build/bundled

When you refresh your browser then the app will be there as expected, but when you then go offline and refresh your page, you’ll see that the basic shell of the app still loads. The service worker takes the basic skeleton of your site and serves it to the visitor.

PWA app shell working offline

Despite the shell loading, no data is served up. This is better than displaying the offline dinosaur, but it is still a bad experience. Next you will implement caching with service worker.

Toward real offline functionality

We can assume that the employee data used in this app doesn’t change very often, so it’s reasonable to serve up the latest cached version of that data so that the user can see it even when offline. Then, when the user comes back online, the cache is replaced with the latest data from the network.

sw-precache

To implement caching, you can use sw-precache a tool that makes it easy to set up service worker caching. sw-precache will look through your project and cache the resources you’ve specified in a config file.

Open up sw-precache-config.js and change it to read:

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/manifest.json',
    '/bower_components/webcomponentsjs/webcomponents-lite.min.js'
  ],
  runtimeCaching: [{
    urlPattern: /^http:\/\/localhost.*json/,
    handler: 'networkFirst'
  }],
  navigateFallback: '/index.html'
};

The staticFileGlobs section is where the application shell is cached. Those three files are static files that the service worker knows explicitly to cache.

The runtimeCaching block, on the other hand, tells the service worker which files loaded by the application should be cached. These are files that will be cached when they are first loaded into the app. The urlPattern is a regular expression matching json files in our app and handler is a the caching strategy your app uses for these files.

As mentioned previously, the service worker is a programmable proxy that lives between your application and the cache or network. Requests will go through the service worker and then the service worker will decided how to handle those requests using handlers.

networkFirst is a caching handler for the service worker that says that when a json file is requested, first try to grab the latest version of the file from the network, and if that request fails, then serve the copy of the json file from the cache. networkFirst is just one of many handlers provided by sw-precache.

https://github.com/GoogleChrome/sw-precache

Read documentation for sw-precache and caching handlers on Github.

Putting it all together

Because sw-precache is a build time tool, you’ll need to rebuild the app to implement this runtime caching.

Clear the build directory and once again run:

$ polymer build
$ polymer serve build/bundled

Now make sure you’re online and refresh your app twice. The first refresh is to enable the new service worker to see the app and the second one is so that the service worker grabs the latest version of the json file and puts it into cache.

Now when you go offline and refresh you’ll see that all the employee information remained in the application.PWA Working Offline

Conclusion

This is just a brief example of what you can accomplish with progressive web apps. You can find out more about progressive web apps in a number of places:

Vaadin is very focused on progressive web apps so keep following this blog for more tutorials about PWAs.