标签: angular-service-worker

我正在构建一个新的 Web 应用程序，即使没有互联网连接，它也需要无缝工作。我选择了 Angular 并且正在构建一个 PWA，因为它带有内置功能，可以使应用程序脱机工作。到目前为止，我让服务工作者完美地工作并由清单文件驱动，这很好地缓存了静态内容，并且我已将其设置为缓存一堆我想在应用程序离线时使用的 API 请求。

除此之外，我还使用 localStorage 来存储在用户离线时调用放置、发布和删除 API 请求的尝试。重新建立 Internet 连接后，存储在 localStorage 中的请求将发送到服务器。

在我的概念证明中，用户可以在离线时访问内容，编辑数据，一旦用户的互联网连接重新建立，数据就会与服务器同步。不过，这就是我的困境开始的地方。Service Worker 自动缓存了清单文件中定义的 API 请求数据，还有一个单独的数据存储用于离线时的数据编辑。这会导致用户编辑一些数据、保存数据、刷新页面并且数据由 Service Worker 缓存 API 提供服务。

是否有内置机制来更新 Service Worker 自动缓存的 API 数据？我不喜欢尝试手动解开它，因为它看起来很笨拙，而且我无法想象随着 Service Worker 的发展，它会成为未来的证明。

如果没有标准的方法来实现我需要做的事情，开发人员通过手动将离线数据全部存储在 IndexedDB/localStorage 来完全控制离线数据是否常见？即我可以调用 API 请求并编写一些代码，将结果以结构化格式缓存在 IndexedDB 中以形成离线数据库，然后在用户编辑某些数据时写回离线数据库，并在用户回来时上传任何数据编辑在线的。我不认为这样做会出现任何技术问题，似乎需要付出很多努力才能实现我希望成为标准功能的东西。

我对使用 Angular 进行开发还很陌生，但有多年的其他开发经验。因此，如果我问一些明显的问题，请原谅我，我似乎找不到一篇关于与服务工作者一起使用数据存储的最佳实践的好文章。

谢谢

使用角度5.1.2 Angular-cli 1.6.3

所有文件都很香草.dist文件夹已创建

我的ngsw-config.json

{
"index": "/index.html",
"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
            "files": [
                "/favicon.ico",
                "/index.html"
            ],
            "versionedFiles": [
                "/*.bundle.css",
                "/*.bundle.js",
                "/*.chunk.js"
            ]
        }
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
            "files": [
                "/assets/**"
            ]
        }
    }]   

}

我的app.module.ts使用

  ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

我正在使用vanilla environment.ts和environment.prod.ts

main.ts

import './polyfills.ts';
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.then(() …

似乎angular6不支持与服务工作者进行后台同步.在角度服务中没有任何库的情况下执行此操作需要执行哪些步骤？

https://developers.google.com/web/updates/2015/12/background-sync

如何以及在何处直接在angular6应用程序中访问WorkerGlobalScope,以便可以完成后台同步:

self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

问题是角度CLI生成servicworker文件(ngsw-worker.js).有没有办法注入/修改 /扩展这个文件？是的,我可以手动编辑文件ngsw-worker.js或使用其他花哨技巧.有正式的方法吗？

我使用 Angular6 创建了一个 PWA（渐进式 Web 应用程序）。它在浏览器中按照预期完美运行。我的场景是根据从 URL 获取的参数处理所有应用程序数据

例如：https://<my-site.com>/app/abc123

abc123我需要添加到主屏幕应用程序的参数在哪里。

所以问题是，当用户将应用程序添加到主屏幕时，它会丢失所有参数（我也尝试使用查询参数），而我只留下主机名。我需要将整个 URL 添加为应用程序 URL。你能帮忙吗？

感谢您的时间和帮助！

I have a SSR Angular app which I am trying to transform into a PWA. I want it to be server-side rendered for SEO and for the "fast first rendering" that it provides.

The PWA mode works fine when combined with SSR, but once the app is loaded, when we refresh it, the client index HTML file is loaded instead of the server-side rendered page.

I have dug into the code of ngsw-worker.js and I saw this:

// Next, check …

我在安装事件中使用服务工作者和预缓存资产。

我还有fetch侦听器，它在运行时动态拦截请求和缓存。我知道人们说将 indexeddb 用于动态内容，例如 json 数据和可能的图像。

问题：为什么即使它是请求/响应存储，也为该 json 数据使用缓存 API 不是一个好习惯？

我问这个的原因是因为我尝试了以下操作：我index.html and main.js在install事件中预先缓存，并且在main.js我的axios请求中返回一些 json 并将其放入index.html. 如果我使用动态缓存，这意味着当对该 json api 端点发出请求时，它首先进入我的服务工作者，它获取响应并将其放入cache. 然后我测试了一下，当在离线模式下刷新页面时，我仍然得到相同的结果（json 数据相应地放在 index.html 中）。

所以我猜即使缓存 API 存储请求/响应，它仍然可以完美地用于 json 端点 api url。

知道为什么在使用服务工作者时更喜欢 indexeddb 而不是缓存 API 吗？

每当我使用我的角度项目对index.html进行任何更改时，Serviceworker都不会更新，并且始终在index.html上提供旧的缓存版本。我该如何解决（服务器端和浏览器也没有缓存）

这是我的ngsw-config文件

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.json"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

我对请求的响应标头：

任何想法如何解决这个问题？

谢谢

我正在使用 PWA 构建一个应用程序。我正在使用角。基本上，它是一个播放视频的媒体应用程序。它在 Android 上运行良好，“添加到主屏幕”弹出窗口也出现在 Android 设备中，但在 iOS 设备中不会出现“添加到主屏幕”。

iOS 是否支持“添加到主屏幕”功能？

我正在遵循 angular 的最佳实践来制作 PWA。在进行生产构建 ( ng build --prod --aot) 之后，我还从 dist, on 运行服务工作线程localhost： http-server -p 8080 -c-1 dist 当我尝试将工作线程与我的 Angular 同步时，使用：

navigator.serviceWorker.ready.then(function(swRegistration) {

            console.log('swReady');
});

什么也没发生，似乎 SW 没有与 Angular 通信。使用远程服务器（上传 dist）确实有效。所以似乎问题是 dist 无法使用ng serve. 我究竟做错了什么？

我们的产品是用 Angular 构建的，用户使用 SwPush 进行网络推送通知，并且在传递这些通知时需要高度的可靠性。

问题是推送订阅可能有过期时间，或者可能会被浏览器自动刷新，如下所述： https: //www.w3.org/TR/push-api/#subscription-refreshes（这甚至在网络中实现吗？浏览器还没有？）

我们想要做的是：（1）确保旧的或过期的订阅自动刷新（通过浏览器或通过软件代码）。(2) 将新旧订阅发布到服务器进行持久化，以便将新通知传递到新订阅而不是旧订阅。

我相信这两种情况都应该由 Service Worker 进行，因为用户可能暂时不会打开应用程序本身。问题是：Angular 的 SwPush 是否可以实现这些功能？如果没有，是否有简单的解决方法？

最好的祝愿，