标签: angular-pwa

我认为我们在 iOS 13.2/13.3 中发现了在独立模式下运行的 PWA 的回归。

由于在 iOS PWA 上无法访问 getUserMedia()，我们依靠HTML5 输入标签上的capture属性让用户拍照并将其发送到服务器。

我们的代码如下所示：

<div class="camera-upload">
     <input type="file" class="hidden" name="uploadPhotoInput" accept="image/*" capture="environment" (change)="onTakePhoto($event)">
     <button type="button" class="btn btn-primary">Take photo</button>
</div>

当我们在 iOS 13.1 或更低版本的设备上以独立模式运行 PWA 时，一切都按预期工作。如果我们在 Safari 上以浏览器模式运行 PWA，则无论 iOS 版本如何，一切都可以正常工作。

当我们在装有 iOS 13.2 或 13.3 的设备上运行 PWA 时，该功能会一直工作，直到我们将 PWA 置于后台，然后再次置于前台。在 PWA 发送到后台后，捕获启动相机，但预览是黑色的。所有相机控制（闪光灯等）都可以工作，但没有拍照。

我们在附加了 XCode 控制台记录器的情况下运行了一个测试，看起来 AVCaptureSession 在应用程序被置于后台一次后无法启动。

这是设备日志的跟踪：

https://pastebin.com/qGZpN6dM

我们正在使用 Angular 8 构建我们的 PWA。

有没有人看到过这样的东西或者可以给我们一个提示？

当我在端口 3330 上提供 Web 应用程序时，我可以使用 --proxy ./src/proxy.config.json 使 Web 应用程序在端口 3333 上工作，但我不知道如何使 http-server 工作以同样的方式

"start": "ng serve -o --port 3330 --watch --proxy-config ./src/proxy.config.json",
"pwa": "http-server -p 8080 -c-1 dist/satoshi-pwa --proxy http://localhost:3333",

proxy.config.json：

{
  "/api": {
    "target": "http://localhost:3333",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "/"
    }
  }
}

环境.ts：

export const environment = {
  production: true,
  apiUrl: 'http://localhost:3333/api'
};

因此标题几乎说明了一切！

我有一个编译为PWA的Angular 7应用，我的package.json在下面。我的后端api是用AzureFunctions V2编写的。

"dependencies": {
    "@angular-devkit/core": "^7.0.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/platform-server": "^7.0.3",
    "@angular/pwa": "^0.10.5",
    "@angular/router": "^7.0.3",
    "@angular/service-worker": "^7.0.3", 
    "@types/date-fns": "^2.6.0",
    "angular-calendar": "^0.26.4",
    "chartist": "^0.11.0",
    "core-js": "^2.5.7",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },

我遇到的问题是，当我将api端点设置为使用https时，出现504网关超时错误。我知道https的配置/功能很好，因为这都是由Azure使用Azure Functions自动配置的。

我所有的API请求也都可以通过https与Postman一起正常工作。

更新-有点发展，如果我在未启用PWA的情况下在本地运行，则会得到以下不同的ERR_SPDY_PROTOCOL_ERROR

这是Chrome中的调试信息 chrome://net-internals/#events

t=9314 [st= 1]        UPLOAD_DATA_STREAM_READ  [dt=0]
                      --> current_position = 0
t=9314 [st= 1]        HTTP2_STREAM_UPDATE_SEND_WINDOW
                      --> delta = -73
                      --> stream_id = 3 …

我使用 Angular Guidelines创建了一个 PWA 。我在拦截应用安装横幅时遇到问题。我正在使用此代码将其推迟到稍后的时间：

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  console.log("Intercepting the app install banner prompt");

  setTimeout(function() {
    deferredPrompt.prompt();
  }, 20000);

  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
  .then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt'); …

我使用 angular PWA 创建了一个应用程序，它具有条形码扫描功能。它在 ios 中运行良好，但问题是每次在此页面上使用时，每次都会请求相机许可，即使用户给了一次，PWA 也会再次请求许可。

一旦用户允许相机并使用该权限，我是否可以存储该权限，以便它不会每次都询问用户？

提前致谢。

这个问题花了我一整天的时间，我不明白发生了什么

我可以看到我的 Service Worker 已注册，但是“有时”当我在开发人员工具中单击离线时，我的域的 ServiceWorker 就会消失！

但这是主要问题，当我重新加载应用程序时，我看到以下行为。

您可以看到 ngsw.json 加载了两次，main.js 加载了 3 次！main.d3ae2084xxxx && main.bbe5073dxxxx && 然后再次 main.d3ae2084xxxx ！

如果我检查两个 ngsw.json 请求的响应，您可以看到两者都显示 main.d3ae2084xxxx 作为 main.js 的正确版本，但它仍然加载 main.bbe5073dxxxx...

第一个 ngsw.json 请求

第二个 ngsw.json 请求

更令人沮丧的是，实际加载的版本是以前的main.bbe5073dxxxx...！！！！

如果有人有任何想法如何发生这种情况，请告诉我。

更新...所以发现了这个优秀的小端点

https://you-app-url/ngsw/state 

这将为您提供有关 Service Worker 的大量调试信息。

就我而言，这个

驱动程序状态：EXISTING_CLIENTS_ONLY（由于初始化失败而降级：哈希不匹配（cacheBustedFetchFromNetwork）： https://dev-xxxx.net/main.eb8468bb3ed28f02d7c2.js：预期b5601102b721e0cf777691d327dc965d40d1c96e，得到83c18fdb4a594 2c964a31c119a57e0b8e16fe46e（缓存清除后）

因此，在我的情况下，这似乎是某种 CDN 问题，当我确定时将更新答案。

现在，我知道有关于此类服务的无提供商的一百万个帖子，我知道需要进入提供商中，请阅读我的整个帖子。

基本上，我试图用来SwUpdate检查是否有更新，如果刷新，请刷新浏览器：

import { SwUpdate } from '@angular/service-worker';
...

export class ...

constructor(
    private _swUp: SwUpdate
){} 


ngOnInit() {
    this.checkForUpdate();
}

checkForUpdate() {
    if (this._swUp.isEnabled) {
       this._swUp.available
           .subscribe(() => {
               window.location.reload();
           });
    }
}

现在我已经注册了服务人员：

import { ServiceWorkerModule } from '@angular/service-worker'; 
...

imports: [
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [],
]

现在，当我运行我的应用程序时，出现以下错误：

NullInjectorError: No provider for SwUpdate!

所以很明显，我尝试将其添加到组件模块中的providers数组中：

import { ServiceWorkerModule, SwUpdate } from '@angular/service-worker'; 
...

imports: [
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [],
],
providers: [
    SwUpdate
]

现在这应该可以工作，但是现在这一次当我运行应用程序时，出现以下错误： …

我有问题@angular/pwa。当我建立在生产模式下，我没有得到ngsw-worker.js，并ngsw.json在我的DIST夹中的文件。

我使用的 pwa 版本是：

@angular/pwa: ^0.13.8
@angular/service-worker: ~7.1.0
@angular version 7

提前致谢

我遇到了与服务人员的问题。Service Worker 不会通过 app.module 自行注册。所以我在 main.ts 中手动注册它。它在在线模式下运行良好。但是当我将网络更改为离线模式时，出现 ngsw.json?ngsw-cache-bustfailing。任何解决方案都会有帮助。

主要.ts

    platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  }).catch(err => console.log(err));

ngsw-catch-bust-失败

ngsw-config.json

 {
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Devtool-screen-shot Devtool-screenshot-2

我正在开发一个主要处理文档（PDF）的 Angular 应用程序。

为了让用户体验更顺畅，我们实现了以下服务工作线程缓存设置，这些设置缓存处理这些 PDF 及其缩略图的某些端点，以减少加载时间：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "imageStoreCache",
      "urls": ["/api/the-image-store/*/*"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "7d",
        "timeout": "10s",
        "strategy": "performance"
      }
    },
    {
      "name": "imageStoreCache",
      "urls": ["/api/the-image-store/*"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "7d",
        "timeout": "10s",
        "strategy": …