[Chrome 76+] Support HTML Imports polyfill after the native support is removed

[t2ym]

[Chrome 76+] Support HTML Imports polyfill after the native support is removed

Root Cause

The native support for HTML Imports will soon be removed since Chrome 75 76
Chrome feature status: https://www.chromestatus.com/feature/5144752345317376

Chromium Bugs labeled for M-76 as of Apr 22, 2019

label:M-76 component:Blink>HTML>Modules

Quoted from Google Group blink-dev

Intent to Deprecate and Remove: Shadow DOM V0, Custom Elements V0, HTML Imports
Updates: postpone API removal to M75. Since web sites including YouTube got broken due to the API removed canary, the patch was reverted. I heard that YouTube was migrating and effect was small. Because no any short-term solution from Blink side, I decided to postpone API removal to M75.

Status

• Prototype fix (not committed yet, just stashed) is working well with Chrome Canary 76.0.3807.0 and HTML Imports polyfill
• Still designing interfaces
  • Compatibility with 0.3.1 is in consideration

Possible Fix

• Avoid multiple hooking of inline scripts by the polyfill
• Mark each inline script by prepending the following comment

/* ctx:"btoa(encodeURIComponent(initialContext))" raw:"btoa(encodeURIComponent(script))" */

• Validate hooked inline scripts on setAttribute('src', 'data:text/javascript;charset=utf-8,...' and .innerHTML = content
  • Parse the prepending comment and hook the raw script again
  • Compare with the hooked script following the comment
• Accelerate the validation of the inline scripts by caching
  • Remove the extra hooking overheads by caching the validated scripts
  • Merge the information on the validation into cache-bundle.json
    • In gulp task script-hashes, add JSON with the key "https://thin-hook.localhost.localdomain/script-hashes.json" in cache-bundle.json
  • Synchronously import the validated scripts information by a plugin
    • script-hashes.js?no-hook=true&service-worker-ready=true
      • Note: service-worker-ready=false parameters is converted to true in the entry page to mutate the script itself to include hook.parameters.scriptHashes object
    • hook.parameters.scriptHashes = { "Hex(SHA256(inlineScript))": "initialContext", ... }
• Enable HTML Imports polyfill support
  • Add <script context-generator src="script-hashes.js?no-hook=true&service-worker-ready=false"></script> to the entry page
  • Add importScripts(..., 'script-hashes.js?no-hook=true&service-worker-ready=true') to hook-worker.js
• Disable HTML Imports polyfill support
  • Do not import script-hashes.js script

Possible Fix 2

• Support the HTML Imports polyfill as a no-hook script

Notes

• The HTML Imports support is not very important in the current trends but the current thin-hook demo is heavily using the feature and should run on Chrome 73+.
  Hopefully, the hooked polyfill will run on Firefox (and possibly Safari).
• Polymer 2.x legacy users can use it.
• CLI option to disable HTML Imports and other webcomponents v0 features on Chrome 73-
  • --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
• As of Chrome Beta 74.0.3729.40, HTML Imports feature is active again
• As of Chrome Canary 75.0.3747.0, HTML Imports feature is active
• As of Chrome Canary 76.0.3807.0, HTML Imports feature is disabled
• As of Chrome Canary 77.0.3833.0, HTML Imports feature is active again
• As of Chrome 76.0.3809.87, HTML Imports feature is still active and show the following warning message.
• As of Chrome Canary 80.0.3966.0, HTML Imports feature is disabled
  [Deprecation] HTML Imports is deprecated and will be removed in M80, around February 2020. Please use ES modules instead. See https://www.chromestatus.com/features/5144752345317376 and https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade for more details.