标签: service-worker

在谷歌C​​hrome控制台旁边的HTTP状态代码Request我们有信息(from ServiceWorker).

可以Request知道这Response来自ServiceWorker？比较date从Response Headers可能？

我正在使用 ServiceWorker 来缓存一些资产，我想让用户知道所有文件都已成功缓存后，以便他们知道可以离线访问内容。什么时候做这件事合适？

我有几个console.log()对事情的流程有一个想法。这是我注册 ServiceWorker 的时刻：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/serviceWorker.js')
        .then(function(registration) {
            console.log('* ServiceWorker registration successful');
        })
        .catch(function(err) {
            console.log('* ServiceWorker registration failed: ', err);
        });
}

在 ServiceWorker 内部：

self.addEventListener('install', function(event) {
    console.log('* Installing Service Worker...');

    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            console.log('* Opened cache');
            return cache.addAll(filesToCache).then(function () {
                console.log('* Files have been cached!');
            });
        })
    );
});

控制台显示：

* Installing Service Worker...
* Opened cache
* ServiceWorker registration successful
* Files have been cached!

所以我认为触发此通知的正确时刻是在 之后.addAll() …

因为我正在构建渐进式Web应用程序.我们面临服务工作者的奇怪行为.

1. Clear cache and unregister service worker
2. Go to www.example.com
3. Examine the network calls for resources (JS/CSS)

预期结果:只有一个网络请求应该用于一个资源.

实际结果:正在为每个资源发出两个网络请求[

我正在学习服务工作者 API。我在其中发现了更多很酷的功能。但让我兴奋的是，为什么它只适用于 https 站点而不适用于 http 站点？.

我相信这与安全有关，但我在浏览时找不到原因。因此，任何解释这一点的解释都值得赞赏......

此代码段有助于将应用程序选项卡置于焦点或使用该URL打开新选项卡.如果选项卡已打开,是否可以更改URL(基于用户单击的通知).

  event.waitUntil(
  clients.matchAll({
      type: 'window'
  })
  .then(function(windowClients) {
      for (var i = 0; i < windowClients.length; i++) {
          var client = windowClients[i];
          if (url.test(client.url) && 'focus' in client) {
              return client.focus();
          }
      }
      if (clients.openWindow) {
          return clients.openWindow('/#/chat');
      }
  })
  );

我正在开发PWA,我在我的网站上安装并激活了一名服务人员.它在本地服务器上进行测试时运行良好,但是当我实时发送代码时,它会失败.

这是我的SW:

const cacheName = 'v1';
const cacheFiles = [
    '/',
    '/css/styles.css',
    '/images/test1.png',
    '/images/test2.png',
    '/js/app.js',
    '/js/sw-registration.js'
]

// Install event
self.addEventListener('install', function(event) {
    console.log("SW installed");
    event.waitUntil(
        caches.open(cacheName)
        .then(function(cache){
            console.log('SW caching cachefiles');
            return cache.addAll(cacheFiles);
        })
    )
});

// Activate event
self.addEventListener('activate', function(event) {
    console.log("SW activated");
    event.waitUntil(
        caches.keys()
        .then(function(cacheNames){
            return Promise.all(cacheNames.map(function(thisCacheName){
                if(thisCacheName !== cacheName){
                    console.log('SW Removing cached files from', thisCacheName);
                    return caches.delete(thisCacheName);
                }
            }))
        })
    )
});

// Fetch event
self.addEventListener('fetch', function(event) {
    console.log("SW fetching", event.request.url);
    event.respondWith(
        caches.match(event.request)
        .then(function(response){
            console.log('Fetching new files'); …

我无法显示 offline.html 页面。我不断得到The FetchEvent for "https://my-domain.com" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

这是我的 service-worker.js 的片段，它应该offline.html在网络不可用时返回。

self.addEventListener('fetch', function(event) {
     if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        if(event.request.url.includes("my-domain.com")){
            console.log(event.request);
            event.respondWith(
                caches.match(event.request).then(function(resp) {
                    return resp || fetch(event.request).then(function(response) {
                        let responseClone = response.clone();
                        caches.open(CACHE_NAME).then(function(cache) {
                            cache.put(event.request, responseClone);
                        });
                        return response;
                    });
                }).catch(function() {
                    return caches.match("/offline.html");
                })
            );            
        }
    }
});

下面是我的网络请求的console.log（离线时页面刷新）

Request …

我有一个Ionic (5) Angular应用程序，其 PWA packges 设置为ng add @angular/pwa --project app（在 angular.json 中它仍然命名为“app”，所以--project app应该是正确的）。

当我使用服务提供生产构建时，一切都在我的本地计算机上运行良好（我被要求安装pwa应用程序，离线模式工作等）。

但我想从子目录在我的服务器上托管 PWA，如https://example.com/www. 所以我调整了index.html<head>以包含<base href="/www/ />并将.htaccess放入我的服务器上的www文件夹中，其中包含

<IfModule mod_rewrite.c>
    RewriteEngine On

    # -- REDIRECTION to https (optional):
    # If you need this, uncomment the next two commands
    # RewriteCond %{HTTPS} !on
    # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
    # --

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]
</IfModule>

当我在浏览器中（Chrome、Firefox、Androd 上的 …

我决定尝试使用 workbox，但我看到的所有指南都讨论了与 React 制作的 Service Worker 集成。

但是当我安装 CRA 时，我不再获得为我定制的 Service Worker。我需要做什么才能在这里集成工作箱？

这是我当前的代码：

应用程序.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import swDev from './swDev'
     
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    swDev()

swDev.js

    export default function swDev(){
      let swURL = `${process.env.PUBLIC_URL}/sw.js`;
      if('serviceWorker' in navigator){
        navigator.serviceWorker.register(swURL).then(res => {
          console.log('Service worker has been registered');
        }).catch(err => console.log('Service worker was not registered'))
      }
    }

那么这就是公共文件中的 Service Worker

const cacheVersion = 'v1'


self.addEventListener('install', ()=>{
  console.log('Service worker has been …

在 my 中client.js，我注册了一个 service worker：

var someVariable;

if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js')
    .then(function() {
        console.log('Service worker registered.');
        if(localStorage.someVariable) {
            someVariable = JSON.parse(localStorage.someVariable);
        };
    });
};

现在，在我的client.js代码下方，我想检查是否client.js有一个活动的service worker 启动并运行。

从内部这样做在service-worker.js某种程度上相当于测试self.registration，因为self.registration.active似乎不起作用。

但是，从内部对活动服务工作者的等效测试是client.js什么？

navigator.serviceWorker.ready返回 a Promise，但我不知道这是否真的是我需要在/作为条件使用的。