Lightweight HTML Editor in 500 lines

This upcoming progressive webapp is great for quick experiments

The html editor is at https://derekmc.gitlab.io/projects/htmledit

I created this editor to fulfill a very specific need, and that is running quick html, css, or javascript experiments.

I have been working on it on and off for a few months now, and it is finally to a state where it is ready to be shared and tested more in depth.

A Note About Progressive Webapps

Progressive webapps involve a few features, most notably, Service Workers, the HTML5 cache API, and the “manifest.json” file.

Service workers using the cache API allow your app to run even with offline, and the manifest references icons and other meta information that allows an operating system to run it as an app.

With progressive webapps, it is hard to control and predict the install and update experience, so I recommend that service workers first try to download from the live website, and if it’s available, update the cached files. This way, your users won’t get stuck with an outdated version of the app. You should probably avoid caching excessively large files or extensive resources like wiki pages or dictionaries, that make more sense for online viewing anyway.

If everything works right(not currently ready in my app), the browser prompts the user to add the app to the desktop or mobile home page. But unlike an app store, it is very hard to assess and test the user experience, or predict how it might change in the future with browser or security changes. The one redeeming quality of PWA’s, is that even if everything doesn’t work, the user should at least get a basic web experience.

The first PWA I wrote was for draw15. I tried to allow the user to control when the PWA got installed, and view explicitly the installed version, and also control when it was updated or removed. I had multiple copies of the project at different paths, in case in part of the service worker experience failed to update correctly or got locked, they could navigate to the online only version. Service workers operate on a different scope on your domain, basically, instead of hitting your web server over the internet, they run an imitation web server in javascript in the browser, and you can cache results from your actual server for offline viewing.

This is a very thorough and conscientious approach, the problem is, it is very difficult to implement, and changes the user experience. A much simpler approach is what I described previously. For any resource, first try to grab it from the server, if that succeeds, update your cache, if that fails, grab it from your cache. This avoids much of the headache with versions, and trying to communicate with the user how the caching and offline versions work. I expect that with PWAs, users will never quite understand how the offline experience works, and how it is controlled by the browser and not the app. So it will always be useful to offer an app that can be explicitly installed, whether from an appstore or downloaded from your website.

Here is the service worker code to do that. I virtually copied it with minimal changes from google’s service worker tutorial, or perhaps another tutorial.

const Cache = "htmledit-cache-001";

const Urls = [
  "./index.html"
]

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(Cache).then((cache)=>{
      console.log("opened cache");
      return cache.addAll(Urls);
    })
  );
})

self.addEventListener("fetch", (event) => {
  event.respondWith(
    fetch(event.request).then((response) => {
      return caches.open(Cache).then((cache)=>{
        return cache.put(event.request, response.clone()).then(()=>{
          return response;
        })
      })
    }).catch(() =>  {
      return caches.match(event.request);
    })
  )
})

Please feel free to share feedback on this webapp, if it works for and what issues you have. The app manifest is not yet in working order with icons, but other than that it should work, and also work offline. In browsers like chrome you can click “Add to desktop” or “Add to homescreen” from chrome’s menu.

Here’s the link again: https://derekmc.gitlab.io/projects/htmledit

Hope that this is useful, and happy hacking! My next article should be about development from a smartphone, including ergonomic hacks(clipboard cellphone holder with a bluetooth keyboard belt), chroot environments(termux), and specialized cellphone keyboard good for writing code(MessagEase, Hacker’s Keyboard, ASETNIOP, etc)