web/notify.moe
Code Issues Pull Requests Activity

Implemented full page diffs

Browse Source
This commit is contained in:
Eduard Urbach 2017-07-19 05:23:06 +02:00
parent 647aed0e76
commit 197ef0197a
3 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
scripts/AnimeNotifier.ts
View File

@ -108,9 +108,6 @@ export class AnimeNotifier {
// Let"s start
this.app.run()
// Service worker
this.registerServiceWorker()
// Push manager
this.pushManager = new PushManager()
}
@ -158,8 +155,13 @@ export class AnimeNotifier {
}
onIdle() {
// Service worker
this.registerServiceWorker()
// Analytics
this.pushAnalytics()
// Offline message
if(navigator.onLine === false) {
this.statusMessage.showError("You are viewing an offline version of the site now.")
}
@ -170,6 +172,8 @@ export class AnimeNotifier {
return
}
console.log("register service worker")
navigator.serviceWorker.register("/service-worker").then(registration => {
registration.update()
})
@ -178,7 +182,7 @@ export class AnimeNotifier {
this.onServiceWorkerMessage(evt)
})
document.addEventListener("DOMContentLoaded", () => {
let sendContentLoadedEvent = () => {
if(!navigator.serviceWorker.controller) {
return
}
@ -194,8 +198,18 @@ export class AnimeNotifier {
message.url = window.location.href
}
console.log("send loaded event to service worker")
navigator.serviceWorker.controller.postMessage(JSON.stringify(message))
})
}
// For future loaded events
document.addEventListener("DOMContentLoaded", sendContentLoadedEvent)
// If the page is loaded already, send the loaded event right now.
if(document.readyState !== "loading") {
sendContentLoadedEvent()
}
}
onServiceWorkerMessage(evt: ServiceWorkerMessageEvent) {
@ -307,7 +321,6 @@ export class AnimeNotifier {
return Promise.reject("old request")
}
this.app.eTag = response.headers.get("ETag")
return Promise.resolve(response)
})
.then(response => response.text())
@ -316,7 +329,29 @@ export class AnimeNotifier {
}
reloadPage() {
location.reload()
console.log("reload page")
let headers = new Headers()
headers.append("X-Reload", "true")
let path = this.app.currentPath
return fetch(path, {
credentials: "same-origin",
headers
})
.then(response => {
if(this.app.currentPath !== path) {
return Promise.reject("old request")
}
return Promise.resolve(response)
})
.then(response => response.text())
.then(html => {
Diff.root(document.documentElement, html)
})
.then(() => this.app.emit("DOMContentLoaded"))
}
loading(isLoading: boolean) {
@ -477,7 +512,6 @@ export class AnimeNotifier {
credentials: "same-origin"
})
.then(response => {
this.app.eTag = response.headers.get("ETag")
return response.text()
})

3
scripts/Application.ts
View File

@ -13,7 +13,6 @@ export class Application {
loading: HTMLElement
currentPath: string
originalPath: string
eTag: string
lastRequest: XMLHttpRequest
constructor() {
@ -46,8 +45,6 @@ export class Application {
request.onerror = () => reject(new Error("You are either offline or the requested page doesn't exist."))
request.ontimeout = () => reject(new Error("The page took too much time to respond."))
request.onload = () => {
this.eTag = request.getResponseHeader("ETag")
if(request.status < 200 || request.status >= 400)
reject(request.responseText)
else

13
scripts/Diff.ts
View File

@ -3,6 +3,7 @@ export class Diff {
// Reuse container for diffs to avoid memory allocation
static container: HTMLElement
static rootContainer: HTMLElement
// innerHTML will diff the element with the given HTML string and apply DOM mutations.
static innerHTML(aRoot: HTMLElement, html: string) {
@ -14,6 +15,18 @@ export class Diff {
Diff.childNodes(aRoot, Diff.container)
}
// root will diff the document root element with the given HTML string and apply DOM mutations.
static root(aRoot: HTMLElement, html: string) {
if(!Diff.rootContainer) {
Diff.rootContainer = document.createElement("html")
}
Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
console.log(Diff.rootContainer)
Diff.childNodes(aRoot, Diff.rootContainer)
}
// childNodes diffs the child nodes of 2 given elements and applies DOM mutations.
static childNodes(aRoot: Node, bRoot: Node) {
let aChild = [...aRoot.childNodes]