SW-precache and SW-toolbox made creating Service Workers with dynamic caching much easier but there were two separate libraries and SW-precache required a separate file with all the SW-toolbox libraries routes in it. This made it very error prone to edit and update. Workbox.jshttps://workboxjs.org/ is the evolution of Google's Service Worker Libraries. It consolidates all Service Worker build steps into one task Gulp, Webpack and NPM Script versions available and abstracts a lot of the writing and configuration behind the scenes so developers don't need to see the process, only the result. If you want to create specialized routes manually, Workbox...
Jake Archibald's Offline Cookbookhttps://jakearchibald.com/2014/offline-cookbook/the-cache-machine-when-to-store-resources provides additional ideas of when to cache datahttps://jakearchibald.com/2014/offline-cookbook/the-cache-machine-when-to-store-resources and different caching strategieshttps://jakearchibald.com/2014/offline-cookbook/serving-suggestions-responding-to-requests. We'll concentrate in the later and talk about caching strategies. Cache only Use this strategy for resources that are static to the site and that were cached during installation. javascript self.addEventListener'fetch', event => { // If a match isn't found in the cache, the response // will look like a connection error event.respondWithcaches.matchevent.request; }; Network Only I use this strategy for resources that I don't want in the cache like videos, non-GET requests, and others. javascript self.addEventListener'fetch', event => { event.respondWithfetchevent.request; // or simply...
Service Worker Note that this section will make heavy use of arrow functions, let and const, and other ES2015 and newer features. I've chosen to do this because I treat PWAs as progressive enhancements for evergreen browsers. Older browsers will not support PWAs and their features so it's pointless to try and support them. The service worker has to main components: the registration and the service worker itself. We place the registration in the index.html file or whatever we've named our site's entry point and it'll tell the browser whether the browser supports service workers, where to find it and...
Manifest The first, and easier, aspect of a PWA is the manifest. This is a JSON file that holds information about the content and gives supporting browsers hints and instructions for installing the content in the user's homescreen. html The manifest itself is a JSON file that contanins information about the application. The sample manifest below contains the following information: - name: Full name of the application - short name: Short name of the application - description - icons: An array of available icons to use for different aspects of the application - default orientation - start\url: The entry point...
Last year I worked at Google creating ILT curriculum for Progressive Web Applicationshttps://developers.google.com/web/ilt/pwa/. It's a great idea and I think the final product worked well, but it's not complete. If you're getting started you need hand holding but what if you've built PWAs before and want a reference or examples that will do what you want so you can either modify them for your project or copy it as is. I'm making assumpttions that you're already familiar with the technologies that make up a progressive web application so I won't delve too much in the details about what they are....
I have to admit that I'm absolutely lazy when it comes to actually testing and linting my Javascript code. I make sure it works but not to run unit tests or make sure that the code I write follows the coding style I always say I do. Git to the rescue! Git creates hooks when you initialize the repository and you can customize the hooks to perform taks during the life time of the request. There are hooks that we run during the commit process but before the files are actually pushed to the server. We'll take advantage of the...
A lot of this material is taken from Get started with variable fontshttps://medium.com/@clagnut/get-started-with-variable-fonts-c055fd73ecd7 and the CSS Fonts Module Level 4https://www.w3.org/TR/css-fonts-4/ > Version 1.8 of the OpenType font format specification introduces an extensive new technology, affecting almost every area of the format. An OpenType variable font is one in which the equivalent of multiple individual fonts can be compactly packaged within a single font file. This is done by defining variations within the font, which constitute a single- or multi-axis design space within which many font instances can be interpolated. A variable font is a single font file that behaves like...
I came across this question in Quorahttps://www.quora.com/What-is-the-fastest-way-to-test-a-website-across-all-browsers-and-browser-version/ and prepared a detailed answer but the more I think about it the more I think it deserves a more elaborate answer because it starts from a false premise, that you must test in all versions of all the browsers available to them. > What is the fastest way to test a website on all browsers and browser version? Quorahttps://www.quora.com/What-is-the-fastest-way-to-test-a-website-across-all-browsers-and-browser-version/ Now with context out of the way onto the answer There are a few things to do before even considering what the fastest way to test is. The first one is to acknowledge...
I know we've jumped all over the place but I want to distill some final thoughts Put the user first > Seamless is a food delivery service that’s incredibly popular on the East Coast. In 2013, they merged with GrubHub, and recently, the two companies combined their backends and released a refreshed user interface. The reaction to these updates was really strong. It was a total “who moved my cheese” scenario, as customers had gotten used to the application’s flow, regardless of its inefficiencies. Customers had already spent the mental energy to get from Point A logging in, searching, placing...
The final empathy area I want to discuss is process and tooling. Who are we doing this for and what tools we're using to develop Who? There are three groups of people we should empathize with: Fellow team members, External developers who use our code and the end users of our product. Our fellow team members are typically the smallest group some times it's just us, but they are most affected by the code we write. Because we share the same context it's easier for us to write code that they can work with easily. If we miss the mark...
