Question

我在Angular 6中构建了PWA，并打算将Google Maps API用于地理定位。但是，我很快意识到PWA中的地理位置服务仅在用户与UI交互以故意请求其位置时才起作用。但是，我的应用程序应该在用户行驶时在后台跟踪用户的位置。因此，当他们锁定屏幕或转到其他应用程序时，它仍应跟踪它们。作为记录，这是一个私人应用程序，并且用户完全意识到他们正在被跟踪。结果，我使用Cordova将PWA转换为混合应用程序。到目前为止，一切都可以使用我已经拥有的功能（仿真很好，等等），但是我似乎无法弄清楚如何添加地理定位块。我已经安装了this插件，该插件似乎已安装且可用。我见过的所有示例都使用Ionic（目前不需要），适用于用户单击按钮以获取其位置的情况，但是在地理位置东西在服务中并开始时我需要它他们登录后在后台运行。我似乎找不到任何显示该操作方法的信息。这是我想做的事情：

（这还不完整，我只是在GitHub上粘贴了示例代码，打算在我知道它实际被调用时用“ stuff”填充它）

_services / geolocation.service.ts：

import { Injectable } from '@angular/core';
import { Component, ViewChild } from '@angular/core';

declare var cordova: any;

@Injectable()
export class GeolocationService {
  startBackgroundGeolocation() {
    console.log("Geolocation service called...");
    cordova.plugins.BackgroundGeolocation.configure({
      locationProvider: cordova.plugins.BackgroundGeolocation.ACTIVITY_PROVIDER,
      desiredAccuracy: cordova.plugins.BackgroundGeolocation.HIGH_ACCURACY,
      stationaryRadius: 50,
      distanceFilter: 50,
      notificationTitle: 'Background tracking',
      notificationText: 'enabled',
      debug: true,
      interval: 10000,
      fastestInterval: 5000,
      activitiesInterval: 10000,
      url: 'http://192.168.0.3:3000/location',
      httpHeaders: {
        'X-FOO': 'bar'
      },
      // customize post properties
      postTemplate: {
        lat: '@latitude',
        lon: '@longitude',
        foo: 'bar' // you can also add your own properties
      }
    });

    cordova.plugins.BackgroundGeolocation.on('location', function(location) {
      // handle your locations here
      // to perform long running operation on iOS
      // you need to create background task
      cordova.plugins.BackgroundGeolocation.startTask(function(taskKey) {
        // execute long running task
        // eg. ajax post location
        // IMPORTANT: task has to be ended by endTask
        cordova.plugins.BackgroundGeolocation.endTask(taskKey);
      });
    });

    cordova.plugins.BackgroundGeolocation.on('stationary', function(stationaryLocation) {
      // handle stationary locations here
    });

    cordova.plugins.BackgroundGeolocation.on('error', function(error) {
      console.log('[ERROR] cordova.plugins.BackgroundGeolocation error:', error.code, error.message);
    });

    cordova.plugins.BackgroundGeolocation.on('start', function() {
      console.log('[INFO] cordova.plugins.BackgroundGeolocation service has been started');
    });

    cordova.plugins.BackgroundGeolocation.on('stop', function() {
      console.log('[INFO] cordova.plugins.BackgroundGeolocation service has been stopped');
    });

    cordova.plugins.BackgroundGeolocation.on('authorization', function(status) {
      console.log('[INFO] cordova.plugins.BackgroundGeolocation authorization status: ' + status);
      if (status !== cordova.plugins.BackgroundGeolocation.AUTHORIZED) {
        // we need to set delay or otherwise alert may not be shown
        setTimeout(function() {
          var showSettings = confirm('App requires location tracking permission. Would you like to open app settings?');
          if (showSettings) {
            return cordova.plugins.BackgroundGeolocation.showAppSettings();
          }
        }, 1000);
      }
    });

    cordova.plugins.BackgroundGeolocation.on('background', function() {
      console.log('[INFO] App is in background');
      // you can also reconfigure service (changes will be applied immediately)
      cordova.plugins.BackgroundGeolocation.configure({ debug: true });
    });

    cordova.plugins.BackgroundGeolocation.on('foreground', function() {
      console.log('[INFO] App is in foreground');
      cordova.plugins.BackgroundGeolocation.configure({ debug: false });
    });

    cordova.plugins.BackgroundGeolocation.on('abort_requested', function() {
      console.log('[INFO] Server responded with 285 Updates Not Required');
      cordova.plugins.BackgroundGeolocation.stop();
      // Here we can decide whether we want stop the updates or not.
      // If you've configured the server to return 285, then it means the server does not require further update.
      // So the normal thing to do here would be to `cordova.plugins.BackgroundGeolocation.stop()`.
      // But you might be counting on it to receive location updates in the UI, so you could just reconfigure and set `url` to null.
    });

    cordova.plugins.BackgroundGeolocation.on('http_authorization', () => {
      console.log('[INFO] App needs to authorize the http requests');
    });

    cordova.plugins.BackgroundGeolocation.checkStatus(function(status) {
      console.log('[INFO] cordova.plugins.BackgroundGeolocation service is running', status.isRunning);
      console.log('[INFO] cordova.plugins.BackgroundGeolocation services enabled', status.locationServicesEnabled);
      console.log('[INFO] cordova.plugins.BackgroundGeolocation auth status: ' + status.authorization);

      // you don't need to check status before start (this is just the example)
      if (!status.isRunning) {
        cordova.plugins.BackgroundGeolocation.start(); //triggers start on start event
      }
    });

    // you can also just start without checking for status
    // cordova.plugins.BackgroundGeolocation.start();

    // Don't forget to remove listeners at some point!
    // cordova.plugins.BackgroundGeolocation.events.forEach(function(event) {
    //   return cordova.plugins.BackgroundGeolocation.removeAllListeners(event);
    // });
  }

}

然后来自app.component：

    import { Component, OnInit } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import {
      transition,
      trigger,
      query,
      style,
      animate,
      group,
      animateChild
    } from '@angular/animations';
    import { GeolocationService } from './_services/geolocation.service';

    declare const device;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animations: [
        trigger('routeAnimation', [
          transition('* => *', [
            query(
              ':enter',
              [style({ opacity: 0 })],
              { optional: true }
            ),
            query(
              ':leave',
               [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
              { optional: true }
            ),
            query(
              ':enter',
              [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
              { optional: true }
            )
          ])
        ])
      ]
    })

    export class AppComponent implements OnInit{
      title = 'HLD Phlebotomist App';

  constructor(private geolocationService: GeolocationService) { }

      ngOnInit() { 
        document.addEventListener("deviceready", function() {
          this.geolocationService.startBackgroundGeolocation();
          alert(device.platform);
        }, false); 
      } 
    }

但是，当我在android模拟器中运行它时，出现“ Uncaught TypeError：无法读取未定义的属性'startBackgroundGeolocation'”。不知道为什么。有人可以帮助我了解这里的结构吗？我认为我的问题是我不完全了解如何“调用” Cordova插件。

Answer 1

这里的问题是Cordova CLI正在拉出插件的2.x版本，但是文档是针对3.x的。在2.x中，插件文件为backgroundGeolocation.js，而3.x将其更改为BackgroundGeolocation.js，并添加了BackgroundGeolocation.d.ts文件以支持TypeScript实现。由于它区分大小写，因此被错误的名称调用并失败。在我的cordova plugin add <plugin-name>命令中添加@latest可以删除正确的版本，然后它开始工作。

Answer 2

我在这里写这篇文章是因为我很难在一个地方找到这些答案，并从各种博客文章和stackoverflow文章中将它们拼凑在一起，所有这些看起来都有些不完整。

（1）非常重要的引导程序

事实证明，持续出现错误和头痛的原因是，在某些情况下，Angular和核心应用程序将在移动设备（包括android和iOS）准备提供对相机等系统资源的访问权限之前进行引导。这是我一直在处理的事情，直到最终在我们的应用程序中添加SSO作为第一步，使我在超过75％的加载场景中都遇到了问题

这里的解决方案非常简单，在您的角度应用程序的main.ts中添加了一个javascript document.addEventListener，它会等待cordova说设备准备就绪，然后再引导角度。

document.addEventListener('deviceready', bootstrap, false);

实际上，我们通过添加一个条件块进一步迈出了这一步，该条件块仅在我们在环境变量中将其打开时才注入cordova脚本标签。这使得在我们的测试环境中使用ng serve来测试非Cordova功能更加容易。

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e));
const bootstrapCordova = () => {
  /** Dynamically load cordova JS **/
  console.log('bootstrapped cordova');

  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'cordova.js';

  document.head.appendChild(script);

  if (script['readyState']) {
    // IE 2018 and earlier (?). They're migrating to using Chromium under the hood, so this may change
    script['onreadystatechange'] = () => {
      if (script['readyState'] === "loaded" || script['readyState'] === "complete") {
        document.addEventListener('deviceready', bootstrap, false);

      }
    };
  } else {
    // All other browsers
    document.addEventListener('deviceready', bootstrap, false);
  }
};
environment.cordova ? bootstrapCordova() : bootstrap();

（2）识别输入

由于cordova及其插件未作为Angular的一部分自启动，因此我们需要在我们的Angular项目中添加cordova类型。虽然可以使用“窗口”函数以某种特殊的方式编写不带此代码的代码，但我们发现重要的是类型输入解决了很多问题。值得庆幸的是，有人为几乎每个核心的cordova插件贡献了打字稿类型。我们尝试将这些类型安装在类型文件中，但是发现在编译时关于类型但没有库的情况，angular会发牢骚。根据记录，我们认为以下方法不可行，但一次又一次，它们是唯一可以停止抱怨的可复制步骤。

首先，我们将angular应用程序维护在与cordova分离的文件空间中，然后在运行ng build --prod时将其写入www文件夹。这意味着我们的cordova应用程序和angular应用程序都有一个唯一的package.json来管理npm依赖项。为了访问angular中的cordova类型，我们需要将cordova和我们正在使用的所有插件添加到angular项目的package.json中。

"cordova": "latest",
"cordova-plugin-camera": "latest",
"cordova-plugin-inappbrowser": "latest"

第二个-安装完这些依赖项后，我们需要为我们的项目生成一个类型文件。值得注意的是，npm中不赞成使用“ types”包，而推荐使用“ @types”。但是我们无法弄清楚如何使用“ @types”完成我们想要的最终结果，因此目前我们正在使用“ typings”

npm install –g typings
typings search cordova
typings install dt~cordova --global --save

这将在您运行命令的位置生成一个打字文件夹，因此我们建议在您的角度项目的根目录中执行此操作。一旦完成，将类型文件添加到tsconfig.app.json中，您就可以开始编码了。

"types": [
  "./typings/globals/cordova"
]

第三-文件级导入

在我们的研究中，我们看到了许多在代码级别实现键入的方法，但是在我们的项目中只有一种可行。逻辑要求我们应该能够做一个简单的事情：

import {*} from 'typings/globals/cordova'

尽管我们的想法在ng构建上是不错的--prod却不是。相反，我们通过以下方式引用类型文件：

/// <reference path="../../../../typings/globals/cordova/index.d.ts" />

完成此操作后，我们就能从IDE中的完整智能感知中受益。

export class SplashComponent implements AfterViewInit, OnDestroy {
  private browser: InAppBrowser;
  private cordova: Cordova;

  constructor(private route: Router) {
    this.cordova = window['cordova']
this.browser = this.cordova.InAppBrowser;
  }

  ngAfterViewInit(){
      this.currentBrowser = this.browser.open('https://www.google.com', '_blank', 'location=yes');
}

}

（3）构建科尔多瓦

如果您在其他任何地方都未曾看到过它，那么知道处理您在cordova中进行的构建所遇到的任何剩余问题的最佳方法是删除平台，然后再次添加。

cordova platform rm android
cordova platform add android

使用此工作流程，我们能够消除几乎100％的应用程序运行时错误和应用程序性能飞涨。

希望您遇到这些问题，因为这篇文章希望存在，对您很有帮助。

注意：处理此代码“窗口”元素的正确Angular方法是使用注入令牌。我没有在这里包括它，因为这是一篇很长的文章。我可能会在以后对其进行更新以包括此内容。

如何在没有离子的情况下使用Angular调用Cordova插件

2 个答案: