Network-first service worker caches #2515

xPaw · 2018-06-05T13:01:17Z

This adds offline "support". The Lounge itself won't connect or show messages, but at least it will render the loading screen and will keep trying to connect to the server.

This is also required for "add to home" in Chrome 68, as they changed the rules.

And finally this allows generating a proper PWA apk on Android, as Chrome considers it a proper PWA app now.

Fixes Implement caching (and cache busting) in service worker #2432
Don't handle or cache link preview media.
I think hashes and GET params need to be stripped from index file request.
Make a button in settings to prompt installing the app.
Fix trying to fetch cross-origin resources (like mp4)

@SinZ163 for review

xPaw · 2018-06-05T15:41:18Z

Install from dropdown	App details

Chrome 68 suggestion	Chrome 68 button in settings

xPaw · 2018-07-05T10:04:51Z

Been running this without problems.

astorije · 2018-07-06T05:15:53Z

client/views/windows/settings.tpl

@@ -14,6 +14,11 @@
 	</div>

 	<div class="row">
+		<div class="col-sm-12" id="webAppInstallButton" style="display:none">


Class instead of inline style?

Switched to hidden attribute

Or hidden CSS class? 🤷‍♂️

The hidden attribute is in standard, so makes sense to use that.

astorije · 2018-07-13T04:43:44Z

I need to play with this a bit but code looks good to me.

I have extremely low confidence that this works as expected on iOS (though who knows, maybe it does), so @McInkay if you want to test it on Android as well that would be great.

AlMcKinlay · 2018-06-05T13:09:57Z

client/js/webpush.js

@@ -9,6 +9,10 @@ let clientSubscribed = null;
 let applicationServerKey;

 if ("serviceWorker" in navigator) {
+	window.addEventListener("beforeinstallprompt", (e) => {
+		e.prompt();


What does this do?

AlMcKinlay · 2018-07-07T16:48:22Z

client/css/bootstrap.css

@@ -44,7 +44,7 @@ audio:not([controls]) {
 }
 [hidden],
 template {
-  display: none;
+  display: none !important;


AlMcKinlay · 2018-07-07T16:48:50Z

client/js/loading-error-handlers.js

+
+	// Trigger early service worker registration
+	if ("serviceWorker" in navigator) {
+		navigator.serviceWorker.register("service-worker.js");


We already register a service worker, right? Will this conflict with that?

Nope, it doesn't, the second registration will just resolve instantly.

AlMcKinlay · 2018-07-07T16:49:58Z

client/js/socket-events/configuration.js

+				installPromptEvent.prompt();
+			}
+
+			$(this).prop("hidden", true);


If the user removes it from the homescreen, that means this button won't be visible anymore, correct? Should we not remove it?

Reloading the page will make it appear again, or depending on how the event gets called?

installPromptEvent can be prompted only once anyway.

Oh right, so it'll always re-show on refresh, of course. That feels less than ideal.

Well it only shows whenever the browser feels like the user can be prompted (that's what Chrome devs suggest doing). It's on the settings page anyway.

I meant the button on the settings page. Are we not hiding it when it's installed here, or have I misunderstood?

The button only shows up when the browser triggers the event. I believe it won't trigger the event if you already have it on the homescreen (thus no button will show up).

But the button is defined as just html...

<button type="button" class="btn" id="webapp-install-button" hidden>Add The Lounge to Home screen</button>

Does chrome find this button and hide it itself?

hidden attribute

I'm an idiot.

AlMcKinlay · 2018-07-18T14:45:43Z

client/service-worker.js

+const excludedPathsFromCache = /^(?:socket\.io|storage|uploads|cdn-cgi)\//;
+
+self.addEventListener("install", function() {
+	self.skipWaiting();


Where does this come from?

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

astorije

Good stuff, thanks @xPaw and previous reviewers!

xPaw added the Type: Feature Tickets that describe a desired feature or PRs that add them to the project. label Jun 5, 2018

xPaw added this to the 3.0.0 milestone Jun 5, 2018

xPaw force-pushed the xpaw/transparent-sw-cache branch 3 times, most recently from e492c21 to 98670e3 Compare June 5, 2018 15:31

xPaw requested a review from a team June 5, 2018 18:56

SinZ163 approved these changes Jun 6, 2018

View reviewed changes

xPaw force-pushed the xpaw/transparent-sw-cache branch 2 times, most recently from f9dac3c to 439a798 Compare June 13, 2018 14:50

xPaw requested a review from astorije June 19, 2018 07:10

xPaw force-pushed the xpaw/transparent-sw-cache branch from 439a798 to 89850f3 Compare June 19, 2018 16:26

astorije assigned astorije and AlMcKinlay Jun 20, 2018

astorije reviewed Jul 6, 2018

View reviewed changes

Network-first cache in service worker

1f604a8

xPaw force-pushed the xpaw/transparent-sw-cache branch from 89850f3 to ab1ce4e Compare July 6, 2018 09:42

xPaw added 2 commits July 6, 2018 15:38

Listen for beforeinstallprompt to trigger 'add to home'

0f6fd4d

Implement caching for static resources

28df906

xPaw force-pushed the xpaw/transparent-sw-cache branch from ab1ce4e to 28df906 Compare July 6, 2018 12:39

AlMcKinlay reviewed Jul 18, 2018

View reviewed changes

AlMcKinlay approved these changes Jul 18, 2018

View reviewed changes

xPaw unassigned AlMcKinlay Jul 21, 2018

astorije approved these changes Jul 25, 2018

View reviewed changes

astorije removed their assignment Jul 25, 2018

astorije merged commit 7b926f7 into master Jul 25, 2018

astorije deleted the xpaw/transparent-sw-cache branch July 25, 2018 04:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Network-first service worker caches #2515

Network-first service worker caches #2515

xPaw commented Jun 5, 2018 •

edited

Loading

xPaw commented Jun 5, 2018

xPaw commented Jul 5, 2018

astorije Jul 6, 2018

xPaw Jul 6, 2018 •

edited

Loading

astorije Jul 7, 2018

xPaw Jul 7, 2018

astorije commented Jul 13, 2018

AlMcKinlay Jun 5, 2018

AlMcKinlay Jul 7, 2018

AlMcKinlay Jul 7, 2018

xPaw Jul 18, 2018

AlMcKinlay Jul 7, 2018

xPaw Jul 18, 2018 •

edited

Loading

AlMcKinlay Jul 18, 2018

xPaw Jul 18, 2018

AlMcKinlay Jul 18, 2018

xPaw Jul 18, 2018

AlMcKinlay Jul 18, 2018

xPaw Jul 18, 2018

AlMcKinlay Jul 18, 2018

AlMcKinlay Jul 18, 2018

xPaw Jul 18, 2018

astorije left a comment

Network-first service worker caches #2515

Network-first service worker caches #2515

Conversation

xPaw commented Jun 5, 2018 • edited Loading

xPaw commented Jun 5, 2018

xPaw commented Jul 5, 2018

Choose a reason for hiding this comment

xPaw Jul 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

astorije commented Jul 13, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xPaw Jul 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

astorije left a comment

Choose a reason for hiding this comment

xPaw commented Jun 5, 2018 •

edited

Loading

xPaw Jul 6, 2018 •

edited

Loading

xPaw Jul 18, 2018 •

edited

Loading