One of the first applications I created with Polymer 0.5 was a project viewer that would list all project ideas I was working on. It had 2 versions with different backends: a JSON file and a Firebase enabled one. At some point the Firebase version stopped working so I decided to revisit the JSON backend to update; it was also time to put all the lessons I’ve learned about Polymer 1.x to work. The application is built around 3 components: - project-app is the shell for the application containing layout elements. This could have been done as an autobinding template...
I haven’t been this excited about Javascript in a long time. Javascript is becoming fun again with better aync support in Promises and async/await code, better modularity and reusability with classes and modules and a consistent, concise syntax for anonymous functions with arrow syntax and, better support accross Node.js and browsers. Until support for ES6 also known as ES2015 is complete accross major browserss we still need to transpile the code to ES5, the version that is currently supported accross browsers. There are two tables that list compatibility tables that guide you on native support for different features across ECMAScript...
Maximiliano Firtman wrote Service Workers replacing AppCache: a sledgehammer to crack a nuthttps://medium.com/@firt/service-workers-replacing-appcache-a-sledgehammer-to-crack-a-nut-5db6f473cc9b.l9dpx76am where he makes a case for Service Workers not being ready to replace AppCache, regardless of how broken it is. I happen to disagree with it for the same reasons Jake Archibald listed in Application Cache is a Douchebaghttp://alistapart.com/article/application-cache-is-a-douchebag and for reasons having to do with the extensible web. I tried to create an Application Cache for making some of my content offline. I’ll kindly say I failed because App Cache did not deliver on what it promised. What good is it to have an offline experience...
- General Resources and Concepts - Is ServiceWorker Readyhttps://jakearchibald.github.io/isserviceworkerready/ - Service Workers Sepcificationhttps://www.w3.org/TR/service-workers/ at W3C - Instant Loading Web Apps with An Application Shell Architecturehttps://developers.google.com/web/updates/2015/11/app-shell - Examples and tutorials - Jake Archibald - Offline Cookbookhttps://jakearchibald.com/2014/offline-cookbook/ - Simple Service Worker tutorialhttps://github.com/jakearchibald/simple-serviceworker-tutorial - Making A Service Worker: A Case Study - Smashing Magazine Articlehttps://www.smashingmagazine.com/2016/02/making-a-service-worker/ - Accompanying codehttps://github.com/lyzadanger/serviceworker-example - The Guardian - Building an offline page for Guardian.comhttps://www.theguardian.com/info/developer-blog/2015/nov/04/building-an-offline-page-for-theguardiancom - Jeremy Keith’s Example - My first Service Workerhttps://adactio.com/journal/9775 - Nicolás Bevacqua - ServiceWorker: Revolution of the Web Platformhttps://ponyfoo.com/articles/serviceworker-revolution - Vendor Examples - Service Worker Sampleshttps://github.com/GoogleChrome/samples/tree/gh-pages/service-worker Google - The Service Workers Cookbookhttps://serviceworke.rs/ Mozilla - Tools...
Building a ServiceWorker using Google libraries Google provides an abstraction layer over Service Workers called sw-toolbox that hides a lot of the complexities of a Service Worker without sacrificing functionality. The example below uses sw-toolbox to create a serviceworker that precaches the application shell and treats everything else as a default with a network-first strategy. global => { 'use strict'; // Load the sw-toolbox library. importScripts'bowercomponents/sw-toolbox/sw-toolbox.js'; // List of files to precache. This should be automated. const FILESTOPRECACHE = 'index.html', 'js/app.js', 'css/main.css', '/images/logo.svg', 'offline.html' ; // Turn on debug logging, visible in the Developer Tools' console. global.toolbox.options.debug = true; //...
Caching strategies: what, how, when Jake Archibald’s Offlline Cookbookhttps://jakearchibald.com/2014/offline-cookbook/ outlines several strategies to use Service Workers. The two most common ones are cache-first and network-first. In a cache-first situation we check the cache for the resource we requested and if it’s not in the cache then we fetch it from the network. This works on second and subsequent visits as on first visit the cache will be empty. network first is the opposite. We fetch the resource from the network and if that fails we check the cache for the resource. I use a third strategy I dubbed network-only which...
The first way to build a ServiceWorker is to manually write Javascript to accomplish the task. We’ll look at the basics of a service worker and different strategies to cache the content basd on our needs. Before we get started there are some things to consider: This is an enhancement Reliable network access is something we take for granted. We expect desktop and mobile bandwidth to remain available and constant and get really disappointed about the network and applications when the network fails. But we’ve all been in sitautions where the network is not available at all or when the...
Application Shells and Service Workers We’ll work through the process of manually adding a service worker without tools or web components. We will then look at building a progressive web application using service workers, sw-toolbox and sw-precache. As we go along we’ll touch on diverse subjects such as: - Offline as progressive enhancement - Speed still matters - Different cache strategies for Service Workers - sw-toolbox - Service worker web components - Progressive Web Applications what's a service worker To start I’ll provide two different definition of what a Service Worker is and then we’ll draw some comparisons and a...
Out of the many things in the CSS working group universe I’ve picked 3 to highlight because I think they have the most potential to make our web layouts look closer to a printed experience. Exclusions CSS Exclusions Module Level 1https://www.w3.org/TR/css3-exclusions/ provides a way to create exclusions in our CSS-based layouts. Exclusions define arbitrary areas around which inline content can flow and extend the notion of content wrapping previously limited to floats. We can use exclusions to create effects like those in magazines. From using it to highlight pullquotes with extra white space around or use shape inside to lay...
Do we have the tools to do print on the web? More and more I'm starting to think we can do a fairly nice job of doing print-like layouts for our web content. Not all the technologies are ready yet but we're getting close. In the following sections we'll look at some of these technologies and how they produce effects that are similar to those we see in print. There will also be a section of technologies that are coming down the standards pipeline that will supplement those technologies already available. Flexbox and native Grids Flexboxhttps://publishing-project.rivendellweb.net/new-in-the-css-horizon-css-flexbox/ and Gridshttps://publishing-project.rivendellweb.net/new-in-the-css-horizon-native-css-grids/ offer different...
