Add a service-worker example

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 <[email protected]>

Author: johnsonw

CHANGELOG.md

@@ -4,7 +4,7 @@
 - [BREAKING] Rename `linear_gradient!` to `linearGradient!` for consistency with the other svg macros (same with `radial_gradient!` and `mesh_gradient!`) (#377).
 - Fixed `base_path` with a trailing slash parsing / handling.
 - Fixed `C` macro memory / WASM file size issue.
-- Added examples `resize_observer`, `component_builder`, `i18n` and `unsaved_changes` (#459).
+- Added examples `service_worker`, `resize_observer`, `component_builder`, `i18n` and `unsaved_changes` (#459).
 - Fixed `UrlRequested` handling (#459).
 - [BREAKING] Hidden and renamed module `effects` to `effect`.
 - Added `App::update_with_option`.
@@ -29,7 +29,7 @@
 - Build Changes - Enforce minimal cargo-make version: 0.32.1.
 - Added new `Orders` methods `request_url` (#518) and `msg_sender` (#502).
 - [BREAKING] `Orders::msg_mapper` returns `Rc<..>` instead of `Box<..>`.
-- Reexported `pub use wasm_bindgen_futures::{self, spawn_local};` in `lib.rs`.
+- Reexported `pub use wasm_bindgen_futures::{self, spawn_local, JsFuture};` and `pub use futures::{self, future::{self, FutureExt, TryFutureExt}};` in `lib.rs`.
 - Updated example `websocket`.
 - Fixed link handling (#527).
 

Cargo.toml

@@ -134,6 +134,7 @@ members = [
     "examples/pages_keep_state",
     "examples/resize_observer",
     # "examples/server_integration",   # has own workspace
+    "examples/service_worker",
     "examples/subscribe",
     "examples/tea_component",
     "examples/todomvc",

examples/README.md

@@ -98,6 +98,9 @@ A demonstration of event-handlers attached to the `window`.
 ## Server
 Backend server integration & interaction examples.
 
+## Service Worker
+Service worker intergration demo. Includes registration, asset caching, state change messaging and notication subscription.
+
 ### [Auth](auth)
 How to implement login / logout.
 

examples/service_worker/Cargo.toml

@@ -0,0 +1,56 @@
+[package]
+name = "service_worker"
+description = "Seed service worker example"
+repository = "https://github.com/seed-rs/seed"
+version = "0.1.0"
+authors = ["Will Johnson <[email protected]>"]
+edition = "2018"
+license = "MIT"
+
+[lib]
+crate-type = ["cdylib"]
+path = "src/lib.rs"
+
+[[bin]]
+name = "server"
+path = "src/main.rs"
+
+[dependencies]
+#common
+serde = "1.0"
+serde_json = "1.0"
+
+# server
+anyhow = { version = "1.0", optional = true }
+tokio = { version = "0.2", features = ["macros"], optional = true }
+warp = { version = "0.2", optional = true }
+tracing = { version = "0.1", optional = true }
+tracing-subscriber = { version = "0.2", optional = true }
+web-push = { version = "0.7", optional = true }
+
+# client
+apply = { version = "0.3.0", optional = true }
+seed =  { path = "../../", optional = true }
+
+[dependencies.web-sys]
+version = "0.3.44"
+features = [
+  "CacheStorage",
+  "Notification",
+  "NotificationPermission",
+  "ServiceWorker",
+  "ServiceWorkerContainer",
+  "ServiceWorkerRegistration",
+  "ServiceWorkerState",
+  "PushManager",
+  "PushSubscription",
+  "PushSubscriptionJson",
+  "PushSubscriptionKeys",
+  "PushSubscriptionOptionsInit",
+]
+optional = true
+
+[features]
+default = []
+client = ["apply", "seed", "web-sys"]
+server = ["anyhow", "tokio", "warp", "tracing", "tracing-subscriber", "web-push"]

examples/service_worker/Makefile.toml

@@ -0,0 +1,84 @@
+extend = "../../Makefile.toml"
+
+# ---- BUILD ----
+
+[tasks.clean]
+command = "cargo"
+args = ["clean", "--target-dir", "pkg"]
+
+[tasks.build]
+description = "Build client and server"
+clear = true
+dependencies = ["build_client", "build_server"]
+
+[tasks.build_release]
+extend = "build"
+description = "Build client and server in release mode"
+dependencies = ["build_client_release", "build_server_release"]
+
+[tasks.build_client]
+description = "Build client"
+install_crate = { crate_name = "wasm-pack", binary = "wasm-pack", test_arg = "-V" }
+command = "wasm-pack"
+args = [
+    "build",
+    "--target", "web",
+    "--out-name", "package",
+    "--dev",
+    "--",
+    "--features", "client"
+]
+dependencies = ["clean"]
+
+[tasks.build_client_release]
+extend = "build"
+description = "Build client in release mode"
+args = [
+    "build",
+    "--target", "web",
+    "--out-name", "package",
+    "--release",
+    "--",
+    "--features", "client"
+]
+dependencies = ["clean"]
+
+[tasks.build_server]
+description = "Build server"
+command = "cargo"
+args = ["build", "--bin", "server", "--features", "server"]
+
+[tasks.build_server_release]
+extend = "build_server"
+description = "Build server in release mode"
+command = "cargo"
+args = ["build", "--bin", "server", "--features", "server", "--release"]
+
+# ---- START ----
+
+[tasks.start]
+alias = "default_start"
+dependencies = ["build_client"]
+
+[tasks.start_release]
+alias = "default_start_release"
+dependencies = ["build_client_release"]
+
+[tasks.start_server]
+description = "Run the backend server on 8001"
+workspace = false
+env = { "RUST_LOG" = "debug" }
+command = "cargo"
+args = ["run", "--bin", "server", "--features", "server"]
+dependencies = ["build_server"]
+
+[tasks.start_server_release]
+extend = "start_server"
+description = "Run the backend server on 8001 in release mode"
+args = ["run", "--bin", "server", "--features", "server", "--release"]
+dependencies = ["build_server_release"]
+
+# ---- LINT ----
+
+[tasks.clippy]
+alias = "default_clippy"

examples/service_worker/README.md

@@ -0,0 +1,58 @@
+# Service Worker example
+
+Service worker is an exciting technology that is available in most major browsers. To summarize, it can be used to cache
+assets, providing a positive offline experience. Additionally, service worker has the ability to send notifications that
+are generated both locally from a web application as well as from a remote server.
+
+The example in this crate demonstrates the following features:
+
+1. Use service worker to cache all assets (including the generated wasm file).
+1. Register the service worker.
+1. If the service worker is not yet activated, an even listener will be registered, waiting for the
+   state to reach "activated".
+1. When the state reaches "activated", the Notification object will request permission for notifications.
+1. If permission is granted, the PushManager will subscribe to the service using an example vapid key.
+1. Finally, a PushSubscription will be returned, containing the information that can be passed to a
+   notification back-end server.
+
+---
+
+## Prerequisites - Openssl Installation
+
+The server requires that openssl be installed. For OS X systems, openssl can be installed using [`Homebrew`](https://brew.sh/).
+For windows, openssl can be installed by running the following:
+
+1. `git clone https://github.com/microsoft/vcpkg`
+1. cd vcpkg
+1. ./bootstrap-vcpkg.bat
+1. ./vcpkg integrate install
+1. ./vcpkg install openssl-windows:x64-windows
+1. ./vcpkg install openssl:x64-windows-static-md
+
+## Running
+
+Running this example requires both a server and a client to be running at the same time. This is easily achieved by running each
+in its own terminal from the root of the seed project:
+
+Terminal A:
+
+```bash
+cargo make start_server service_worker
+```
+
+Terminal B:
+
+```bash
+cargo make start service_worker
+```
+
+1. Open [http://127.0.0.1:8000/](http://127.0.0.1:8000/) in your browser. This will cache the assets.
+1. Kill the running cargo process to terminate the local dev server.
+1. Refresh the browser and notice that the page loads with all assets.
+1. Click the `Request Push Subscription` button. This will register the subscription with the Push Manager.
+1. Click on the `Send Push Notification` button. A notification should pop up on the browser.
+1. Open Dev Tools and select the `Application` tab.
+1. Click on the `Service Workers` item and view the registered service worker.
+1. In the web page, click the `Unregister Service Worker` button and notice that the service worker is unregistered.
+1. View the `Cache Storage` item in dev tools and take note of the cached items.
+1. In the web page, click the `Clear Cache` button and notice the cache is erased in Dev Tools (Firefox is a bit finicky at showing this).

examples/service_worker/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>Service Worker Example</title>
+</head>
+
+<body>
+  <section id="app"></section>
+  <script src="/public/subscribe.js" type="module"></script>
+  <script type="module">
+    import init from '/pkg/package.js';
+    init('/pkg/package_bg.wasm');
+  </script>
+</body>
+
+</html>

examples/service_worker/private_key.pem

@@ -0,0 +1,8 @@
+-----BEGIN EC PARAMETERS-----
+BggqhkjOPQMBBw==
+-----END EC PARAMETERS-----
+-----BEGIN EC PRIVATE KEY-----
+MHcCAQEEIMij1KbDMDP+OZR8oT8zhJSqEGeRDsL5emKZQIugvflPoAoGCCqGSM49
+AwEHoUQDQgAEpunruwa2ksfEo8Gsxa6v9i8bbaOCH/tp2lBLahsJwn+cxhFYeeXo
+O6eVaqdV2MTNwjam0shaTIgoD18UVVmzrQ==
+-----END EC PRIVATE KEY-----

examples/service_worker/public/images/important-notes.png

@@ -0,0 +1,26 @@
+// ------ ------
+//  Subscribe
+//  @manager: web_sys::PushManager - The PushManager interface of the Push API provides a way to
+//            receive notifications from third-party servers as well as request URLs for push notifications.
+//            - https://developer.mozilla.org/en-US/docs/Web/API/PushManager
+//            - https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.PushManager.html
+//  @api_key: Uint8Array - A Base64-encoded DOMString or ArrayBuffer containing an ECDSA P-256 public key that 
+//            the push server will use to authenticate your application server.
+//            - https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe
+// @returns Promise<web_sys::PushSubscription>
+// Until https://github.com/rustwasm/wasm-bindgen/pull/2288 is included in the new release of wasm-bindgen,
+// this function should be called from the seed app to subscribe to the PushManager. The applicationServerKey 
+// is the vapid key that is used for identification on the back-end server. The `userVisibleOnly` property
+// indicates that the returned push subscription will only be used for messages whose effect is made visible 
+// to the user. It must be set to `true` or the browser will reject the subscription request. This holds true
+// for both chrome and firefox.
+// ------ ------
+window.subscribe = async (manager, api_key) => {
+    let subscription = await manager.subscribe({
+        applicationServerKey: api_key,
+        userVisibleOnly: true
+    });
+
+    console.log("JS subscription", subscription);
+    return subscription;
+}

examples/service_worker/public/subscribe.js

@@ -0,0 +1,36 @@
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+// workbox.core - Provides core workbox functionality. Ths will be used for service worker updating.
+const core = workbox.core;
+
+// workbox.precaching - Helps to simplify the caching process
+const precaching = workbox.precaching;
+
+// We want to publish a new service worker and immediately update and control the page.
+// - https://developers.google.com/web/tools/workbox/modules/workbox-core#skip_waiting_and_clients_claim
+core.skipWaiting();
+core.clientsClaim();
+
+// Cache all of the assets for offline viewing. This can be done manually or by using a tool, such as 
+// `workbox-cli`- https://developers.google.com/web/tools/workbox/modules/workbox-cli.
+// By updating the revision hash after an asset has been updated, the cached resource will be
+// updated in the browser's cache.
+precaching.precacheAndRoute(
+  [
+    { "revision": "12345", "url": "index.html" },
+    { "revision": "12345", "url": "public/subscribe.js" },
+    { "revision": "12345", "url": "public/images/important-notes.png" },
+    { "revision": "12345", "url": "/" },
+    { "revision": "12345", "url": "pkg/package_bg.wasm" }, 
+    { "revision": "12345", "url": "pkg/package.js" },
+  ]
+);
+
+// Listen for and display a push notification if the push event is triggered from the server.
+self.addEventListener('push', (event) => {
+  const title = 'Seed service worker!';
+  const options = {
+    body: event.data.text()
+  };
+  event.waitUntil(self.registration.showNotification(title, options));
+});