Quick Base Discussions

Expand all | Collapse all

Service Worker Travel Log - Day 13

  • 1.  Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 06-07-2017 18:17
    Day 13 - Hip Hip Cheerio!




    Let's continue our previous post which dealt with our new Service Worker buddy sw8.js.

    Code Page sw8.js
    https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=sw8.js

    You will notice that our new Service Worker had a line at the top that imported the cheerio.js library:

    importScripts("https://haversineconsulting.quickbase.com/db/bmss68i2j?a=dbpage&pagename=cheerio.js");

    The reason that we are including this library is because we need to parse the XML response from API_DoQuery and convert it to a JSON response without having access to the DOM or jQuery. Cheerio.js is just a light weight jQuery replacement library that is often used server side (typically with Node) but equally useful within a Service Worker.

    Here are some docs about Cheerio.js:

    Cheerio.js
    https://cheerio.js.org/

    Cheerio.js Github Page
    https://github.com/cheeriojs/cheerio

    The usage of Cheerio.js within our Service Worker is pretty straightforward and basically is exactly the same as the jQuery solution that used the helper function XMLFlatToObj .

    $ = cheerio.load(body);

    var data = [];
    var record = {};
    $("record").each(function() {
      record = {};
      $(this).children().each(function () {
        record[$(this).prop("tagName")] = $(this).text();
      });
      data.push(record);
    })

    The first statement loaded the XML response into the Cheerio object and the rest of the code is exactly the same as the orignal jQuery solution.

    The only other thing worth remarking on is how we package up the JSON response. In a nutshell we take the data array obtained from the above script format it as JSON and set the headers of the new Response to indicate we are sending back JSON instead of XML and to not cache the new response:

    var newBody = JSON.stringify({records: data}, null, "  ");
    return new Response(newBody, {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'max-age=0'
      }
    });

    It is really that simple! In summary, we created a new parameter value &fmt=json  for API_DoQuery and included the conversion code within our Service Worker which will convert the XML response to JSON whenever this API method is used in Table #8.

    Your are really going to like our next post as we are going to create a new API from scratch! To make it even more exciting I will take suggestions for what this new API will be named and what it will do. I am going to be out of the office for a few days so if there is some API you want let me know and if it is simple enough I that can make a demo out of it I will.

    Next Up: Day 14 - Where No API Has Gone Before


  • 2.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 06-07-2017 18:28
     

    I hate to mention this but please refrain from commenting or liking my posts in this series for a few hours as I can no longer edit my post if you do this. The hardest part about these posts is getting them formatted in the forum correctly with spelling and grammar checks and sometimes there is a small typo I have to correct or a needed clarification. I wish there was a way to edit your posts but that is the way the admin set things up.


  • 3.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 06-22-2017 11:09
    You may have noticed we had a lapse in our postings to the Service Worker Travel Log. It is definitely not for lack of content - I am simply very busy with other work. I will probably resume posting early next week.

    But I would like to update you on some other Service Worker information. I have been waiting over a year for Microsoft to support Service Workers in their Edge browser. Well it looks like that will happen with the Windows 10 Update in the Fall and code named the Creators Update (v1703). The announcement will probably come on September 13 at Microsoft�s Edge Web Summit in Seattle. Along with greater support for the Fetch API Microsoft is indicating the Creaters Update will include support for the following features:

    • Enable service workers
    • Enable push notifications
    • Enable background sync
    • Enable service worker cache storage
    Also, I have just given my second Meetup presentation on Service Workers in my home community and this weekend I will be participating in a healthcare hackathon were my team's submission will be using Service Workers with QuickBase to create an off-line first Progressive Web Application using Google's new Workbox framework:

    https://developers.google.com/web/tools/workbox/


  • 4.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 08-08-2017 13:20
    The Service Worker Travel Log has been on a bit of a hiatus during the summer as I am super busy but I wanted to pass on the latest good news.

    As previously mentioned we are waiting for Service Workers to land in Edge in September. Meanwhile, the last browser holdout - Safari - has now committed to adding Service Workers to their browser:

    Apple signals it's willing to let next-gen web apps compete with iOS apps
    Service Workers land in WebKit, clearing way for better in-browser applications
    https://www.theregister.co.uk/2017/08/04/service_workers_land_in_webkit_heralding_apple_acceptance/


  • 5.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 08-24-2017 10:57
    Apparently Apple has released a version of Safari (Safari Tech Preview 38) which includes support for Service Workers behind a flag. This is hot off the press so I can't find much additional information at this time but it is great news:



    https://twitter.com/fr3ino/status/900485318738149377

     This is from a credible source PWA (Progressive Web Applications) Tips newsletter:

    https://pwa.tips/2017/08/24/Issue-7.html


  • 6.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 09-05-2017 13:45
    This is so exciting Service Workers coming to Edge in September. QuickBase will never be the same again.

    Microsoft Adding Support for Progressive Web Apps in Windows 10
    By the time the Fall Creators Update is released in September, Edge should have all the service workers required for PWAs turned on out-of-the-box.
    https://www.petri.com/microsoft-adding-support-progressive-web-apps-windows-10

    Also, Microsoft's Patrick Kettner (Product Manager for Edge at Microsoft) "not" talking about Integrating service workers into the browser:

    Top 5 Browser APIs You�re Not Using with with Patrick Kettner
    http://shoptalkshow.com/episodes/278-top-5-browser-apis-youre-not-using-patrick-kettner/#t=4:40


  • 7.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 09-06-2017 15:41
    Okay here is the new update on the release of the Windows 10 Fall Creators Update (which I think will include Service Worker support in Edge):

    Create and play this holiday with the Windows 10 Fall Creators Update coming Oct. 17
    https://blogs.windows.com/windowsexperience/2017/09/01/create-and-play-this-holiday-with-the-windows...


  • 8.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 09-13-2017 13:11
    Today is the day Microsoft reveals their upcoming Service Worker offering in Edge:

    Microsoft Edge Web Summit 2017
    Service Worker: Going beyond the page
    Sep 13, 2017 11:15AM�11:45AM  PST by Ali Alabbas
    https://channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017/ES05


    This event will be live streamed.

    We are near the inflection point, the convergence, the singularity - god mode is coming to QuickBase. All Your Base Are Belong To Us.



  • 9.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 09-27-2017 23:56
    Service Workers are in Edge Fall Creators Update To Be Released October 17!

    I have been waiting almost two years for this. QuickBase will never be the same!

    Install Windows 10 Insider Preview
    https://insider.windows.com/en-us/welcome-insider/

    These screenshots are from the Preview Build 16296.0

    https://i.imgur.com/wdv2ZPi.jpg



    https://i.imgur.com/p6jCEG5.jpg




    All my examples appear to work in this Preview version of Edge. Here is an offline demo that works in Chrome, FireFox, Opera and now Edge:

    Proof: https://dandiebolt.com/sw/demo2.html

    It will take me some time to run through all my accumulated QuickBase examples but I don't think there are going to be any major problems.


  • 10.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 10-01-2017 13:58
    If you think this Service Worker thingy is some type of wacky idea think again. Cloud providers are now adopting Service Workers so they will operate server-side (as opposed to client-side or in your browsr):

    Introducing Cloudflare Workers: Run JavaScript Service Workers at the Edge
    https://blog.cloudflare.com/introducing-cloudflare-workers/

    Utilizing this capability would require QuickBase to host on Cloudflare (they don't) but Cloudflare provides a nice service to demonstrate how a Service Workers operate that is equally informative to demonstrate how the client-side (ie browser) based Service Workers that I am using operate because they use the same Service Worker API.

    Here is a screenshot AND sharable Service Worker built in Cloudflare's Playgound (similar in concept to jsfiddle to some extent) that modifies QuickBase Support Center page by transforming the text "KnowledgeBase" into "The Big Knowledge Base":



    https://cloudflareworkers.com/#6bbc95d6cd59903bf178eb8e791fb97b:https://login.quickbase.com/db/9kaw8...

    Go ahead and change the replacement text in the code and click the blue Update button:
    let modified = text.replace(
    /KnowledgeBase/g, "Does this Service Worker Thingy Really Work?")
    Don't be shy about chaining anything. Even the most novice QuickBase user should be able to change the text, press the button and stand in awe at the results.

    Again you will not be able to use Cloudflare's Service Worker technology with QuickBase because QuickBase does not their host the domain there. However, the changes you just saw can be achieve with the client-side Service Worker technology built into your browser and hosted in a QuickBase code page.

    We have reached singularity and are now converged - anything is now possible with QuickBase using Service Workers.


  • 11.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 10-01-2017 15:12
    I should add that if you navigate around in the right hand panel the QuickBase page will update to whatever link you click on and the Service Worker on the left hand side stays active and continues to perform the substitution for the word "KnowledgeBase". So you will continuously see the table name "KnowledgeBase" change "The Big Knowledge Base" as you navigate because the Serrvice Worker continues to remain in scope.

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1656480/RackMultipart20171001-13764-1jjcaek-screenshot_inline.jpg?1506870626">

    Now if the Service Worker were coded to add a <script> tag to every page you would see the effect of that script tag execute on every QuickBase page within the domain.


  • 12.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 10-04-2017 17:53
    UPDATE:

    >Utilizing this capability would require QuickBase to host on Cloudflare (they don't) ...

    There is a bit of a misstatement here and some interesting news. First Cloudflare isn't really a hosting company. Rather they offer more of a unique combination of a CDN and Anycast Service (one IP address, Multiple Servers) in that their primary goal it to accelerate access to a domain and enhance security by connecting to the geographically closest servers among their worldwide network of servers (~100 worldwide).  Read their description here:

    Cloudflare Anycast Explainer
    https://blog.cloudflare.com/a-brief-anycast-primer/

    But the interesting part of this is that apparently QuickBase will be using Clourflare in the near future. I have no further information about this but it does significantly raise the prospect that QuickBase users could gain access to Clourflare Service Workers if QuickBase allowed it at some time in the future.

    In any case you can still use browser bassed Service Workers today in Chrome, FireFox, Opera and shortly in Edge (10/17/17) and the same Service Worker could be used server side via Cloudflare if QuickBase allowed it. This is very speculative but it could certainly play out in the long run.

    Irrespective of all of this, the Clourflare Service Worker playground (cloudflareworkers.com) can be used today to safely experiment with using QuickBase with Service Workers without altering your QuickBase application.

    These are extremely interesting developments and I think the long term benefits are enormous for QuickBase despite what appears to be a lot of legacy issues they are working out in their present product development plans.


  • 13.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 12-20-2017 21:04
    Safari Adds Service Workers!

    Safari is the last of the five six major browsers to add Service Workers.



    All Your Base Are Belong To Us.

    Release Notes for Safari Technology Preview 46
    https://webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/


  • 14.  RE: Service Worker Travel Log - Day 13

     
    Posted 01-05-2018 20:30
    Service Workers also work in the UC Browser from Alibaba which is quite popular in the China market.



    http://www.ucweb.com/

    If you are no using Service Workers with QuckBase you are missing out on a whole ton of functionality. There is no preventing this trend - you will be assimilated.



  • 15.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 01-30-2018 20:53
    Can't stop this train ...

    Apple goes back to the future with web apps
    Apple's about to introduce Service Worker support in Safari. So, what are Service Workers, and why might they matter to you or your enterprise?
    https://www.computerworld.com/article/3251173/apple-mac/apple-goes-back-to-the-future-with-web-apps....">https://www.computerworld.com/article/3251173/apple-mac/apple-goes-back-to-the-future-with-web-apps.html">https://www.computerworld.com/article/3251173/apple-mac/apple-goes-back-to-the-future-with-web-apps....


  • 16.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 02-02-2018 14:24
    With QuickBase ending support for IE9 and IE10 the only gap in using Service Workers with QuickBase will soon be IE11 as Apple (the last holdout) will soon deploy Safari 48 and all other major browsers have implemented it.

    An unprecedented blockbuster scenario for QuickBase customization for Earth based QuickBase users.

    Ending Support for Internet Explorer 9 and 10 Browser
    https://community.quickbase.com/quickbase/topics/ending-support-for-internet-explorer-9-and-10-brows...

    Apple Releases Safari Technology Preview 48 With Bug Fixes and Feature Improvements
    Safari Technology Preview release 48 includes bug fixes and feature improvements for Storage Access API, SVG, Service Workers, CSS, Web API, Rendering, Web Inspector, Web Driver, WebRTC, JavaScript, and WebAssembly. 
    https://www.macrumors.com/2018/01/24/apple-releases-safari-technology-preview-48/


  • 17.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 05-09-2018 14:29
    The day has come:

    Service Workers Now Supported across All Major Browsers

    "Service workers is probably the single most powerful API added to the web platform recently. It gives you access to a programmable proxy in JavaScript land. You can do anything you want with each request made and the response received by the browser - cancel the request, re-route it, modify the response(in some cases), cache it, etc."
    https://www.infoq.com/news/2018/05/service-workers-supported-across">https://www.infoq.com/news/2018/05/service-workers-supported-across">https://www.infoq.com/news/2018/05/service-workers-supported-across


  • 18.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 05-09-2018 14:33
    is Service Worker ready?

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1729192/RackMultipart20180509-63309-1cxlhqs-screenshot_inline.jpg?1525876383">

    https://jakearchibald.github.io/isserviceworkerready/">https://jakearchibald.github.io/isserviceworkerready/">https://jakearchibald.github.io/isserviceworkerready/


  • 19.  RE: Service Worker Travel Log - Day 13

    Posted 05-09-2018 16:09
    Wow Dan this is some great info. My head is spinning with the possibilities :)


  • 20.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 05-09-2018 16:18
    It is revolutionary and now in all modern browsers. I have been piecemeal using Service Workers in select applications but over the next month I plan on converting every application in my account to using them.


  • 21.  RE: Service Worker Travel Log - Day 13

    Top
    Contributor
    Posted 05-14-2018 01:25
    >spinning with the possibilities :)

    QuickBase should be spinning with the possibilities as by employing CloudFlare for their DDOS protection they are now in a position employ CloudFlare Workers which use the same API as Service Workers!