CRLSCSClub / CRLSTime

A clock for showing the CRLS schedule during the school day
6 stars 10 forks source link

crlscs.club is missing metadata #31

Open psvenk opened 5 years ago

psvenk commented 5 years ago

The Problem

I noticed that when I go to http://crlscs.club, there is no page title or favicon. This is a minor annoyance, but the problems are much worse for people trying to add the webpage to the home screens of their smartphones (at least for iPhones). On my iPhone SE, when I went to "Add to Home Screen" at http://crlscs.club, the title was not filled out for me (I had to input it manually) and I had to add it to my home screen twice for it to actually show up. Additionally, opening the "app" from my home screen only served as a shortcut to opening the webpage in Safari. However, when I went to https://crlscsclub.github.io/CRLSTime/, the correct page title and favicon show up, and my phone automatically filled out the title as "CRLSTime" and treated it like an app (it took up the full screen and appeared in the app switcher separate from Safari).

While investigating this issue, I read the source code of http://crlscs.club. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title></title>
        <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
  </head>

  <frameset>
    <frame marginwidth=0 marginheight=0 frameborder=0 name="TOPFRAME" src="https://crlscsclub.github.io/CRLSTime/" noresize>
  </frameset>
</html>

This code simply embeds the contents of https://crlscsclub.github.io/CRLSTime/ in the page located at http://crlscs.club, which makes the page function almost exactly the same way as https://crlscsclub.github.io/CRLSTime/. However, the title, favicon, and other metadata of CRLSTime (which are located in the <head> tag inside the embed) are not shown at http://crlscs.club because all of these pieces of information are inside the embed, while browsers look for these pieces of information in the <head> tag of http://crlscs.club (which has an empty <title> tag, no favicon, and no metadata to tell mobile browsers to treat it as a web app).

I have a screen recording of this happening on my phone, but I have not yet uploaded it somewhere so that I can link to it (GitHub doesn't support uploading videos directly to a discussion).

Proposed solution

We do not have to embed https://crlscsclub.github.io/CRLSTime/ at http://crlscs.club. We can have GitHub Pages directly publish content to http://crlscs.club, with https://crlscsclub.github.io/CRLSTime/ redirecting to http://crlscs.club (so that any links pointing to it are not broken). Here are the steps to do this (I think only @dougmcg can do this):

  1. Add crlscs.club as a custom domain for GitHub Pages.
  2. Follow these instructions to set up an apex domain (crlscs.club) and set up a www domain (www.crlscs.club).
  3. Enable HTTPS for the domain. This won't affect the compatibility of the site on older browsers (compared to how it is now), because the site already has an embed from github.io (which enforces HTTPS), which means that the site already does not work on really old browsers that don't support modern encryption algorithms (I tested Firefox 4, 10, and 20, and none of them worked with any GitHub site).

You can read "Using a custom domain with GitHub Pages" for more information.