我在服务工作者中使用了sw预先缓存.我只缓存了服务工作者中的浏览器文件夹.所以服务器端渲染不能在服务工作者中工作任何人请帮助我解决这个问题.如果ssr工作服务工作者不工作,反之亦然

下面是我的sw precache config.json

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist/browser',
root: 'dist/browser',
staticFileGlobs: [

'dist/browser/index.html',
'dist/browser/**.js',
'dist/browser/**.css',
'dist/browser/**.ico',
'dist/browser/assets/images/**.jpg',
'dist/browser/assets/images/**.png',
'dist/browser/assets/images/**.gif',
'dist/browser/assets/js/**/**.js',
'dist/browser/assets/js/**.js',
'dist/browser/assets/css/**.css'


 ],

runtimeCaching: [{
urlPattern: /^https:\/\/tg\.s3\.rfyfg\.com\//,
handler: 'cacheFirst'
}]
};

谢谢

我想要实现的目标:

• 用loader/spinner渲染页面

• 如果service-worker.js已注册并处于活动状态,则检查更新

  • 如果没有更新,则删除加载程序
  • 如果updatefound安装了新版本,则重新加载页面
• 否则注册 service-worker.js
  • 什么时候updatefound,意味着新的安装,删除装载机

我正在使用sw-precache模块生成service-worker.js并遵循注册码:

window.addEventListener('load', function() {

  // show loader
  addLoader();

  navigator.serviceWorker.register('service-worker.js')
    .then(function(swRegistration) {

      // react to changes in `service-worker.js`
      swRegistration.onupdatefound = function() {
        var installingWorker = swRegistration.installing;
        installingWorker.onstatechange = function() {
          if(installingWorker.state === 'installed' && navigator.serviceWorker.controller){

            // updated content installed
            window.location.reload();
          } else if (installingWorker.state === 'installed'){

            // new sw registered and content cached
            removeLoader();
          }
        };
      }

      if(swRegistration.active){
        // here I know that …

操作系统:Windows 10 Pro
webpack:1.14.0
sw-precache-webpack-plugin:0.9.1
sw-precache:5.0.0

所以,我启动我的网站并暂时不做任何事情,然后在devTools中生成上面指定的错误消息.如果执行某个过程,则不会出现错误

我的React代码如下:

webpack.config.prod.js

var path = require('path');
var webpack = require('webpack');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  context: __dirname,
  entry: {
    main: path.resolve(__dirname, './client/app'),
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),
    new SWPrecacheWebpackPlugin(
      {
        cacheId: 'flamingoCity',
        filename: 'my-service-worker.js',
        stripPrefix: path.join(__dirname, 'public').replace(/\\/g,"/"),
        maximumFileSizeToCacheInBytes: 6194304,
        minify: true,
        runtimeCaching: [{ …

我注意到等待服务工作者使用缓存中的项目进行响应的时间并不像您预期​​的那么快.我和两个人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);
        })
    );
});

我正在使用sw-precache通过Polymer CLI构建过程生成我的服务工作,因此它旨在更新更新文件的哈希,以表示需要更新缓存.但是我的更新内容没有在缓存中被替换,所以如果我用ctrl + r刷新它会得到一个旧版本但是如果我用ctrl + shift + r刷新则会得到新版本.原因可能是我的服务工作者没有更新.

该文件指出

如果服务工作文件中的字节差异与其当前的差异,则认为它是新的.

,但是如果我的新服务工作者没有更改字节呢？(如果只有一个哈希发生了变化就会发生).如何配置sw-precache以在每次新请求时更新服务工作？

我运行运行Hugo 的网站https://www.igluonline.com,我最近在Google的sw-precache之后安装了一名服务工作者.

这是Config文件:

module.exports = {
  staticFileGlobs: [
    'dist/css/**.css',
    'dist/**/*.html',
    'dist/images/**.*',
    'dist/js/**.js'
  ],
  skipWaiting: true,
  stripPrefix: 'dist',
  runtimeCaching: [{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]
};

注意事项:

虽然有时自动生成的代码会遇到一些错误,但服务工作者可以正常工作并在Web和移动设备上提供离线体验.

它也cache-control设置为max-age=0当我推送新代码时,它进行更新.

问题:

我设置runtimeCaching handler到networkFirst,并根据谷歌的sw-toolbox API(这是目前在sw-precache使用的时候runtimeCaching),它应该从HTTP调用最好让页面,如果没有连接就应该退回到缓存.

但是当我刷新我的代码并打开一个新窗口进行测试时(注意我在更新之前关闭了运行网站的所有选项卡和窗口),它将显示缓存页面.它会自然地下载新的服务工作者,并在第二次重新加载更新页面,但我不希望我的访问者每次都要重新刷新我的主页以获取新内容.

我尝试将runtimeCaching代码更改为以下希望至少让我的主页直接从网络加载,但我没有运气:

runtimeCaching: [{
    urlPattern: /\//,
    handler: 'networkOnly'
  },{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]

现在我不确定所需的PWA体验是否如此 - 意味着用户必须重新加载两次或至少访问两页以查看刷新的代码 - 或者我是否犯了一些错误.我真的很感激.

我可以在使用sw预缓存来生成服务工作者时排除一些网址.我是swprecache.config.json

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist',
root: 'dist/',
staticFileGlobs: [
  'dist/index.html',
  'dist/**.js',
  'dist/**.css',
  'dist/**.ico',
  'dist/assets/images/**.jpg',
  'dist/assets/images/**.png',
  'dist/assets/images/**.gif',
  'dist/assets/js/**/**.js',
  'dist/assets/js/**.js',
  'dist/assets/css/**.css',
  'dist/assets/fonts/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}',
  'dist/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}',
   '!dist/Subscription/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
],

runtimeCaching: [{
  urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//,
  handler: 'networkFirst'
}]

};

我尝试使用不像'!dist/Subscription/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'这样的运算符.但它不起作用.所以我是导航到子网站时获取无法匹配任何路由错误.仅清除浏览器数据后,我可以导航到子网站.任何人都可以帮我解决它,请找我的错误

谢谢

我已经从Create-React-App库创建了一个示例应用程序.当我运行build命令时,它会使用cache-first策略自行生成一个service-worker .但我需要更多功能,比如缓存一些API响应.我不知道如何在自动生成的service-worker中修改包含我自己的代码的脚本.我已经为我的案例找到了一些帮助热线,但这些还不足以全面了解它.

默认情况下,生成的服务工作文件不会拦截或缓存任何跨源流量,如HTTP API请求,图像或从其他域加载的嵌入.如果要对这些请求使用运行时缓存策略,可以弹出然后在webpack.config.prod.js的SWPrecacheWebpackPlugin部分中配置runtimeCaching选项.

以上段落来自官方文件

提前致谢!

在我使用Create React App主屏幕保存我的PWA(测试应用程序)之后standalone,使用chrome和iOS使用safari 在Android上以模式启动应用程序.然后在应用程序启动我的方法火力地堡的设备问我,如果我要开的动作或安装在设备即其他浏览器,.如果我选择打开我的弹出窗口,我会选择正确的Google帐户.signInWithPopup(GoogleProvider)Test AppchromefirefoxTest App

错误:在选择Google帐户后,弹出窗口关闭,而不会重定向回我的帐户Test App.

如果我改为signInWithPopup(GoogleProvider)使用chrome浏览器打开Firebase方法,而不是我Test App的弹出窗口打开谷歌帐户选择,并在我选择谷歌帐户后,弹出窗口关闭并重定向回到Test App暂时,然后

错误:chrome在显示加载指示符的同时 指向要求Google帐户选择的标签,然后挂起.

没有出现控制台错误或警告.

注意1:如果我将应用程序添加到Windows 10 x64计算机上的主屏幕并使用Version 64.0.3259.0 (Official Build) canary (64-bit)并作为独立窗口启动,则弹出不关闭和保持加载的错误也会发生.

注意2:错误也发生在signInWithPopup(Facebookprovider)和signInWithPopup(Twitterprovider) 如果我从主屏幕卸载应用程序并纯粹在浏览器中启动OAuth流程中的签名工作正常.

注3:进一步排除故障后,当OAuth弹出窗口中需要用户输入时,似乎更具体地发生错误.即,例如,如果用户之前Test App通过Facebook 授予了权限,则流程正常,弹出窗口关闭.此外,如果只google检测到一个帐户并且之前已经提供了应用OAuth权限,那么弹出窗口就可以正常工作.但如果设备上存在多个Google帐户,则用户必须输入选择要通过哪个帐户登录 - >这会再次导致前面提到的错误.使用Twitter OAuth时,错误每次都会发生,因为twitter弹出窗口要求用户Authorize App每次都选择.

更新:我认为这可能与谷歌浏览器最近从Webview对OAuth的更改有关.

Windows机器上的错误的GIf:注意即使在授权应用程序后,twitter auth的弹出窗口也永远不会关闭,谷歌和脸谱OAuth也会发生同样的事情.

我很欣赏这个问题可能有点“基于意见”，但是，我认为一个概括的答案可以非常有助于将来有兴趣了解更多关于 PWA 和 Service Worker 的其他人。

背景

我在网上搜索过，但很惊讶地发现，在选择要由 Service Worker 为 PWA 预缓存的文件时，没有明确说明最佳实践是什么。

有各种文章/文档概述了预缓存的作用及其工作原理（有关更多信息，请参见此处），但没有一篇提供“常见做法”的示例。

题

在标准的渐进式 Web 应用程序中，通常会预缓存哪些文件？

我目前在做什么...

为了确保我的应用程序在离线时尽可能地工作，我预缓存了以下所有文件：

• 该index.html模板（我的应用程序是一个Vue的SPA）
• 所有 JS 文件（包括来自动态导入的 JS）
• 所有 CSS 文件（只有一个）
• 网络清单
• 应用程序使用的任何自定义字体
• 任何所需的语言文件（这是动态的，即只会预缓存当前访问者的语言）
• 所有应用程序图标（请参阅下面的列表）
• 所有启动画面（见下面的列表）

就我而言，这大约为 2MB（申请完成后可能会增加）

应用程序图标细分

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon-120x120-precomposed.png
• apple-touch-icon-120x120.png
• apple-touch-icon-180x180-precomposed.png
• apple-touch-icon-180x180.png
• apple-touch-icon-72x72-precomposed.png
• apple-touch-icon-72x72.png
• apple-touch-icon-precomposed.png
• 苹果触摸图标.png
• icon_128x128.png
• icon_144x144.png
• icon_152x152.png
• icon_192x192.png
• icon_384x384.png
• icon_512x512.png
• icon_72x72.png
• icon_96x96.png
• favicon-16x16.png
• favicon-194x194.png
• favicon-32x32.png
• 图标
• mstile-144x144.png
• safari-pinned-tab.svg

启动画面的细分

• 飞溅-1125x2436.png
• 飞溅-1242x2148.png
• 飞溅-1536x2048.png
• 飞溅-1668x2224.png
• 飞溅-2048x2732.png
• 飞溅-640x1136.png
• 飞溅-750x1294.png