标签: workbox

(代表某人公开询问/回答.)

我正在使用Workbox生成一个服务工作者,为我的渐进式Web应用程序预留资源.

我不愿意预先安排〜20mb的缩小JavaScript吗？显然,这是巨大的.20mb似乎太过分了.我的计划是只预先处理基本内容,然后使用运行时缓存.

换句话说,什么是一些通用的启发式方法来确定应该和不应该包含在预先缓存有效负载中的内容？

我是服务人员的新手，正在使用Workbox预先缓存我的应用程序外壳并缓存我的api数据。

资产的预缓存工作正常，正在创建和填充缓存。

在第二次重新加载页面之前，运行时缓存不会创建并填充缓存。

我认为这可能是时间问题，因此我在javascript中设置了数据的页面重新加载，但是这仍然没有缓存调用。

我没有做任何特定于创建缓存的操作，应用程序代码为：

...
app.getData = function() {
  var requestHeaders = new Headers({
    Accept: "application/json"
  });
  fetch(app.dataUrl, { headers: requestHeaders })
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
      app.updateCards(json);
  })
  .catch(function(error) {
      console.log('There has been a problem with your fetch operation: ' + error.message);
  });
}
...
if ('serviceWorker' in navigator) {
navigator.serviceWorker
         .register('/my_sw.js')
         .then(function() {
            console.log('Service Worker Registered');
         });
}

app.getData();  # fetch api data

然后在服务人员中：

 ...
 const workboxSW = new self.WorkboxSW({clientsClaim: true});
 // register data url …

在我们的项目中,我们使用webpack-dev-server来运行我们的开发环境.我们目前正在使用工作箱将项目转换为渐进式网络应用程序.

当我们使用NODE_ENV = production运行webpack时,一切正常,因为它首先编译文件,然后工作箱插件将它们拾取并将它们添加到服务工作者.

当我们运行webpack-dev-server hot时,运行workbox插件时构建失败,因为它找不到dist文件夹中的任何文件.

问题似乎是工作箱没有拾取内存中生成的js和css文件,似乎需要文件系统上的文件.

module.exports = {
  context: path.resolve(__dirname, 'front'),
  entry: [
    ...preEntries,
    './react/app.js'
  ],
  output: {
    path: path.resolve(__dirname, 'front-dist'),
    filename: `react/app.${git.gitCommitAbbrev}.js`,
    chunkFilename: `react/[id].app.${git.gitCommitAbbrev}.js`,
    publicPath: '/glass/'
  },
  devtool: isProdEnv ? false : 'eval-source-map',
  stats: {
    chunkModules: false
  },
  module: {
    ...
  },
  plugins: [
    new WorkboxPlugin({
      globDirectory: path.resolve(__dirname, 'front-dist'),
      globPatterns: ['**/*.{html,js,css,woff2}'],
      swDest: path.join(path.resolve(__dirname, 'front-dist/sw/'), 'service-worker.js'),
      handleFetch: true,
      clientsClaim: true,
      skipWaiting: true,
    })
  ]
}

任何关于如何工作的想法

我是服务人员和工作箱的新手。我目前正在使用工作箱来预缓存我的静态资产文件，该文件可以正常工作，并且我希望在运行时也可以缓存我的其他第三方URL，但是直到页面上第二次重新加载后，我的第三方URL才起作用：(

下面显示的是我的服务人员代码的副本，请注意，我故意替换了原始链接到abc.domain.com的内容：）

workbox.routing.registerRoute(
  //get resources from any abc.domain.com/
  new RegExp('^https://abc.(?:domain).com/(.*)'),
  /*
  *respond with a cached response if available, falling back to the network request if it’s not cached. 
  *The network request is then used to update the cache.
  */
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'Bill Resources',
    maxEntries: 60,
    maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
  }),
); 

workbox.routing.registerRoute(
  new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
  //serve from network first, if not availabe then cache
  workbox.strategies.networkFirst(),
); 

workbox.routing.registerRoute(
  new RegExp('^https://use.(?:fontawesome).com/(.*)'),
  //serve from network first, if …

我希望使用Workbox来缓存本地和远程图像资源.目前是否支持,如果是这样的话？

基本上我想拥有以下功能:

workboxBuild.injectManifest({
    swSrc: 'app/sw.js',
    swDest: 'build/sw.js',
    globDirectory: 'build',
    globPatterns: [
      '*.css',
      'index.html',
      'app.js',
      'http://remote/image.jpg'
    ],

如果我手动将远程HTTP资产添加到生成的服务工作文件,那么它可以工作(见下文),但我希望生成该服务工作文件而无需手动编辑它.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded `);
  workbox.precaching.precacheAndRoute([
  {
    "url": "app.css",
    "revision": "f8d6a881fb9d586ef6fd676209e1613b"
  },
  {
    "url": "index.html",
    "revision": "ce6238d5b3c1e4e559349549c9bd30aa"
  },
  {
    "url": "app.js",
    "revision": "4357dbdbcc80dcfbe1f8198ac0313009"
  },
  {
    "url": "http://remote/image.jpg"
  }
]);

} else {
  console.log(`Boo! Workbox didn't load `);
}

我正在为我的公司建立一个PWA用于房屋使用.我应该使用什么方法将持有者令牌附加到来自dom或web-worker的所有请求.

此方法张贴时,我使用的作品如预期form或json但我想一个更清洁或友好的方法,因为我不相信,text回退就足够了.

我在Google的workbox.js服务工作者模块中寻找一个功能,看看我是否可以设置一个拦截,以便在向我的服务器发出请求时始终附加Bearer令牌,因为这样可以解决为什么我最先在这里结束的问题地点.此代码基于Firebase Service Worker设置.并且没有任何东西可以获取并重新添加发布数据到新请求,从而有效地丢弃整个POST主体.

这是我最终得到的代码.

self.addEventListener( 'fetch', ( event ) => {
    const requestProcessor = async ( idToken ) => {

        let req = event.request;

        // For same origin https requests, append idToken to header.
        if ( self.location.origin == getOriginFromUrl( event.request.url ) &&
            ( self.location.protocol == 'https:' ||
                self.location.hostname == 'localhost' ) &&
            idToken ) {


            let contentType = req.headers.get( "Content-Type" );

            // Clone headers as request headers are immutable.
            const …

我在我的 django 项目中使用 workbox-build for Gulp。一切正常，但管理 url 存在一些问题。正如我所见，/admin/* urls 在运行时缓存 - 我可以在 Chrome DevTools/Application/Cache 中看到它们。如何从运行时缓存中排除管理 url？

gulp.js：

gulp.task('service-worker', () => {
   return workboxBuild.injectManifest({
         globDirectory: '/var/www/example.com/',
         swSrc:  '/var/www/example.com/core/templates/core/serviceWorker/sw-dev.js',
         swDest: '/var/www/example.com/core/templates/core/serviceWorker/sw.js',
         globPatterns:['**/*.{html,js,css,jpg,png,ttf,otf}'],
         globIgnores: ['admin\/**','media\/**','core\/**','static/admin\/**','static/core/scripts/plugins/**']
         }).then(({count, size, warnings}) => {
         });

sw.js：

importScripts("https://storage.googleapis.com/workbox- cdn/releases/3.4.1/workbox-sw.js");
workbox.precaching.precacheAndRoute([]);
workbox.googleAnalytics.initialize();
workbox.routing.registerRoute(
workbox.strategies.cacheFirst({
// Use a custom cache name
cacheName: 'image-cache',
plugins: [
  new workbox.expiration.Plugin({
    // Cache only 20 images
    maxEntries: 30,
    // Cache for a maximum of a week
    maxAgeSeconds: 7 * 24 * 60 * 60, …

我按照https://developers.google.com/web/tools/workbox/guides/using-bundlers 上的步骤操作，但是dist/sw.js构建后的文件根本没有被 Webpack 处理。所有的导入语句仍然保持原样，注释没有被删除，并且没有被 Terser 丑化。

我做错了什么？应该sw.js先构建为单独的条目，然后将输出传递给插件吗？

dist/sw.js（实际输出，除了第一行被注入之外，没有任何处理）

importScripts("/dist/precache-manifest.f26179340acee9ac29fc6c689e5cb0c5.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

/* global clients */

import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { StaleWhileRevalidate } from 'workbox-strategies'
import { setConfig, skipWaiting, clientsClaim } from 'workbox-sw'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'

./src/sw.js

/* global clients */

import { registerRoute } …

我包括

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

在我的 webpack 配置的插件中，但在我的网站上运行 lighthouse 时收到此警告。

Web 应用程序清单或 Service Worker 不满足可安装性要求 1 个原因

Service Worker 是一项技术，使您的应用程序能够使用许多渐进式 Web 应用程序功能，例如离线、添加到主屏幕和推送通知。通过正确的 Service Worker 和清单实施，浏览器可以主动提示用户将您的应用添加到他们的主屏幕，这可以带来更高的参与度

失败原因--未检测到匹配的服务工作线程。您可能需要重新加载页面，或者检查当前页面的 Service Worker 范围是否包含清单中的范围和起始 URL。

不注册控制页面和 start_url 的 Service Worker Service Worker 是一项使您的应用程序能够使用许多渐进式 Web 应用程序功能的技术，例如离线、添加到主屏幕和推送通知。

我可以看到服务工作人员正在我的控制台中运行，因为它打印

LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i>         108 URLs, totaling 10.4 MB.

我可以在这次讨论中找到有关编辑sw.js文件或其他内容的所有解决方案。我认为GenerateSW函数的要点是我不必担心创建一个sw.js或任何东西

我也在使用WebpackPWAManifest

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

更新：我可以通过将其添加到我的App.jsx

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function …

我有一个 laravel (inertia/vue) 应用程序（直到最近才使用 laravel-mix），其中包含我使用 pwa 构建器和工作箱构建的 pwa 功能。

随着laravel框架从laravel-mix改为vite，我迁移到vite，它的功能按预期工作，js和css被注入到应用程序入口页面的head元素中，vue页面按预期工作，在开发过程中，不会编译任何内容并将其注入到公共文件夹中，就像 laravel-mix/webpack 的情况一样。

我现在无法像以前一样让 PWA 功能正常工作。由于我不再使用 webpack/laravel-mix，我用这个插件替换了我正在使用的 webpack-workbox 插件：vite-plugin-pwa。

当我使用 laravel-mix 和 webpack-workbox 插件时，我只需指向 webpack 配置文件中的源 Service Worker 文件，并使用我想要的 Workbox 策略来构建最终的 Service Worker 文件，然后将其编译并放置在我的公共目录中文件夹以及其他已编译的 css 和 js 文件。

使用此 vite 插件，我的最终服务工作人员不会被编译并放置在公共目录中，因此应用程序无法发现服务工作人员。我收到 404 错误，并显示以下消息：“无法为范围注册服务工作线程...”，因为没有可用的服务工作线程文件。

我怀疑我没有以正确的方式配置或使用此插件，并且希望获得有关如何执行此操作或以其他方式解决此问题的帮助。

这是我的 vite.config.js 文件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
        }),
        vue({
            template: { …