Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support web worker env #467

Merged
merged 2 commits into from
Dec 21, 2021
Merged

feat: support web worker env #467

merged 2 commits into from
Dec 21, 2021

Conversation

kevinpagtakhan
Copy link
Contributor

@kevinpagtakhan kevinpagtakhan commented Dec 9, 2021 •
edited
Loading

Summary

https://amplitude.atlassian.net/wiki/spaces/GOV/pages/1708655504/JS-SDK+Web+Worker+Support+for+amplitude-js

This PR add support to JS SDK usage in web worker.

  • Create abstraction for global scope and conditionally use window object if it exists; otherwise, use self object.
  • Conditionally use document object if it exists; otherwise, exit early or use fallbacks/default values.
  • Create in-memory storage (WorkerStorage) to use as an alternative for localStorage implementing the same interface
  • Fallback to WorkerStorage with cookies, localStorage, sessionStorage APIs unavailable.
  • Use Fetch API for service worker use case

Usage

<html>
<head></head>
<body>
  <button id="btn-main">click me</button>
</body>
<script src="amplitude.js"></script>
<script src="app.js"></script>
</html>

app.js

amplitude.getInstance().init(API_KEY, USER_ID);
const worker = new Worker('worker.js');

document.getElementById('btn-main').addEventListener('click', () => {
  amplitude.getInstance().logEvent('btn-main:click');
  worker.postMessage({
    trigger: 'btn-main:click',
    ampl: {
      userId: amplitude.getInstance().getUserId(),
      deviceId: amplitude.getInstance().getDeviceId(),
      sessionId: amplitude.getInstance().getSessionId(),
    },
  });
});

worker.js

importScripts('/amplitude.js');
amplitude.getInstance().init(API_KEY);

self.onmessage = (event) => {
  const { ampl } = event.data;
  let result = [];
  for (var i = 0; i < 10000; i += 1) {
    for (var j = 0; j < 10000; j += 1) {
      if (!result[i]) {
        result[i] = [];
      }
     result[i][j] = i + j;
    }
  }
  const last = result[i - 1][j - 1];
  amplitude.getInstance().setSessionId(ampl.sessionId);
  amplitude.getInstance().setDeviceId(ampl.deviceId);
  amplitude.getInstance().setUserId(ampl.userId);
  amplitude.getInstance().logEvent('worker-matrix:complete', { result: last });
};

Checklist

  • Does your PR title have the correct title format?
  • Does your PR have a breaking change?: No

@kevinpagtakhan kevinpagtakhan changed the title feat: support web worker feat: support web worker [WIP] Dec 9, 2021
@kevinpagtakhan kevinpagtakhan force-pushed the AMP-29590-web-worker-support branch from 096375d to cd5e7fe Compare December 14, 2021 06:36
@kevinpagtakhan kevinpagtakhan self-assigned this Dec 14, 2021
@kevinpagtakhan kevinpagtakhan changed the title feat: support web worker [WIP] feat: support web worker Dec 14, 2021
@kevinpagtakhan kevinpagtakhan force-pushed the AMP-29590-web-worker-support branch from cd5e7fe to 16c6fac Compare December 14, 2021 08:51
@kevinpagtakhan kevinpagtakhan changed the title feat: support web worker feat: support web worker env Dec 14, 2021
@kevinpagtakhan kevinpagtakhan marked this pull request as ready for review December 14, 2021 09:48
justin-fiedler
justin-fiedler suggested changes Dec 14, 2021
View reviewed changes
Copy link
Contributor

@justin-fiedler justin-fiedler left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks great! Thanks for the detailed docs.

test/utils.js Show resolved Hide resolved
@kevinpagtakhan kevinpagtakhan force-pushed the AMP-29590-web-worker-support branch from 16c6fac to 415a963 Compare December 15, 2021 07:05
@kevinpagtakhan kevinpagtakhan force-pushed the AMP-29590-web-worker-support branch from 415a963 to 7581abf Compare December 15, 2021 07:14
justin-fiedler
justin-fiedler suggested changes Dec 15, 2021
View reviewed changes
test/web-worker.js Show resolved Hide resolved
test/web-worker.js Outdated Show resolved Hide resolved
test/web-worker.js Show resolved Hide resolved
qingzhuozhen
qingzhuozhen reviewed Dec 15, 2021
View reviewed changes
Copy link
Contributor

@qingzhuozhen qingzhuozhen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this looks good to me. Thanks for making the changes and document it.

@kevinpagtakhan kevinpagtakhan merged commit 52abaf0 into main Dec 21, 2021
@kevinpagtakhan kevinpagtakhan deleted the AMP-29590-web-worker-support branch December 21, 2021 08:56
This was linked to issues Dec 21, 2021
How can we use this with service worker? #420
Closed
Amplitude support in web workers? #240
Closed
Amplitude Init failing in Chrome Extension V3. #448
Closed
github-actions bot pushed a commit that referenced this pull request Dec 21, 2021
@amplitude-sdk-bot
chore(release): 8.14.0 [skip ci]
aeed7bb 
# [8.14.0](v8.13.1...v8.14.0) (2021-12-21)

### Features

* add runNewSessionStartCallback on new sessionId on log event ([#469](#469)) ([bb8b26b](bb8b26b))
* support web worker env ([#467](#467)) ([52abaf0](52abaf0))
@github-actions
Copy link

🎉 This PR is included in version 8.14.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@cdierkens
Copy link

@qingzhuozhen / @justin-fiedler FYI: 52abaf0#r62368057

This PR does break importing from node added in 8.9.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@qingzhuozhen qingzhuozhen qingzhuozhen left review comments

@justin-fiedler justin-fiedler justin-fiedler approved these changes

Assignees

@kevinpagtakhan kevinpagtakhan

Labels
released
Projects
None yet
Milestone
No milestone
4 participants
@kevinpagtakhan @cdierkens @justin-fiedler @qingzhuozhen