Make the Janitor a Progressive Web App

[jankeromnes]

"[Use] modern web capabilities to deliver an app-like user experience." - https://developers.google.com/web/progressive-web-apps

The Janitor should:

• be responsive: Fit desktop, mobile, tablet, or whatever is next.
• be safe: Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
• be linkable: Easily shared via URL and not require complex installation.
• have a manifest: Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
• work offline (Use a Sevice Worker to improve low-bandwidth/offline experience #4): Enhanced with service workers to work offline or on low quality networks.
• stay fresh: Always up-to-date thanks to the service worker update process.
• send push notifications: Make re-engagement easy through features like (optional) push notifications.

[jankeromnes]

Web App Manifest added by 0b10072.

[Coder206]

@jankeromnes Could I help out with writing code for "push notifications"?

[jankeromnes]

@Coder206 that'd be awesome! Thanks for offering :)

I wasn't planning on starting this so soon, but if you're motivated, here are a few more details on what I imagine:

• The Janitor web app could optionally subscribe to the new Push API, using a Service Worker (I'll add a basic one soon).
• The Push subscription should be opt-in, because not everyone likes notifications. This means that notifications should be disabled by default for every user, but there could be an "Enable notifications" switch in your account page.
• Notifications will be especially useful when the Janitor integrates with GitHub, Bugzilla, Treeherder, etc, because we'll be able to notify users for events like "Your automated tests are finished", or "Someone has reviewed your patch", or even "Someone requested a review from you, so we checked out their patch in a new environment and compiled it for you". Right now, we don't have much to notify a user about, but I'd like to work on GitHub and Bugzilla integrations soon.

Do you have any questions or ideas about this plan? Is there anything in particular you'd like to help with? :)

Thanks again!

[Coder206]

@jankeromnes My pleasure! :) I think the plan is great, I my opinion it's a great direction to head in bringing lots of value to the users. From personal experience using the noVNC/Cloud9 in comparison to my Fedora environment experience, I think it would be great to integrate system notifications like "Command 'command name' complete" with these push notifications so that I can be working elsewhere while I run code on the noVNC/Cloud9.

I am definitely interested in working on the code for "Enable notifications switch" and with the integration with third party services like GitHub.

[jankeromnes]

@Coder206 Thanks for your interest and input! I also like the idea of optionally forwarding system messages from virtual Janitor environments to the browser via Push notifications.

Note that the Janitor currently works via two different domains, janitor.technology and ide.c9.io (the Cloud9 IDE used by the Janitor is being served by Cloud9 directly). This probably means two different Service Worker registrations, and two separate Push subscriptions:

• janitor.technology: The Janitor app could allow users to subscribe to Push via their account, for notifications about Janitor-specific events, or events from third-party services like GitHub and Bugzilla. This can be implemented in this repository directly.
• ide.c9.io: Cloud9 can also allow users to subscribe to Push via some IDE settings, and choose to forward system notifications from the backend Docker containers as Push notifications. This can probably be implemented as a Cloud9 plugin, and embedded into all Janitor project images.

[nt1m]

Just audited this through chrome's audits devtool:

[jankeromnes]

I disagree with the icons complaints: The Manifest has a single vector icon that should work everywhere.

[jankeromnes]

I just ran another audit via Chrome's Audits devtools panel:

Here are my take-aways (for the current Janitor front page):

• We could load pages (and become interactive) 3.6 seconds faster by lazy-loading project icons (there are no async or defer attributes for <img> tags, but we could add a tiny bit of JS like David Walsh)
• We could remove 20 KB / 685 ms of bootstrap, because we only use 7% of it (almost done, see Burn bootstrap with fire 🔥 #113)
• Our website should be more accessible (needs a few extra HTML attributes and elements to assist accessibility web browsers, please run a new audit to see exactly which)
• Maybe the website should use our service worker to load offline? (see Use a Sevice Worker to improve low-bandwidth/offline experience #4)
• HTTP/2 would be nice (@ishitatsuyuki contributed HTTP/2 support for our Scout Camp server in Add transparent HTTP/2 with spdy module espadrine/sc#70)

[ishitatsuyuki]

With the current development snapshot with new theme + Nuxt.js:

PWA is Nuxt.js's strength. There are no audits we need to manually get it to pass, everything is set up with one line of import.

(The two failing PWA audits are viewport size (layout issue) and HTTPS redirect (not applicable on localhost).)

[jankeromnes]

With the current development snapshot with new theme + Nuxt.js:

Super exciting! Nuxt.js seems to improve all audit scores, which is great.

• Could you please run an audit on https://janitor.technology as well, in order to compare results in the same browser / machine / setup?
• Could you please go to http://localhost:8080/admin/projects/ and manually add the following projects, and re-run an audit?

ID           NAME             ICON
firefox      Firefox (git)    /img/firefox.svg     
firefox-hg   Firefox-hg (hg)  /img/firefox.svg
servo        Servo            /img/servo.svg
rust         Rust             /img/rust.svg
chromium     Chromium         https://raw.githubusercontent.com/alrra/browser-logos/master/src/chromium/chromium_512x512.png
thunderbird  Thunderbird      /img/thunderbird.svg
fennec       Fennec           /img/firefox.svg
janitor      Janitor          /img/janitor.svg
kresus       Kresus           /img/kresus.svg
discourse    Discourse        /img/discourse.svg
peertube     PeerTube         /img/peertube.svg
yuzu         Yuzu             https://raw.githubusercontent.com/yuzu-emu/yuzu-emu.github.io/master/images/logo.png
dspace       DSpace           /img/dspace.svg
kde          KDE              /img/kde.svg

This should allow a much more precise comparison (even though localhost will probably still be faster than overseas cable).

[ishitatsuyuki]

I guess I'll do that when I have sorted things out (I haven't ported the admin interface yet). Also, I believe Chrome emulates 3G connection so there won't be a large difference unless the server is really slow.