It’s just data

Service Workers - First Impressions

Created by potrace 1.13, written by Peter Selinger 2001-2015

Successes, progress, and stumbling blocks encountered while exploring Service Workers.

Preface

The Apache Whimsy Board Agenda tool is designed to make ASF Board meetings run more smoothly. It does this by downloading all of the provided reports and collating them with comments, prior comments, action items, minutes, links to prior reports, links to committee information, and the like. It provides a UI to allow Directors and guests to enter comments. It provides a UI to allow the Secretary to take minutes.

The tool itself is built using React.JS. It starts by downloading all of the reports. Navigation between reports can be done via mouse clicks or cursor keys and doesn't involve any server interaction. As new data is received, the window is updated.

Finally, I'm new to Service Workers so I may be doing things in a profoundly dumb way. Any pointers would be appreciated. I am capable of RTFM and following examples.

First step - caching JSON

Some of the data (e.g., the list of ASF JIRA projects) is fetched on demand. Generally the page is first rendered using an empty list, and then updated once the actual list is received.

This process could be improved by caching the results received and using that data until fresh data arrives. As the Cache API is built on promises, and therefore asynchronous, this generally means rendering three times: once with a empty list, then with the cache, and finally with live data.

// retrieve an cached object.  Note: block may be dispatched twice,
// once with slightly stale data and once with current data
//
// Note: caches only work currently on Firefox and Chrome.  All
// other browsers fall back to XMLHttpRequest (AJAX).
JSONStorage.fetch = function(name, block) {
  if (typeof fetch !== 'undefined' && typeof caches !== 'undefined' && 
     (location.protocol == "https:" || location.hostname == "localhost")) {

    caches.open("board/agenda").then(function(cache) {
      var fetched = null;
      clock_counter++;

      // construct arguments to fetch
      var args = {
        method: "get",
        credentials: "include",
        headers: {Accept: "application/json"}
      };

      // dispatch request
      fetch("../json/" + name, args).then(function(response) {
        cache.put(name, response.clone());

        response.json().then(function(json) {
          if (!fetched || JSON.stringify(fetched) != JSON.stringify(json)) {
            if (!fetched) clock_counter--;
            fetched = json;
            if (json) block(json);
            Main.refresh()
          }
        })
      });

      // check cache
      cache.match(name).then(function(response) {
        if (response && !fetched) {
          response.json().then(function(json) {
            clock_counter--;
            fetched = json;
            if (json) block(json);
            Main.refresh()
          })
        }
      })
    })
  } else if (typeof XMLHttpRequest !== 'undefined') {
    // retrieve from the network only
    retrieve(name, "json", function(item) {return item.block})
  }
}

All in all remarkably painless and completely transparent to the calling application. Doesn't involve the activation of Service Workers, but it doesn't have to.

Second step - caching HTML

What's true for JSON should also be true for HTML. Prior to the caching logic introduced above, and continuing to be true for browsers that don't support the service workers caching interface, data that should appear on the page would be missing briefly and show up a second or two later. In the case of HTML, that data would be the entire page. This would typically be seen both on the initial page load as well as any time a link is opened in a new tab.

The HTML case is both simpler and more difficult. Fetching the HTML from cache and then replacing it wholesale from the network, while possible, would be jarring. Fortunately, there already is logic in place to update the content of the pages based on updates received by XHR. So initially displaying where the user last left off, as well as updating the cache, is sufficient.

Unfortunately, it isn't quite so simple. I've included the current code below complete with log statements and dead ends.

// simple hashcode to prevent authorization from leaking
var hashcode = function(s) {
  return s && s.split("").reduce(
    function(a, b) {
      return ((a << 5) - a) + b.charCodeAt(0)
    },

    0
  )
};

var status = {auth: null};

this.addEventListener("fetch", function(event) {
  var scope = this.registration.scope;
  var url = event.request.url;
  var path = url.slice(scope.length);
  var auth = hashcode(event.request.headers.get("Authorization"));

  if (/^\d\d\d\d-\d\d-\d\d//.test(path) && event.request.method == "GET") {
    console.log("Handling fetch event for", event.request.url);

    event.respondWith(caches.open("board/agenda").then(function(cache) {
      return cache.match(path).then(function(cached) {
        if (cached) console.log("matched");
        console.log("auth", auth, status.auth);

        if (!auth || auth != status.auth) {
          // the following doesn't work
          cached = new Response("Unauthorized", {
            status: 401,
            statusText: "Unauthorized",
            headers: {"WWW-Authenticate": "Basic realm="ASF Members and Officers""}
          });

          // fallback: ignore cache unless authorized
          cached = null
        };

        if (cached) console.log("serving from cache");

        var network = fetch(event.request).then(function(response) {
          if (!cached) console.log("fetching from network");
          if (cached) console.log("updating cache");
          console.log(response);
          if (response.ok) cache.put(path, response.clone());
          status.auth = auth;
          return response
        });

        return cached || network
      })
    }))
  } else if (auth) {
    // capture authorization from other pages, if provided
    status.auth = auth
  }
})

The primary problem is that the board agenda tool requires authentication to use as the data presented may contain Apache Software Foundation confidential information.

Without accounting for this, what often would be placed into the cache would be the HTTP 401 challenge response. That's not desirable.

Attempting to force the return of a challenge when an Authorization header is not present results in the display of the challenge response. Again, not what we want.

Falling back to only providing the cached data when the Authorization header is present (and matches the one used for the cache) results in the cache being used sometimes with Firefox. And, unfortunately, never with Chrome.

A secondary problem, of lesser importance, is that the cache never gets updated if the service worker responds with a cache copy. Of if it does, the console.log messages aren't getting executed or aren't producing output.

Third step - monitoring

To help with debugging, it occurred to me that it would make sense to produce a page that shows Service Worker and Cache status.

Plans

One thing I haven't explored yet is replacing the fetch call with one with different values for the request mode and credentials mode. I figured I would ask for guidance before proceeding down that path.

Once caching HTML is mastered, caching related artifacts like stylesheets and javascripts would be in order. An online fallfack approach would likely be the best match.

After that, the next order of business would be queuing of updates while offline. While in general, that would be a hard problem, in this case as user operations are limited by role and generaally to editing their own changes, it should be manageable.


What a lovely post. I am impressed and wish you best of luck for your next post. Furniture Hire Melbourne

Posted by James Humphry at

Happy New Year 2020 is the time when you wish your friends, family, and your dear ones. Every year New Year is celebrated across the world, and it is celebrated with crackers and warm greetings.

Posted by Happy New Year 2020 at

I hope that there will be miracles, heal the broken heart is crying and sad. The sky is still divided night light right then we broke up already, so our love circle is like that.

Posted by walmart near me at

If you are looking for activation support for your Netgear device via www mywifiext net  then your searching ends here. We are the best who offers benefit to Netgear customers. If you want to get benefits of Netgear Genie Smart Setup Support then simply contact us @1-888-961-4011 and connected with our professionals.

mywifiext

Posted by www.mywifiext.net at

www.mywifiext.net a one stop solution shop for all your queries related to Netgear WiFi Extender Setup and Netgear Login issues. Get in touch will the leading technical experts, who are eager to provide you with the best assistance for Netgear WiFi  Extender 24*7. Just dial to our toll-free number +1-888-961-4011 for Netgear extender Setup solutions.

mywifiext.local

Posted by Netgear Genie Setup at

Very helpful to share. You are a great author. I will definitely bookmark your blog and may come back someday Thanks for a great post. Please continue to uphold!

Posted by fnaf at

If you want to get benefits of Netgear Genie Smart Setup Support then simply contact us @1-888-961-4011 and connected with our professionals. Columbus OH Assisting Hands

Posted by JOJO at

Good to read your beautiful post. Waiting for your next informative post. Matrimony Script

Posted by Mira Rajput at

Call Girls in Ahmedabad
Call Girls in Ahmedabad
Call Girls in Ahmedabad
Escorts Service in Ahmedabad
Escorts Service in Ahmedabad
Escorts in Ahmedabad
Escorts in Ahmedabad
Escorts in Ahmedabad
Female Escorts in Ahmedabad
Female Escorts in Ahmedabad
Female Escorts in Ahmedabad
Russian Escorts in Ahmedabad
Russian Escorts in Ahmedabad
Russian Escorts in Ahmedabad
Russian Escorts in Ahmedabad

Posted by Anjali Singh at

Call Girls in Jaipur
Call Girls in Jaipur
Escorts Service in Jaipur
Escorts Service in Jaipur
Escorts Service in Jaipur
Escorts in Jaipur
Escorts in Jaipur
Female Escorts in Jaipur
Female Escorts in Jaipur
Female Escorts in Jaipur
Russian Escorts in Jaipur
Russian Escorts in Jaipur
Russian Escorts in Jaipur
Russian Escorts in Jaipur
Russian Escorts in Jaipur

Posted by Anjali Singh at

We are the best Mywifiext Login setup service providers who provides WiFi extender setup services to users. We have many years of experienced professionals who can resolve your all Netgear extender setup queries. Tell us your issues or queries and get best assistant from us.

Posted by Netgear New Extender Setup at

A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a one.
Really impressed! Everything is very open and very clear clarification of issues. It contains truly facts. Your website is very valuable. Thanks for sharing.

Posted by dubsmash apk at

I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.

Posted by betterwrites.com/best-self-help-books at

I think I have never seen such blogs ever before that has complete things with all details which I want. So kindly update this ever for us.

Posted by freemobdroapkdownload.com/mobdro-apk-android at

Kasauti Zindagi Kay 2 is a reboot of the original version of the hit serial.
The reboot stars Erica Fernandes and PArth Samthaan in the lead roles of Prerna

Kasautii Zindagii Kay

Posted by Kasautii Zindagii Kay at

Reacts JS and Json are latest technologies and must be utilised in web design and web development. Thanks your advanced post on this topic.

Abdul
https://www.webreacts.com/

Posted by Abdul at

Watch Your latest Pinoy Telesrye Replay shows Live, Pinoy Teleserye Today Episode Free Online, Pinoy Tv Shows watch online full HD pinoy shows

Pinoy Teleserye Replay

Posted by Pinoy Telesrye Replay at

This post is greatly simple to scrutinize and recognize without overlooking any unobtrusive components. Remarkable work! oral fluid drug test

Posted by RankXone at

This leads us to how you will really discover the sources you have to do beneficial blogging and produce a brilliant news blog that will pass on individuals to your site. The best spot to search for sources is to buy in to different blogs that make comparative substance to your own. mediosindependientes This is particularly considerable on the off chance that you are searching for uncommon sources that produce noteworthy substance that isn’t just dazzling, at any rate favorable and eye-getting also. You can discover these blogs with watchwords in a web record, blog rolls and vaults, and suggestions from family and companions.

Posted by mediosindependientes at

If you are interested in putting Grammarly in use, here is good news for you. This grammar checker is one of my top writing tools. The Grammarly features help you to improve sentence structure, writing style, and grammar errors while working as a useful spell checker.

Posted by online grammar checked discount at

vidmate

Posted by shikha roy at

In the latest episode of Naagin, Vaishali finds Dev unconscious.
Just then Nayantara comes there, too, and tells Vaishali she had gone to drink

Posted by Naagin 4 Online at

similar to the code if you check once this how it look like Current Affairs

Posted by bhanu chaitanya at

Download vidmate v10.1
Download vidmate v10.2
Download vidmate v10.3
Download vidmate v10.4
Download vidmate v10.5
Download vidmate v10.6
Download vidmate v10.7
Download vidmate v10.8
Download vidmate v10.9
Download vidmate v11.0
Download vidmate v11.1
Download vidmate v11.2
Download vidmate v11.3
Download vidmate v11.4
Download vidmate v11.5
Download vidmate v11.6
Download vidmate v11.7
Download vidmate v11.8
Download vidmate v11.9
Download vidmate v12.0
Download vidmate v12.1
Download vidmate v12.2
Download vidmate v12.3
Download vidmate v12.4

Posted by shikha roy at

Memperoleh uang dalam waktu singkat ialah harapan tiap orang. Padahal acap kali dikatakan uang tak akan gampang datang seperti itu saja melainkan melewati menang  permainan baccarat Indonesia selama jumlah fantastis ialah hal dapat terbentuk. Bagi masih belum paham karenanya Cara Main Baccarat malahan offline benar-benar pas untuk menjadi tutorial bagi pemula.

Posted by Daftar baccarat online at

I must say, as a lot as I enjoyed reading what you had to say, I couldnt help but lose interest after a while.  Its as if you had a wonderful grasp on the subject matter, but you forgot to include your readers.  Perhaps you should think about this from far more than one angle.  Or maybe you shouldnt generalise so considerably.  Its better if you think about what others may have to say instead of just going for a gut reaction to the subject.  Think about adjusting your own believed process and giving others who may read this the benefit of the doubt.

Posted by https://onlineindus.com/Sindhi at

So much unique and informative. I wish I will get more unique information from your next post. Window repair and restoration products

Posted by Tommy Willamson at

“Naati Pinky Ki Lambi Love Story” is a television series that airs on Colors TV.
The show is produced by Bodhi Tree Productions. The show revolves around t.

Posted by Naati Pinky Ki Lambi Love Story Watch Online at

Matka boss 440 Tara Matka Matka Boss otg Matka 420  Boss Matka Indian Matka

Posted by Matka 420 at

Wow!! I must admit that the content in your post is quite informative, educative and very commendable. It is rare to find such content in a blog and hence I congratulate you for that. Did you know that you can get assignment help, essay help or any academic related services online? Well you can. Feel free to check the services stated below as I find them helpful too.

Posted by Research paper help at

nice post you have over there

Posted by assignment help at

Barrister Babu is a Hindi language Indian Television serial on
Colors TV of 2020. This tv serial features Madhushree Sharma

Posted by Barrister Babu at

Watch Your latest Pinoy Telesrye Replay shows Live, Pinoy Teleserye Today Episode Free Online, Pinoy Tv Shows watch online full HD pinoy shows

Posted by Pinoy Telesrye at

The latest Tweets from Ekdujekevaaste (@Ekdujekevaaste2). Ek Duje Ke Vaaste
is a Indian Hindi romantic Tv series, Started on 29 February 2016, and is

Posted by Ek Duje Ke Vaaste 2 Online at

It is quite beneficial, although think about the facts when it reaches this target.

Posted by personal loans online same day from UnitedFinances at

Just what I needed! Thanks for the info!!

Posted by 토토사이트추천 at

Netgear Extender Setup, New Extender Setup
This leads us to how you will really discover the sources you have to do beneficial blogging and produce a brilliant news blog that will pass on individuals to your site. The best spot to search for sources is to buy in to different blogs that make comparative substance to your own. Netgear Extender Setup, New Extender Setup

Posted by Netgear Extender Setup at

Netgear Extender Setup to enjoy the benefits of wifi range extender. Expert guidance can help you in New Extender Setup and get connected with Netgear-Ext.

Posted by Netgear Extender Setup at

I see some amazingly important and kept up to length of your strength searching for in your on the site

Posted by ricepuritytestofficial.com/rice-purity-test-girls at

Worth it site and posts.

Posted by Lawn Care Red Deer at

Excellent read, Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work.

Posted by http://www.hanabet99.com/ at

This leads us to how you will really discover the sources you have to do beneficial blogging and produce a brilliant news blog that will pass on individuals to your site. The best spot to search for sources is to buy in to different blogs that make comparative substance to your own.
visit:- Best mac cleaner, Best Free Mac Cleaner

Posted by Netgear Extender Setup at

Why do only so much written on this subject? Here you see more. rajacapsapro.org

Posted by rajacapsapro.org at

You should mainly superior together with well-performing material, which means that see it: https://rajacapsapro.cc/

Posted by https://rajacapsapro.cc/ at

This post is really magnificent. I really like this post. It is one of the best posts that I ve read in a long time. Thanks a lot for this really good post. I really appreciate it! abcflor.com

Posted by john woston at

This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information.

Posted by Epson connect printer setup utility at

I need to seek destinations with important data on given point and give them to educator our feeling and the article. voyance amour eternel

Posted by john woston at

Why do only so much written on this subject? Here you see more. https://dominoqiuqiu.mobi/

Posted by https://dominoqiuqiu.mobi/ at

Get Quick help & Support wireless extender. How to Setup MYWIFIEXT? Call today to setup your WiFi routers & WiFi range extenders by Experts. Mywifiextt guides setup for Wireless Range Extender related and  Router Setup & Genie Setup. Chat Now to Setup your Range Extender and fix any Connectivity issue. Ask any query related Mywifiext setup any time through our website.

Posted by PUNEET SOOD at

Mywifiext guides setup for Wireless Range Extender related and  Router Setup & Genie Setup. Chat Now to Setup your Range Extender and fix any Connectivity issue. Ask any query related Mywifiext setup any time through our website.

Posted by Shubham at

Myext-Extender guides setup for Wireless Range Extender related and  Router Setup & Genie Setup. Chat Now to Setup your Range Extender and fix any Connectivity issue. Ask any query related Mywifiext setup any time through our website.

Posted by Rahul Rana at

Thanks so much for sharing this awesome info! I am looking forward to see more posts by you!

Posted by pairs game at

Great blog.

Custom Home Builders Edmonton

Posted by Custom Home Builders Edmonton at

Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing...

Posted by http://baccaratonline.cc/ at

Watch Your favorite latest Pinoy Tambayan Replay shows Live, Filipino TV Shows free online Pinoy  Teleserye Today Episode Free Online, Pinoy Tv Shows Pinoy  Channel Pinoy TV Series and Pinoy TV Shows online for free

Pinoy Tv

Posted by Pinoy tv at

If you come to Jaipur then your full prestigious escort is welcome.  We ensure that whenever a person comes here to get our call girls, our helpline is always ready to answer all your questions. Because we know how valuable you are. Our  Jaipur Escorts are the miracle beauty of every person. Gives you so much love. We provide happiness here and you get a girlfriend experience. You feel like you are with your girlfriend or your wife. That’s why our  Jaipur Escort Agency is very romantic.

female escorts service ajmer city

female escorts service jaipur

Posted by jaipur call girls service at

I am just so happy to have found this post. Thanks for the interesting and knowledgeable share. netgear router login

Posted by molybrown01 at

I am enlivened by the information that you have on this blog. It shows how well you grasp this subject. plumber sydney

Posted by RankXone at

DramaMelayu, Tonton Drama Melayu, Tonton Cerekarama Melayu,
Tonton dan Download Drama Melayu, Drama Malaysia.

Kepala Bergetar

Posted by Kepala Bergetar at

I really like this post it was radiant and organizing post.I must state I acknowledge to scrutinizing this article you’re really amazing for sharing this article and keep on extraordinary work.

Top Glamour Escort
Delhi Escorts Services
Delhi Escorts Groups
Delhi Escorts

Posted by nehasharma at

Movies Reviews :

Bhangra paa le,Good newwz,Dabangg 3 Movie Reviews
Panga,Street Dancer 3 Jai mummy di Movie Reviews
Bunker, Tanhaji, Darbar Movie Reviews
Chhapaak, Sab kushal mangal, Shimla mirchi Movie Reviews
Unfriends, The body, Mudda 370 Movie Reviews
Panipat,Pati Patni Aur Woh,Bagpat Ka Dulha Movies Reviews
Mardaani 2,Mamangam,A Gift Of Love Movies Reviews
Yeh Saali Aashiqui,Tony,Commando 3 Movies Reviews
Dosti Zindabad,Pagalpanti,Keep Safe Distance Movies Reviews
Marrne Bhi Do Yaaron,Motichoor Chaknachoor,Marjaavaan Movies Reviews

Industrial Training In Ranchi 2020

Internship for CSE Students
Industrial Training In Ranchi 2020
Lemonwebtech offers Summer Industrial Training
Industrial Training 2020
Industrial training Computer Science in Ranchi 2020
Movies Download
vidmate 9apps
Vidmateapk
Bollywood movies apk file
Internet technology buz
Vidmate Bollywood movie
Live Watch Online
Fb video app
vidmate latest news
Film New Trailer
vidmate video downloader app
Vidmate Video Downloader
Download apps for free
Vidmate Latest Version
Vidmate Appstore
Entertainment
Vidmate Appstore
Entertainment and latest news 2020
Chhapaak Direct Download
Chhapaak Movie
Chapaak Movie live
Download Chhapaak Movie
Chhapak Movies pirated
Leaked Chapaak Movie

Posted by vidmate at

Hello, i feel that i saw you visited my web site thus i came to go back the choose?.I
am trying to to find issues to improve my web site!I suppose its good enough to make
use of some of your ideas!!

Posted by free porn at

Add your comment