feat(sw): use service worker in development mode #580

KaiVandivier · 2021-06-30T15:06:23Z

Enables apps to use a service worker while using yarn start to run a development server. It compiles a service worker and adds it to the public dir of the app shell where it can be registered.

In development mode, nothing will be served cache-first so that updated files are used. Everything will still be cached network-first (unless filtered) so that it can still be used offline though.

This compilation script also opens up the door for using it in for the production builds too, which gives us more control over the injectManifest configuration, the bundling options, and environment variable usage

KaiVandivier · 2021-07-01T12:39:04Z

cli/src/lib/pwa/getPWAEnvVars.js

-        pwa_enabled: config.pwa.enabled,
-        omit_external_requests: config.pwa.caching.omitExternalRequests,
+        pwa_enabled: JSON.stringify(config.pwa.enabled),
+        omit_external_requests: JSON.stringify(
+            config.pwa.caching.omitExternalRequests
+        ),


These are now all stringified for adding to the dev SW env

KaiVandivier · 2021-07-01T12:39:42Z

cli/src/lib/shell/index.js

-            env: getEnv({ name: config.title, port }),
+            env: getEnv({ name: config.title, port, ...getPWAEnvVars(config) }),


Adds PWA env vars to app env when using start script

KaiVandivier · 2021-07-01T12:40:22Z

sw/src/lib/registration.js

-    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    if ('serviceWorker' in navigator) {


Enables SW registration outside of production environments

KaiVandivier · 2021-07-01T12:40:42Z

sw/src/lib/sections-db.js

-                    console.log('[sections-db] Done upgrading DB')
+                    console.debug('[sections-db] Done upgrading DB')


KaiVandivier · 2021-07-01T12:41:16Z

sw/src/service-worker/service-worker.js

@@ -21,6 +21,7 @@ function setUpKillSwitchServiceWorker() {
    })

    self.addEventListener('activate', async () => {
+        console.log('Removing previous service worker')


Added this because it's pretty important to know that the killswitch worker is getting used

KaiVandivier · 2021-07-01T12:46:45Z

sw/src/service-worker/service-worker.js

+    // SWR strategy for static assets that can't be precached.
+    // Skip in development environments
    registerRoute(
        ({ url }) =>
+            PRODUCTION_ENV &&
            urlMeetsDefaultCachingCriteria(url) &&
            fileExtensionRegexp.test(url.pathname),
        new StaleWhileRevalidate({ cacheName: 'other-assets' })


So newest static assets are available ASAP in development mode, skip SWR strategy for static asset

mediremi

LGTM ✔️

* feat: add & update files, add deps * fix: test cache-first route for file extension * fix: add pwa_enabled to env vars to conditionally register SW * fix: use older syntax * feat: filter out url patterns from d2.config when caching by default * fix: parse url array env var * feat: add manifest.json * chore: add comments * fix: use 'browser' as pwa display mode * feat: add recording started and completed messages * feat: generate manifest.json programatically * refactor: generate manifests before build step to precache * feat: use workbox-cli to precache all static assets * fix: linting error * fix: remove 'pwa enabled' condition for SW event listener * feat: add omitExternalRequests option to d2.config * refactor: tentative SWR strategy for static assets * chore: remove chatty console log * refactor: clean up index.js; crudely compartmentalize SW reg * feat: add 'getRecordedSections' function in sw * feat: tentative messaging interface implementation * refactor: move sw content to new package * chore: add scripts & update deps * chore: clean up shell * chore: fix d2 config entry point * refactor: move manifest injection to cli package * chore: format * docs: add pwa docs * chore: init new example app for PWA * chore: export constants from sw package * chore: rename var * test: add first draft of cacheable section attempt * refactor: improve test component cascading fetch * fix: receive 'children' prop * fix: add recording states var * fix: handle error when idb is not set up * fix: handle required arg errors * fix: handle more errors * feat: section wrapper * chore: add todo * chore: set up demo config & scripts * refactor: rename message keys * refactor: callback interface; linting * fix: recording timeout delay * refactor: cacheable section to avoid unnecessary rerenders * fix: don't record requests during confirmation * refactor: just use sectionId for cache key * fix: try cache if network fails for *all* requests * fix: typo * fix: remove recording on error * chore: remove extraneous 'clientId's in payload * fix: handle recording errors better * fix: clean up listeners on recording success and failure * chore: update comment * fix: convert cachedSections to a map * chore: script for pwa app demo * refactor: add 'useCachedSection' for just one section * chore: rename to initOfflineInterface * chore: formatting * chore: comment and var rename * chore: remove unused 'interface' idea * feat: add circular loader to screen cover * chore: comments from meeting feedback * refactor: init function (and meeting feedback) * refactor: offline interface into a class * chore: add JSDoc comments * refactor: make promptUpdate API more generic * chore: remove debugging log * refactor: handle SW registration in offlineInterface * fix: call 'onUpdate' if new SW is already waiting * refactor: use arrow function to avoid using '.bind()' * chore: add comments * feat: decouple useCacheableSection and <CacheableSection> * fix: avoid side effects if pwa is not enabled * refactor: separate components to illustrate uCS decoupling * chore: remove unused hook * chore: translate user-facing strings * chore: comment * chore: tl strings * chore: remove comments * feat: add alerts to cacheable section * fix: enable unregistration when pwa is not enabled * feat: translations and alerts in useCacheableSection * fix: add pwa-app to main build script * chore: update yarn.lock * fix: dependency resolutions * feat: use alert for feedback when removing section * feat: handle sections update error with alert feedback * refactor: use async try/catch in removeSection() * chore: rename to visualizations list * chore: a newline * chore: demo recordingState API * fix: generate manifests in 'start' script too to avoid error * refactor: make pwa config cleaner and more robust * chore: update d2 config in pwa-app * chore: rename to generateManifests now that it generates two * chore: remove conditional chaining * chore: remove unnecessary var * fix: avoid DB-opening side effect when PWA is not enabled * feat: clear rogue service workers * feat: tear down caches & db if PWA is not enabled * chore: update comment * chore: update comments * refactor: consolidate to one provider * chore: update serve * refactor: use modules from local app-runtime * chore: update demo script to update local runtime * chore: remove unused code that has moved to runtime * chore: add 'verbose' to demo script * refactor: move OfflineInterface to sw package * refactor: move offline interface and provider to app adapter * refactor: add pwaEnabled to app config & offline provider * chore: update script * feat(pwa-app): use online status * chore: move 'serve' package to pwa-app * refactor: quieter logging * refactor(pwa-app): provide loading mask in app * refactor: fix listener clean-up * feat(pwa-app): show more offline API features * refactor(pwa-app): show debounceDelay option * chore: package resolutions * chore(prettier): add vscode plugin workaround * chore(pwa-app deps): update cli scripts * refactor(registration): better custom register/update flow * chore: use newest cli-style * chore: update comment * chore(pwa-app): add comment * chore(sw): inline comments * chore(sw): more comments * chore(sw): more comments * docs(pwa): update a bit * chore(sw): dependencies * chore(deps): add sw to deps * fix(deps): bump @babel/preset-env to fix build error * refactor(registration): change update function signature * feat(sw): use service worker in development mode (#580) * feat(sw): use sw in dev mode (WIP) * chore(sections-db): switch to debug * fix: use correct env vars for dev sw * chore: use available var * chore(pwa-app): remove unused tl strings * feat(adapter): smarter error boundaries (#582) * feat(adapter): add error boundary around app * chore(pwa-app): use --debug in build script * feat(adapter): check for SW update and reload in err boundary * chore: change build order in `yarn build` * chore(deps): update yarn.lock * refactor(offline-interface): improve error protections * docs: add link to PWA page from sidebar [skip-ci] * refactor: use requests size instead of list * chore(sw): use constants for message definitions * docs(pwa): describe development mode * fix(cli): change short_name to config.title in manifest.json * refactor(pwa): prefix pwa_caching env vars * refactor(cli): delete config.pwa from d2.config.json * chore: clarify workbox precache comment * chore(deps): bump react scripts * chore: rename SW for consistency in file * refactor(sw): break into multiple files * refactor(sw): simplify fulfilled and pending requests * refactor(error-boundary): use button and `onRetry` prop * chore: remove unused pwaEnabled prop * feat: show error message in fatal error boundary and allow copying stack trace to clipboard (#592) * chore: brackets around 'if' blocks Co-authored-by: Médi-Rémi Hashim <4295266+mediremi@users.noreply.github.com> * chore(deps): use released app-runtime dependency * refactor: rename sw package to 'pwa' * refactor: use workspace resolution for pwa pkg * chore: comment out './locales' to hopefully fix build on CI * test: update error boundary test * chore: clean up after alpha merge * chore(shell): add to kssw explanation * chore: update snapshot * chore: update versions after merge * chore: remove locales comment Co-authored-by: Médi-Rémi Hashim <4295266+mediremi@users.noreply.github.com>

# [7.3.0-alpha.1](v7.2.0...v7.3.0-alpha.1) (2021-07-23) ### Features * add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592)

# [7.6.0-alpha.1](v7.5.1...v7.6.0-alpha.1) (2021-08-31) ### Bug Fixes * catch errors in completeRecording ([e67ae82](e67ae82)) * check whole URL against filter patterns ([5468114](5468114)) * only return sections with cached data from getCachedSections ([f6242d1](f6242d1)) * reopen indexedDB if global state resets ([0aded68](0aded68)) * return true if either cache or idb entry is removed ([43d8001](43d8001)) * simplify message payload to be compatible with firefox ([5e5a633](5e5a633)) ### Features * add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592) * allow RegEx for filter patterns in d2.config.js ([9699330](9699330)) * use new headerbar with online status indicator ([#626](#626)) ([3bd7d37](3bd7d37))

# [7.6.0](v7.5.1...v7.6.0) (2021-08-31) ### Bug Fixes * catch errors in completeRecording ([e67ae82](e67ae82)) * check whole URL against filter patterns ([5468114](5468114)) * only return sections with cached data from getCachedSections ([f6242d1](f6242d1)) * reopen indexedDB if global state resets ([0aded68](0aded68)) * return true if either cache or idb entry is removed ([43d8001](43d8001)) * simplify message payload to be compatible with firefox ([5e5a633](5e5a633)) ### Features * add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592) * allow RegEx for filter patterns in d2.config.js ([9699330](9699330)) * use new headerbar with online status indicator ([#626](#626)) ([3bd7d37](3bd7d37))

# [8.0.0-beta.4](v8.0.0-beta.3...v8.0.0-beta.4) (2021-09-08) ### Bug Fixes * **dependencies:** update app-runtime to v3 ([8777699](8777699)) * **offline-interface:** prevent infinite update loop in Chrome ([#638](#638)) ([079f6ea](079f6ea)) * **recording-mode:** handle fulfilled requests after recording error ([#642](#642)) ([928e2cb](928e2cb)) * import index.css in index.js so styles are applied ([8db1bf8](8db1bf8)) * **shell:** create new stacking context for roots ([324a095](324a095)) * catch errors in completeRecording ([e67ae82](e67ae82)) * check whole URL against filter patterns ([5468114](5468114)) * only return sections with cached data from getCachedSections ([f6242d1](f6242d1)) * reopen indexedDB if global state resets ([0aded68](0aded68)) * return true if either cache or idb entry is removed ([43d8001](43d8001)) * simplify message payload to be compatible with firefox ([5e5a633](5e5a633)) ### Features * add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592) * allow RegEx for filter patterns in d2.config.js ([9699330](9699330)) * use new headerbar with online status indicator ([#626](#626)) ([3bd7d37](3bd7d37)) ### BREAKING CHANGES * **dependencies:** This updates the app-platform to version 3 of the app-runtime. That means that this version of the app-platform will only work with apps that use version 3 of the app-runtime.

KaiVandivier added 3 commits June 30, 2021 17:04

feat(sw): use sw in dev mode (WIP)

def178e

chore(sections-db): switch to debug

0b3c0ac

fix: use correct env vars for dev sw

9f2ec1a

KaiVandivier commented Jul 1, 2021

View reviewed changes

chore: use available var

13105ac

KaiVandivier commented Jul 1, 2021

View reviewed changes

KaiVandivier requested review from amcgee and mediremi July 1, 2021 12:48

mediremi approved these changes Jul 1, 2021

View reviewed changes

KaiVandivier merged commit 957389f into feat-add-service-worker Jul 1, 2021

KaiVandivier deleted the feat-sw-dev-mode branch July 1, 2021 14:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sw): use service worker in development mode #580

feat(sw): use service worker in development mode #580

KaiVandivier commented Jun 30, 2021 •

edited

Loading

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021 •

edited

Loading

KaiVandivier Jul 1, 2021

mediremi left a comment

		env: getEnv({ name: config.title, port }),
		env: getEnv({ name: config.title, port, ...getPWAEnvVars(config) }),

		if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
		if ('serviceWorker' in navigator) {

		console.log('[sections-db] Done upgrading DB')
		console.debug('[sections-db] Done upgrading DB')

feat(sw): use service worker in development mode #580

feat(sw): use service worker in development mode #580

Conversation

KaiVandivier commented Jun 30, 2021 • edited Loading

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021 • edited Loading

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

mediremi left a comment

Choose a reason for hiding this comment

KaiVandivier commented Jun 30, 2021 •

edited

Loading

KaiVandivier Jul 1, 2021 •

edited

Loading