C2LC-163: Turn the coding environment into PWA

Metadata

Source
C2LC-163
Type
Task
Priority
N/A
Status
Done
Resolution
N/A
Assignee
N/A
Reporter
Created
2020-02-10T09:45:45.092-0500
Updated
2020-02-19T15:09:05.354-0500
Versions
N/A
Fixed Versions
  1. Coding Env 0.2.1
Component
N/A

Description

Comments

  • Daniel Cho commented 2020-02-14T14:32:04.151-0500

    To register a service worker, change unregister to register of https://github.com/codelearncreate/c2lc-coding-environment/blob/83fd33d9ccce123a169e5ae6cdf7bf1f17d19831/src/index.js#L12. Register call from the serviceWorker.js file in src directory calls registerValidSW with a service worker specified by swUrl on https://github.com/codelearncreate/c2lc-coding-environment/blob/83fd33d9ccce123a169e5ae6cdf7bf1f17d19831/src/serviceWorker.js#L51, then the installation of a service worker fires onupdatefound https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/onupdatefound. According to the comment on line 69: https://github.com/codelearncreate/c2lc-coding-environment/blob/83fd33d9ccce123a169e5ae6cdf7bf1f17d19831/src/serviceWorker.js#L69, updated precached content is fetched by the point.

  • Simon Bates commented 2020-02-14T14:55:57.081-0500

    Thanks Daniel. Would you be able to dig in a little bit more and see if you can find the code that is responsible for adding our files to the browser cache?

    The comment you highlight:

    // At this point, the updated precached content has been fetched,

    Can you find the code that is fetching the content and adding it to the cache – which code has ensured that "precached content has been fetched"?

  • Daniel Cho commented 2020-02-14T15:39:49.408-0500

    "To install a service worker for your site, you need to register it, which you do in your page's JavaScript. Registering a service worker will cause the browser to start the service worker install step in the background.

    Typically during the install step, you'll want to cache some static assets. If all the files are cached successfully, then the service worker becomes installed." – under The service worker lifecycle section on https://developers.google.com/web/fundamentals/primers/service-workers.

    Also, the service worker generated from cra's script has a flag "clientsClaim" set to true, which means that service worker will get called immediately with new changes (including updated assets) – "When a service worker is initially registered, pages won't use it until they next load. The claim() method causes those pages to be controlled immediately." https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim

    Which implies that if service worker is installed, every assets specified are cached.

  • Simon Bates commented 2020-02-14T15:55:28.415-0500

    Some code somewhere needs to do the caching. Having the service worker take control of a resource does not imply any particular strategy for handling the resource, such as caching. It just means that the service worker is responsible for it. If it stores it, and where, is the responsibility of the service worker.

    "Typically during the install step, you'll want to cache some static assets" – in our case, who is caching the assets?

    Regarding your conclusion "Which implies that if service worker is installed, every assets specified are cached." We are certainly observing that the assets are being cached, but who is specifying what those assets are and who is caching them?

    Could you upload the generated service worker? It would be helpful to see that, I think.

  • Daniel Cho commented 2020-02-14T16:05:46.410-0500

    Here's the generated service worker:

    /**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "/precache-manifest.ed83b9b336e6722f321ef7b4ef6e1f89.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

workbox.core.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
  
  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
});

  • Simon Bates commented 2020-02-14T16:12:19.823-0500

    Awesome, thanks. Could you also upload precache-manifest.ed83b9b336e6722f321ef7b4ef6e1f89.js

  • Daniel Cho commented 2020-02-14T16:14:12.953-0500

    No problem! here's the precahe-manifest:

    self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "71a1e02a945bdc2c5b8ca06a174b3460",
    "url": "/index.html"
  },
  {
    "revision": "9ed547e862ac2ef2daf2",
    "url": "/static/css/main.101522a8.chunk.css"
  },
  {
    "revision": "f8a642167ae40390e539",
    "url": "/static/js/2.9399bedd.chunk.js"
  },
  {
    "revision": "d4503a70721fea146de807f4f151ad0d",
    "url": "/static/js/2.9399bedd.chunk.js.LICENSE"
  },
  {
    "revision": "9ed547e862ac2ef2daf2",
    "url": "/static/js/main.8169dda7.chunk.js"
  },
  {
    "revision": "c7e1aa03eb428c93f751",
    "url": "/static/js/runtime-main.f4636c62.js"
  },
  {
    "revision": "ea4c538e9ec3b3ecbd16d0084e1b287a",
    "url": "/static/media/Add.ea4c538e.svg"
  },
  {
    "revision": "7f7d8a9836782e4cc4dc967570947bf9",
    "url": "/static/media/ArrowForward.7f7d8a98.svg"
  },
  {
    "revision": "5607c21619a30a4c2aef4cc7cac781e4",
    "url": "/static/media/ArrowTurnLeft.5607c216.svg"
  },
  {
    "revision": "195bf652abf4a78215687210d37ed068",
    "url": "/static/media/ArrowTurnRight.195bf652.svg"
  },
  {
    "revision": "63f71ddd57b485b64acc6ccceded2fac",
    "url": "/static/media/Delete.63f71ddd.svg"
  },
  {
    "revision": "f3a1aa0e8e36d4f7160bcfc14e513295",
    "url": "/static/media/Error.f3a1aa0e.svg"
  },
  {
    "revision": "2a4bd4a32735510d451ad1edf9869662",
    "url": "/static/media/Play.2a4bd4a3.svg"
  },
  {
    "revision": "584cfd846467e60f1207bea92ac797c4",
    "url": "/static/media/Status_Connected.584cfd84.svg"
  },
  {
    "revision": "ae0e745c964a2304c8eea1a99f483144",
    "url": "/static/media/Status_NotConnected.ae0e745c.svg"
  }
]);

  • Daniel Cho commented 2020-02-14T16:14:51.623-0500

    That one is from the current master branch

  • Simon Bates commented 2020-02-14T16:16:01.442-0500

    It's a little hard to read, but it looks like https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js is doing some Workbox set up.

    It's looking maybe like the answer to "who is caching our files" is Workbox?

  • Daniel Cho commented 2020-02-14T16:18:51.646-0500

    Yeah, that makes sense, specifically this line: workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

  • Simon Bates commented 2020-02-14T16:23:14.328-0500

    Do you know where in create-react-app the configuration for Workbox lives? It would be good to document that here also.

  • Daniel Cho commented 2020-02-14T16:23:57.998-0500

    https://github.com/GoogleChrome/workbox/blob/7fde87915e1e122b24e18f9e214a31d6a1986820/packages/workbox-precaching/src/precache.ts#L56-L57

  • Daniel Cho commented 2020-02-14T16:25:55.980-0500

    Yep, the configuration for Workbox lives here:

    https://github.com/facebook/create-react-app/blob/8b0dd54c7a7488d46a43ff6d1c67a6b41c31feb1/packages/react-scripts/config/webpack.config.js#L674