Deploy a PWA on observable?

[rbcavanaugh]

I'm really loving framework (especially as someone who prefers to use R or python to wrangle the data and would love to do more interactive visualizations using js).

Is it possible to deploy an app as a progressive web app on observable? For example, I tried adding a manifest and service worker to the /docs folder but only the manifest.json file was copied to /dist/_file upon running npm run build.

I know I could likely do this on GitHub pages but it would be nice to have this option (perhaps as a feature even) to deploy to observable since running npm run deploy is just so freaking easy.

Cheers

[Fil]

related #692 (and #169)

[mythmon]

Thanks, I'm glad you're enjoying Framework!

One issue with the current set up is that npm run deploy does an in-memory build of the site, and doesn't offer any way to inject extra content like this. I want to fix this by making deploy simpler. Instead of having an independent in-memory build process, it would simply deploy what is already in the dist/ directory (or it's configured equivalent).

With that change you could do something like

$ npm run build
$ cp extra/manifest.json worker.js dist/
$ npm run deploy

@rbcavanaugh do you think that would help?

[rbcavanaugh]

yes- It would certainly provide the flexibility needed to manually implement any post-build customizations.

However, (in my opinion) it would be a bummer to remove the simplicity (and reproducibility!) of the current way deploy works. Plus I'm not sure how scalable that solution is as customizations increase? Seems like it would be simpler to have a more automated process for moving specified files to /dist before deploying (e.g., the public assets solution in the linked issues).

Also, in the long run - I think making it really easy to add icons and enable the app as a PWA would be fantastic features for framework. For example:

theme: air
favicon: icon.png
pwa: true

just my 2c

[Fil]

Does this mean extra/manifest.json and worker.js would be the same for any project? Can you share your current implementation?

[rbcavanaugh]

I'm not a PWA expert, but I think the service worker will be the same (e.g., https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/basic/service-worker.js).

The steps might be something like:

• insert an HTML snippet / file called header.html into the index.html header on build if pwa: true

<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="www/icons/apple-touch-icon.png">

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("service-worker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log("service worker not registered", err))
  })
}
</script>

• create a manifest.json using the project title, the deploy url, and relevant background/theme colors from the theme argument. Perhaps use a default observable icon, but give the user the option to choose their own. save to /dist or a folder that builds to /dist.

{
  "name": "${project title}",
  "start_url": "${observable-URL}",
  "display": "fullscreen",
  "background_color": "${background color}",
  "theme_color": "{$theme color}",
  "icons": [
    {
      "src": "${image.png}",
      "type": "image/png",
      "sizes": "256x256"
    }
  ]
}

• add serviceWorker.js to /dist or a folder that builds to /dist.
• add a basic html file called offline.html to /dist or a folder that builds to /dist. that includes the offline page referenced by servicerWorker.js

(For the record, I know this is probably not a small ask, just a feature request from a happy user).

[rbcavanaugh]

Is there a way to have a file moved to the root on build (instead of _file)? I think I've figured out a workaround for the PWA otherwise, but the service-worker.js file needs to be at the same level as index.html. Adding the following will ensure the file gets copied to dist, but it just ends up in the wrong place.

//literally just here to get the file copied over. 
const frames = FileAttachment("service-worker.js")

[mbostock]

No, currently you have to copy files to dist yourself after build if you don’t want them to live in _file and be content-hashed (and this isn’t supported yet when deploying to Observable, because build and deploy is currently a single step — but we’ll fix that).

[rbcavanaugh]

thanks for the recent updates! An an update on trying to implement a PWA - this is somewhat possible now on v1.4:

• add relevant html links to icons and manifest.json to head: in config.ts, with icons and manifest.json stored in /docs
• build /dist
• copy service-worker.js manually to /dist (not _file)
• copy primary 144x144px icon referenced in manifest.json to _file manually to avoid hashed filename
• *edit cached filenames in service-worker.js to match hashed filenames in /dist

the main challenge that I don't know how to resolve is these last two items how to adjust manifest.json icon: and service-worker.js for the hashed filenames that are created on build.

I'm also getting an error in Chrome that I don't know if its related to the PWA implementation I've hacked together:
warning: The FetchEvent for "https://robcavanaugh.observablehq.cloud/_events" resulted in a network error response: the promise was rejected.
error: POST https://robcavanaugh.observablehq.cloud/_events net::ERR_FAILED (client.js:2)
error: service-worker.js:66 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request method 'POST' is unsupported at service-worker.js:66:26

toy project that is somewhat working as a pwa: https://github.com/rbcavanaugh/observable-tide

[mythmon]

That error is sort of related. That /_events endpoint is for our project analytics that will power some upcoming features. The polite thing to do would be to have your service worker not try to handle POSTs, since as the error implies you can't do that to the cache anyways.

That being said, I'm surprised you're getting it at all. I didn't expect a service worker inside a project to be able to reach that path, since it is above the service worker's path at /portland-tide/service-worker.js.