# ConclusionĬombining the application shell model with a service worker is great for offline caching, particularly if you combine its precaching functionality with a network-first, falling back to cache strategy for markup or API responses. As you progress through the documentation, you'll learn how to use Workbox directly to set up your toolchain to build a service worker that works best for your project, regardless of whether it's an SPA. Precaching your application shell's HTML, CSS and JavaScript is possible in almost any workflow, including projects using bundlers. The precaching requests are the last two rows, and the gear icon next to the request indicates that the service worker handled the request. When the page loads, the service worker precaches the application shell markup and its dependencies: The service worker precaches the application shell's dependencies at install time. dist/sw.js, which precaches 5 assets totaling 44375 bytes. dist/sw.js, and will log the following message when finished: Generated. The generated service worker is written to. The script is executed with Node like so: node build-sw.js This configuration stored in build-sw.js imports the app's CSS and JavaScript, including the application shell markup file contained in shell.html. addEventListener ( 'load', ( ) => bytes. Register a service worker after the load event The application shell markup will vary from project to project, but here's one example of an index.html file that provides the application boilerplate: The application shell for Jake Archibald's Trained To Thrill app includes a header with a refresh button to pull in new content from Flickr. Ideally, it should be as slim as possible, but include enough meaningful content in the initial download that the user understands that an experience is loading quickly. The application shell should exist independently of the content, yet provide a base for content to be populated within it. It should also be self-updating in the sense that if the application shell's markup changes, a service worker update should pick up the new application shell and cache it automatically. ![]() The application shell loads page-specific content dynamically through APIs or content bundled in JavaScript. If appropriate, optionally cache dynamic content for offline viewing.Retrieve and display page-specific content.Include common interface elements like a header and sidebar, separate from the page's content.Use static assets from a Cache instance.If this describes your project, and you'd like to add a service worker to enhance its reliability and performance, the application shell should: Most SPAs likely use what's effectively an application shell model already. # When the application shell model should be usedĪn application shell makes the most sense when you have common user interface elements that don't change from route to route, but the content does. Even if someone visits a URL in your web app that they've never been to before, the application shell will be served from the cache, and can be populated with useful content. The application shell model addresses this by responding to any navigation request with the application shell markup from the cache. Sometimes internet access is spotty, or absent altogether, and the dreaded "we can't find that website" screen rears its head. Reliable access to functionality in offline scenarios.However, repeat visits will pull the application shell from the cache, meaning that loading and rendering will be instantaneous. On the first visit to an app without a service worker installed, the application's markup and its associated assets have to be loaded from the network before the service worker can put them in its cache. Reliable, consistent performance on repeat visits.While the application shell is quick to load-provided the network is available and at least somewhat quick-a service worker that precaches the application shell and its associated assets gives the application shell model these added benefits: It's the first thing that loads, and therefore, it's also the first thing users see while they wait for the content to populate the user interface. ![]() The application shell plays a significant role in the perceived performance of a web application. When a service worker precaches this minimal UI's HTML and dependent assets, we call this the application shell. In practice, this tends to be the header, navigation, and other common user interface elements that persist across all pages. A common architectural feature of single page web applications (SPA) is a minimal set of HTML, CSS, and JavaScript needed to power the global functionality of an application.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |