Add a service-worker example

[johnsonw]

Service worker can be integrated into the seed framework. This example
demonstrates the following:

1. Use service worker to cache all assets (including the generated wasm file).
2. Register the service worker.
3. If the service worker is not yet activated, an even listener will be registered, waiting for the
   state to reach "activated".
4. When the state reaches "activated", the Notification object will request permission for notifications.
5. If permission is granted, the PushManager will subscribe to the service using an example vapid key.
6. Finally, a PushSubscription will be returned, containing the information that can be passed to a
   notifcation back-end server.

Signed-off-by: johnsonw william.c1.johnson@gmail.com

[MartinKavik]

Could we remove npm/yarn and workbox-cli from the example?

• Examples should demonstrate basic concepts and it looks like Workbox hides some abstractions and contains code generators inside. (I see Workbox for the first time.)

• We don't want to integrate JS tools into the repo. I wasn't able to run the example even when I have yarn installed. And it's often a time-bomb and all examples are used as integration tests both on contributors local machines and on CI pipeline - it would complicate and slow down the verification processes.

One of the big reasons why users migrate from JS frameworks to Seed are too complicated and unreliable JS tools, we shouldn't disappoint them.

[johnsonw]

Sure, no problem. I'll take both workbox-cli and yarn out. Out of curiosity, cargo make start didn't run the example? What happened when you went to http://localhost:8000?

[MartinKavik]

Out of curiosity, cargo make start didn't run the example?

The same result when I run the command directly from the example directory. The same for the the task inject_manifest. I'm not sure if it's a cargo-make bug.

Also there are some commands like rm -rf that would probably fail on "non-linux" platforms and terminals like Windows cmd or powershell. We should use only Rust tools or cross-platform scripts - ideally Duckscript - see, for instance,

seed/Makefile.toml

Lines 276 to 294 in 4387219

	[tasks.for_each]
	description = "Run chosen task for each example in its root. Ex: 'cargo make for_each build'"
	script = [
	'''
	#!@duckscript
	defined = is_defined 1
	assert ${defined} "Wrong number of arguments! Correct example: 'cargo make for_each build'"
	task = set ${1}
	handle = glob_array examples/*/Makefile.toml
	for path in ${handle}
	example_root = dirname ${path}
	echo Example root: ${example_root}
	exec --fail-on-error cargo make --cwd ${example_root} ${task}
	end
	'''
	]

.

I'll do another code review round once yarn/npm & workbox issue is resolved.

[johnsonw]

Thanks for sharing. I've removed the package.json, yarn lock file, workbox-cli etc and will push again shortly.

[johnsonw]

Just giving an idea of what the page looks like. This is a screenshot after I stopped the local server:

The files being cached:

[MartinKavik]

Firefox (Windows) has a problem with the notification request:

Chrome shows a standard request without problems.

[MartinKavik]

Btw cargo make clean is a good idea, I've created a dedicated issue for the global alternative: #526.

[johnsonw]

Yeah I figured it made sense to clean up the pgk directory. Not sure if you saw my update but I changed it to:

[tasks.clean]
command = "cargo"
args = ["clean", "--target-dir", "pkg"]

[johnsonw]

Regarding the firefox error I believe they want a user gesture before subscribing so I'm adding that now. Should have another push shortly.

[johnsonw]

Updates with firefox:

[MartinKavik]

I've added some review comments.

Also please update CHANGELOG.md (I think there is a line "Added examples ..." - you can append your example).
And examples/README.md.

Let me know once you are ready for the next round 🙂

[flosse]

off-topic / BTW:

One of the big reasons why users migrate from JS frameworks to Seed are too complicated and unreliable JS tools, we shouldn't disappoint them.

I totally agree!! 👍

[johnsonw]

Thanks for the thorough review! I'm going through the changes now.

[MartinKavik]

Another round finished!
Major problems should be eliminated once all comments are resolved. In the next round I'll focus on code refactoring / best practices.

Some issues not mentioned in discussions:

• CHANGELOG.md and examples/README.md aren't updated if I'm not wrong (see my previous comment attached to "Request changes" comment.)
• It would be nice to add a button "Clear cache" because it's a bit annoying when localhost constantly returns the cached example even if you run other examples.

[johnsonw]

Thanks for the additional review. I'll address each item once I get off work.

[johnsonw]

I've addressed all by one comment (moving the initial call to the init function). The CHANGELOG.md and README.md are both updated as well. Regarding a button to clear the cache I'll see if I can add one tomorrow. I've been using the developer tools to clear out the cache while testing. Let me know what you recommend regarding the init function.

[MartinKavik]

Blocked by johnsonw#1

[MartinKavik]

Another round finished. Looks pretty good, everything works. I was focusing on style, consistency and cross-platform support. Good job!

Please squash commits when you are done. I rebase on master and commits like Fixups and more fixups would look ugly in the Seed commit history and it wouldn't help during debugging.