我正在使用 React+Service Worker+离线插件来创建一个具有网站持久缓存的 Service Worker。
我想告诉用户何时缓存中存储了新版本并建议刷新页面,但我不知道如何引用 Service Worker 以及我应该监听什么事件(Service Worker 是由 npm“offline-plugin”自动创建的) )。
今天的标准流程:
新流程应该是:
我制作了一个 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) 我正在设置一个支持离线浏览的渐进式 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
创建使用 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 /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 请求这样的标头不会被任何浏览器缓存?
因此,我使用 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) 我正在开发一个支持脱机的应用程序,我想在$ .get()上调用一个ajax调用我将要缓存的域名文件.
如果我离线,通话仍然有效吗?我会假设没有,但我想知道我是否将静态页面包含在离线缓存中,如果它仍然可以工作.
我正在使用HTML5 Local Storage开发GWT离线应用程序.我想使用com.google.gwt.storage.client.Storage(在2.3版中引入)来缓存/存储传输对象.但问题是,就目前而言(版本2.3),存储只能保存字符串值.
是否有可能从客户端代码中使用GWT内置的rpc序列化/解除机制?这样我就可以序列化传输对象并将它们存储在本地存储中,并在需要时检索它们并反序列化内容.
这是我第一次在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代码,但如果需要,生病了.
¿我怎样才能将文件存储在本地?
谢谢大家
我有一个与Relay集成的React Native应用程序,我想为用户提供离线优先体验.
因此,在第一个应用程序启动时,应在加载数据时显示占位符.之后,每次启动应用程序时,我都希望在加载新数据时显示最后的缓存数据.
我从2015年发现了这个问题,基于eyston的回答,我试图使用.实现CacheManager基于relay-cache-manager的AsyncStorage.使用CacheManager,我可以从缓存中保存和加载中继记录,但是当网络被禁用时,应用程序无法显示缓存数据.
在中继获取新数据时,是否有任何使用中继缓存数据的方法?
我正在将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
offline-caching ×10
caching ×2
ajax ×1
android ×1
angular ×1
gwt ×1
gwt-rpc ×1
html ×1
html5 ×1
http ×1
http-caching ×1
javascript ×1
jquery ×1
kotlin ×1
manifest ×1
offline-mode ×1
react-native ×1
relayjs ×1
vue-cli-3 ×1
vue-router ×1
vue.js ×1
web-worker ×1