标签: offline-caching

Service Worker 在缓存更新时重新加载页面

我正在使用 React+Service Worker+离线插件来创建一个具有网站持久缓存的 Service Worker。

我想告诉用户何时缓存中存储了新版本并建议刷新页面,但我不知道如何引用 Service Worker 以及我应该监听什么事件(Service Worker 是由 npm“offline-plugin”自动创建的) )。

今天的标准流程:

  1. 站长发布网站(V1)
  2. 用户访问网站
  3. 他看到网站 (V1),而 Service Worker 将页面存储在持久缓存中
  4. 站长发布新版本(V2)
  5. 用户重新访问站点时会看到持久缓存中的旧版本,同时 Web Worker 在后台加载新版本 (V2)。
  6. 当用户刷新页面时,他将看到网站版本 2

新流程应该是:

  1. V2 加载在后台完成
  2. 弹出消息告诉用户刷新页面以获取新版本。

javascript web-worker offline-caching service-worker

6
推荐指数
1
解决办法
6233
查看次数

Angular 8 PWA 资产组离线不起作用

我制作了一个 Angular 8.1.0 PWA,当我在我的移动设备上离线测试它时,资产组中的图像和字体没有加载。

这里是 chrome://inspect 从离线移动设备上安装的应用程序的徽标图像的示例错误,从 ngsw-worker.js:596 抛出

Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for https://exampledomain.com/assets/logo.svg returned response 504 Gateway Timeout
    at PrefetchAssetGroup.<anonymous>
Run Code Online (Sandbox Code Playgroud)

这里是 ngws-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

这里是生产构建后的 ngws-config.json:

{
  "configVersion": 1,
  "timestamp": 1563173692955,
  "index": "/index.html",
  "assetGroups": …
Run Code Online (Sandbox Code Playgroud)

offline-caching progressive-web-apps angular

6
推荐指数
1
解决办法
2539
查看次数

如何缓存其他路由以供离线浏览?

我正在设置一个支持离线浏览的渐进式 Web 应用程序。

我已经为我的主要路由 ('domainsample.com/') 设置了离线浏览,即使离线它也会响应 200。

但是当我导航到其他路由 ('domainsample.com/about') 时,我收到一个No Internet Page错误。

这是我在 Heroku 中部署的示例 URL:https : //pwa-hehe.herokuapp.com

我使用 Vue CLI 3 设置项目,使用 Node.js 和 Express.js 在服务器中运行我的 dist 文件夹。

// server.js
const express = require('express')
const path = require('path')
const history = require('connect-history-api-fallback')

const app = express()

const staticFileMiddleware = express.static(path.join(__dirname + '/dist'))

app.use(staticFileMiddleware)

app.use(history({
    disableDotRule: true,
    verbose: true
}))

app.use(staticFileMiddleware)

app.get('/', function (req, res) {
    res.render(path.join(__dirname + '/dist/'))
})

var server = app.listen(process.env.PORT || 3000, function …
Run Code Online (Sandbox Code Playgroud)

offline-caching vue.js progressive-web-apps vue-router vue-cli-3

6
推荐指数
1
解决办法
2247
查看次数

我应该将 Cache-Control: no-cache 添加到我的 REST API 的 GET 端点吗?

创建使用 POST/PUT 的 REST API 很简单。它们是非幂等的,因此默认情况下不会被浏览器缓存。

但是,在创建 GET 端点时,事情变得更棘手了。我担心浏览器(或特定浏览器)在默认情况下会尝试缓存 GET 请求,而我最终会得到陈旧的数据。

这种对激进缓存的恐惧是真的吗?

让我们以端点为例GET /articles/123/comments

尽管这个端点是一个 GET 端点,但每个请求都可以返回不同的内容,因为文章的评论被提交。

  • 这会被缓存吗?
  • 它会被特定的攻击性浏览器缓存吗?

假设没有与响应提供的缓存相关的标头。

content-length: 2518
content-type: application/json
date: Thu, 17 Oct 2019 07:51:59 GMT
status: 200

Run Code Online (Sandbox Code Playgroud)

避免 GET 请求的陈旧数据的最佳实践是什么?

似乎有不同的策略来解决这个问题,但最好的方法是什么?

  • 通过唯一的查询字符串缓存破坏我的 GET 调用?

    例如。 GET /articles/123/comments?nonce=12312310980923409

  • 添加Cache-Control: no-cache(这会一直受到尊重吗?)

  • 添加ETag: xyz_HASH_OF_MY_LIST_OF_COMMENTS

  • 添加Cache-Control: max-age=0(禁用缓存)

  • 添加Cache-Control: max-age=60(以减少缓存的最大持续时间)

  • 只是不要担心并假设没有像ETag, Last-ModifiedGET 请求这样的标头不会被任何浏览器缓存?

caching http http-caching browser-cache offline-caching

6
推荐指数
1
解决办法
1247
查看次数

本地存储加载有线圈的图像?

因此,我使用 Coil 图像加载库通过指定图像 URL 从 API 加载图像。但是,当没有互联网连接时,我希望能够在我的应用程序中看到这些图像。Coil 库中是否支持此类内容,或者我们应该自己将这些图像存储在本地?

如果是这样,我们是否应该使用 Coil 将该图像 URL 转换为位图,然后将其保存在本地?

更新:

顺便说一句,我正在使用带有 Jetpack Compose 的库。

 val painter = rememberImagePainter("$BASE_URL${item.image}") {
        memoryCachePolicy(policy = CachePolicy.ENABLED)
    }
Run Code Online (Sandbox Code Playgroud)

android offline-caching kotlin

6
推荐指数
1
解决办法
1万
查看次数

将Ajax与脱机缓存一起使用

我正在开发一个支持脱机的应用程序,我想在$ .get()上调用一个ajax调用我将要缓存的域名文件.

如果我离线,通话仍然有效吗?我会假设没有,但我想知道我是否将静态页面包含在离线缓存中,如果它仍然可以工作.

ajax jquery html5 offline-mode offline-caching

5
推荐指数
1
解决办法
6335
查看次数

使用GWT中内置的RPC序列化/反序列化机制

我正在使用HTML5 Local Storage开发GWT离线应用程序.我想使用com.google.gwt.storage.client.Storage(在2.3版中引入)来缓存/存储传输对象.但问题是,就目前而言(版本2.3),存储只能保存字符串值.

是否有可能从客户端代码中使用GWT内置的rpc序列化/解除机制?这样我就可以序列化传输对象并将它们存储在本地存储中,并在需要时检索它们并反序列化内容.

gwt serialization gwt-rpc offline-caching deserialization

5
推荐指数
1
解决办法
1349
查看次数

如何配置清单文件

这是我第一次在stackoverflow中,所以如果我违反任何规则或其他什么,请告诉我,并尽快尝试解决它.

我试图配置一个清单(appcache)文件下载2个文件(一个HTML和一个JS),并能够在离线模式下使用该HTML,但经过多次尝试,我无法配置清单文件(或者可能是其他失败的东西?)存储appcache文件.

目前我在同一个文件夹中有3个文件:juego.html,damas.appcache和juego.js

damas.appcache:

CACHE MANIFEST
CACHE:
juego.html
juego.js
NETWORK:
*
Run Code Online (Sandbox Code Playgroud)

并在html文件中... juego.html:

<!DOCTYPE html>
<html manifest="damas.appcache">
...
Run Code Online (Sandbox Code Playgroud)

我不认为我的解释需要更多的HTML代码或javascript代码,但如果需要,生病了.

¿我怎样才能将文件存储在本地?

谢谢大家

html manifest offline-caching

5
推荐指数
1
解决办法
771
查看次数

在获取新数据时,在react-native应用程序上使用中继缓存数据

我有一个与Relay集成的React Native应用程序,我想为用户提供离线优先体验.

因此,在第一个应用程序启动时,应在加载数据时显示占位符.之后,每次启动应用程序时,我都希望在加载新数据时显示最后的缓存数据.

从2015年发现了这个问题,基于eyston的回答,我试图使用.实现CacheManager基于relay-cache-managerAsyncStorage.使用CacheManager,我可以从缓存中保存和加载中继记录,但是当网络被禁用时,应用程序无法显示缓存数据.

在中继获取新数据时,是否有任何使用中继缓存数据的方法?

caching offline-caching react-native relayjs

5
推荐指数
1
解决办法
1111
查看次数

Xamarin形成了Azure移动应用的缓慢同步

我正在将Azure移动应用程序与Xamarin.Forms一起使用以创建具有脱机功能的移动应用程序。

我的解决方案基于https://adrianhall.github.io/develop-mobile-apps-with-csharp-and-azure/chapter3/client/

这是我用于离线同步的代码:

public class AzureDataSource
    {
        private async Task InitializeAsync()
        {
            // Short circuit - local database is already initialized
            if (client.SyncContext.IsInitialized)
            {
                return;
            }

            // Define the database schema
            store.DefineTable<ArrayElement>();
            store.DefineTable<InputAnswer>();
            //Same thing with 16 others table
            ...

            // Actually create the store and update the schema
            await client.SyncContext.InitializeAsync(store, new MobileServiceSyncHandler());
        }

        public async Task SyncOfflineCacheAsync()
        {
            await InitializeAsync();

            //Check if authenticated
            if (client.CurrentUser != null)
            {
                // Push the Operations Queue to the mobile backend
                await …
Run Code Online (Sandbox Code Playgroud)

offline-caching xamarin.android azure-mobile-services xamarin.forms

5
推荐指数
1
解决办法
521
查看次数