标签: progressive-web-apps

下线时,我的服务工作者收到以下错误:

(unknown) #3016 An unknown error occurred when fetching the script

我的服务工作者看起来像这样:

var version = 'v1'

this.addEventListener('install', function(event){
  event.waitUntil(
     caches.open(version).then(cache => {
       return cache.addAll([
         'https://fonts.googleapis.com/icon?family=Material+Icons',
         'https://fonts.googleapis.com/css?family=Open+Sans:400,600,300',
         './index.html'
       ])
     })
   )
})

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(resp) {
      // if it's not in the cache, server the regular network request. And save it to the cache
      return resp || fetch(event.request).then(function(response) {
        return caches.open(version).then(function(cache) {
          cache.put(event.request, response.clone())
          return response
        })
      })
    })
  )
})

它位于顶级目录,紧邻index.html中的清单导入:

<link rel="manifest" href="/manifest.json">

我在我的条目js文件中导入服务工作者.然后立即注册.

require('tether-manifest.json')
import serviceWorker …

我有一个manifest.json,它有一个start_url属性,我想指向我的单页面应用程序的第一个文件.

这是index.html,它是网站的根源.我希望这是start_url,但该文件永远不会被要求作为URL.

我如何指向start_url网站的相对根？

例如,假设该网站是在https://example.com什么应的值start_url是https://example.com/manifest.json？我希望PWA从而开始https://example.com而不是 https://example.com/index.html.PWA可能放在不同的域上,因此start_url需要是相对的,而不是绝对的.

PWA 可以访问联系人、gps 或使用手机摄像头吗？

这在任何系统（ios、android）中都有可能吗？

是否有任何计划来实现这些功能？

如何关闭/退出我的 PWA？

我以为我能够做到这一点：

window.close();

不幸的是，这会导致通常的错误：

脚本可能只关闭由它打开的窗口。

有没有办法以编程方式关闭我的 PWA？

我希望在push事件之后进行一次获取调用,通过内部api获取notif数据,用户特定的params存储在localstorage或cookie中,例如usertype或country id ..我该怎么办？

TL; DR - 我希望我的服务工作者在第一次访问我的网站后立即激活,而不是在第一次刷新之后激活.

细节:

我已经使用服务工作者构建了一个渐进式Web应用程序,但是注意到在第一次加载时(安装SW时),在用户刷新页面之前,它不会拦截任何网络请求.

有什么办法可以让服务工作者在安装后立即开始拦截请求吗？

我注意到等待服务工作者使用缓存中的项目进行响应的时间并不像您预期​​的那么快.我和两个人sw-precache以及一个自定义的书面服务工作者看到了相同的等待时间.

这个等待时间的可能原因是什么？我该如何减少它？

我fetch在自定义服务工作者上的事件如下所示:

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});

我知道有一些类似的问题，例如在angular 2生产构建之后出现了如此意外的令牌，但实际上并没有回答我的问题。

基本上，我有一个角度应用程序及其PWA，现在每次我第一次访问该网站时，每次进行新的产品构建时，都会遇到类似的错误

然后刷新页面后，该站点即可正常运行。

在任何浏览器/设备上都会发生这种情况

现在我的怀疑是，每次更新应用程序时，捆绑的主要js文件都会更改，并且PWA已缓存了旧的js文件，而该应用程序仍在尝试使用新的js文件。

我的项目结构如下

我有一个根模块，可以延迟加载其他模块，而第一个加载的模块是我的帐户模块，因此用户可以登录

这是我的root-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: '/account/login', pathMatch: 'full' },
    {
        path: 'account',
        loadChildren: 'account/account.module#AccountModule',
        data: { preload: true }
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule],
    providers: []
})
export class RootRoutingModule {

}

因此从技术上讲，用户进入的第一个模块是帐户模块，但是显然必须从根模块重定向它。

所以我所做的是在我的根组件模块中，检查服务工作者是否需要像这样进行更新...

root.component.ts

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

我有一个 Blazor WASM PWA 应用程序，已在 IIS 上的托管服务上发布。我遇到的问题是有时应用程序不会在访问者的浏览器中更新。即他们看到的是旧版本的应用程序。

我知道应用程序缓存应该由 Service Worker 更新，因此您可能需要访问该网站一次，然后关闭浏览器并再次访问它才能获取更新的版本。然而，有时看起来缓存只是被搞乱了，无论如何，应用程序都不会更新。我找到的唯一解决方案是按 F12，转到“应用程序”选项卡并删除其中的所有内容 -> 这将强制再次下载应用程序的最新版本。

有谁知道发生了什么事以及我该如何解决这个问题？

我已经用 React 实现了一个网络应用程序。现在我想让它成为一个可安装的渐进式网络应用程序（PWA），即当用户在移动设备上打开该应用程序时，浏览器应显示默认安装提示。

我该如何实现这一目标？