Question

我正在尝试将OneSignal与我的Angular 5应用集成。我已经将manifest.json，OneSignalSDKWorker.js和OneSignalSDKUpdaterWorker.js放在src文件夹中，并在.angular-cli.json中的资产下输入了条目，以便可以访问这些文件，但是我仍然面临着服务工作者安装失败的问题。错误是GET http://localhost:4200/OneSignalSDKWorker.js?appId=xxx-xxx--xxx 404 在app.component.ts中，我放置了初始化代码，但仍然出现错误： [Service Worker安装]安装Service Worker失败TypeError：无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）。

ngOnInit(){

    var OneSignal = window['OneSignal'] || [];
    console.log("Init OneSignal");
    OneSignal.push(["init", {
        appId: "xxx-xxx-xxx-xxx-xxx",
        autoRegister: false,
        allowLocalhostAsSecureOrigin: true,
        notifyButton: {
            enable: true
        }
    }]);
    console.log('OneSignal Initialized');
    OneSignal.push(function () {
        console.log('Register For Push');
        OneSignal.push(["registerForPushNotifications"]);
    });
    OneSignal.push(function () {
        OneSignal.on('subscriptionChange', function (isSubscribed) {
        console.log("The user's subscription state is now:", isSubscribed);
            OneSignal.getUserId().then(function (userId) {
                console.log("User ID is", userId);
            });
        });
    });
}

Answer 1

我认为它不能在localhost上运行，您需要将其发布到单独的主机上（可以使用Firebase，它是免费的）。

最简单的解决方案是将One Signal提供的脚本放入您的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      name="viewport"
    />

    ...
    ...

    <link rel="manifest" href="/manifest.json" />
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
    <script>
      var OneSignal = window.OneSignal || [];
      OneSignal.push(function() {
        OneSignal.init({
          appId: 'xxx-xxxx-xxxxx',
        });
      });
    </script>

    ...

将以下内容添加到angular.json


    ...
    "architect": {
        "build": {
          "builder": "ngx-build-plus:build",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/favicon.png",
              "src/manifest.json", <-- this 
              "src/OneSignalSDKUpdaterWorker.js", <-- this 
              "src/OneSignalSDKWorker.js", <-- and finally this one
              "src/assets"
            ],
            "styles": [ 
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["src/assets/sass"]
            },
            "scripts": []
          },
          ...

并将清单和2 * .js文件放入/src/*

就是这样。

我使用这种方法将其用于我的工作。希望有帮助

将OneSignal与Angular 5集成

1 个答案: