Angular/pwa 0.7.0-beta.1 Can't able to cache dynamic data
up vote
-1
down vote
favorite
I am trying to cache API data in my app. I am using Angular6 and @angular/PWA 0.7.0-beta 1. But I am unable to cache API data.
This is my ngsw-config.json file
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://fonts.gstatic.com/**",
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}],
"dataGroups": [
{
"name": "FeedbackAnalytics",
"urls": [
"https://mytechhelp.accenture.com/FeedbackAnalytics"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
},
{
"name": "JsonPlaceholder",
"urls": [
"https://jsonplaceholder.typicode.com/posts"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
}
]
}
this how I am calling api.
public ngOnInit(): void {
this.username = this.excelService.getCookie('userName');
this.userIsRanjan = this.excelService.getCookie('email') === 'ranjan.satya@accenture.com' ? true : false; // ? false in production
// console.log(this.userIsRanjan);
if (this.username === '') {
this.username = 'Guest';
}
this.initTopTabsData();
this.initTopBlockData();
this.loadGraphData(this.calenderStart, this.calenderEnd);
setInterval(() => {
console.log('Interval reached in 10000 ms');
this.initTopBlockData();
this.getGraphData(this.calenderStart, this.calenderEnd, () => { });
this.initTopTabsData();
}, 30000);
}
this is this.initTopTabsData() method
initTopTabsData() {
// console.log('initTopTabsData reached');
// console.log('today, uptodate' this.getUptoDate(), this.upToDate);
// myCode
// ? vijay myCode
// FeedBack
setTimeout(() => {
this.dashboard.getJsonData()
.subscribe(res => console.log(res));
}, 30000); //Here we get json data for caching from dummy api
this.dashboard.getFeedBack({
'StartTime': '2018-07-01 00:00:00',
'EndTIme': this.getUptoDate()
}).subscribe((rs: any) => {
this.feedBackAmazing = rs.FeedbackMessages[0].Count;
this.feedBackGood = rs.FeedbackMessages[1].Count;
this.feedBackBad = rs.FeedbackMessages[2].Count;
this.totalFeedbackCount = rs.TotalFeedbackCount;
});
// FeedBack
// New Users Percentage
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousWeekStart(),
'EndTime': this.getPreviousWeekEnd()
}).subscribe((rs: any) => {
this.lastWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.today
}).subscribe((rs: any) => {
this.currentWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
}).subscribe((rs: any) => {
this.tillDateNewUsers = rs.UserCount;
this.newUsers.incrementTo(this.tillDateNewUsers, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
this.tillLastWeekNewUsers = rs.UserCount;
});
this.NewUsersCalculation();
// New Users Percentage
// Total Users Percentage
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
this.totalUserCount = rs.RepetitiveUserCount;
console.log('total user count', this.totalUserCount);
this.totalUsers.incrementTo(this.totalUserCount, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.getPreviousMonthEnd()
}).subscribe((rs: any) => {
console.log('lastMonthTotalUsers', this.lastMonthTotalUsers);
this.lastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tilllast month Total Users', this.tillLastMonthTotalUsers);
this.tillLastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.totalUsersCalculation();
// Total Users Percentage
// Avg Daily Active Count percentage
this.dashboard.getRepetUserCount({
'StartTime': this.today,
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('todayUsers', rs);
this.todayUsers = rs.RepetitiveUserCount;
console.log('todayUsers', this.todayUsers);
this.avgDailyActiveCount.incrementTo(this.todayUsers, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getSevenDaysStartFromNow(),
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyActiveUsers', this.lastWeekDailyActiveUsers);
this.lastWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyActiveUsers', this.currentWeekDailyActiveUsers);
this.currentWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.avgDailyActiveUsers();
// Avg Daily Active Count percentage
// Avg Daily New Count percentage
// this.dashboard.getRepetUserCount({
// 'StartTime': this.today,
// 'EndTime': this.upToDate
// }).subscribe((rs: any) => {
// this.todayNewUsers = rs.TotalRepeatUsers;
// });
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyNewUsers', this.lastWeekDailyNewUsers);
this.lastWeekDailyNewUsers = rs.TotalRepeatUsers;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyNewUsers', this.currentWeekDailyNewUsers);
this.currentWeekDailyNewUsers = rs.TotalRepeatUsers;
this.myCounterTotalToday.incrementTo(this.currentWeekDailyNewUsers, 5, 200);
});
this.avgDailyNewUsers();
// Avg Daily New Count percentage
// Total Messages
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
'ChannelId': ''
}).subscribe((rs: any) => {
console.log('uniqueUserCount', this.uniqueUserCount);
console.log('totalMessageCount', this.totalMessageCount);
// console.log('uniqUeuserCountList', this.uniqUeuserCountList);
this.uniqueUserCount = rs.UserCount;
this.totalMessageCount = rs.MessageCount;
this.uniqUeuserCountList = rs.UniqueUserDayCount;
this.myMsgCounter.incrementTo(rs.MessageCount, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.lastMonthEnd
}).subscribe((rs: any) => {
console.log('lastMonthTotalMessages', this.lastMonthTotalMessages);
this.lastMonthTotalMessages = rs.MessageCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tillLastMonthTotalMessages', this.tillLastMonthTotalMessages);
this.tillLastMonthTotalMessages = rs.MessageCount;
});
this.totalMessages();
// Total Messages
// ? vijay myCode
}
What I am expecting is
Caching Example
What I am getting is
screenshot of cache
Above is my ngsw-config.json file. I am trying to fetch API for every 30 secs.
But I am able to cache data from Jsonplaceholder API.
Thanks in advance
angular angular6 progressive-web-apps angular-service-worker angular-pwa
asked Nov 11 at 5:41
Vijay
13
add a comment |
up vote
-1
down vote
favorite
I am trying to cache API data in my app. I am using Angular6 and @angular/PWA 0.7.0-beta 1. But I am unable to cache API data.
This is my ngsw-config.json file
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://fonts.gstatic.com/**",
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}],
"dataGroups": [
{
"name": "FeedbackAnalytics",
"urls": [
"https://mytechhelp.accenture.com/FeedbackAnalytics"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
},
{
"name": "JsonPlaceholder",
"urls": [
"https://jsonplaceholder.typicode.com/posts"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
}
]
}
this how I am calling api.
public ngOnInit(): void {
this.username = this.excelService.getCookie('userName');
this.userIsRanjan = this.excelService.getCookie('email') === 'ranjan.satya@accenture.com' ? true : false; // ? false in production
// console.log(this.userIsRanjan);
if (this.username === '') {
this.username = 'Guest';
}
this.initTopTabsData();
this.initTopBlockData();
this.loadGraphData(this.calenderStart, this.calenderEnd);
setInterval(() => {
console.log('Interval reached in 10000 ms');
this.initTopBlockData();
this.getGraphData(this.calenderStart, this.calenderEnd, () => { });
this.initTopTabsData();
}, 30000);
}
this is this.initTopTabsData() method
initTopTabsData() {
// console.log('initTopTabsData reached');
// console.log('today, uptodate' this.getUptoDate(), this.upToDate);
// myCode
// ? vijay myCode
// FeedBack
setTimeout(() => {
this.dashboard.getJsonData()
.subscribe(res => console.log(res));
}, 30000); //Here we get json data for caching from dummy api
this.dashboard.getFeedBack({
'StartTime': '2018-07-01 00:00:00',
'EndTIme': this.getUptoDate()
}).subscribe((rs: any) => {
this.feedBackAmazing = rs.FeedbackMessages[0].Count;
this.feedBackGood = rs.FeedbackMessages[1].Count;
this.feedBackBad = rs.FeedbackMessages[2].Count;
this.totalFeedbackCount = rs.TotalFeedbackCount;
});
// FeedBack
// New Users Percentage
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousWeekStart(),
'EndTime': this.getPreviousWeekEnd()
}).subscribe((rs: any) => {
this.lastWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.today
}).subscribe((rs: any) => {
this.currentWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
}).subscribe((rs: any) => {
this.tillDateNewUsers = rs.UserCount;
this.newUsers.incrementTo(this.tillDateNewUsers, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
this.tillLastWeekNewUsers = rs.UserCount;
});
this.NewUsersCalculation();
// New Users Percentage
// Total Users Percentage
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
this.totalUserCount = rs.RepetitiveUserCount;
console.log('total user count', this.totalUserCount);
this.totalUsers.incrementTo(this.totalUserCount, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.getPreviousMonthEnd()
}).subscribe((rs: any) => {
console.log('lastMonthTotalUsers', this.lastMonthTotalUsers);
this.lastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tilllast month Total Users', this.tillLastMonthTotalUsers);
this.tillLastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.totalUsersCalculation();
// Total Users Percentage
// Avg Daily Active Count percentage
this.dashboard.getRepetUserCount({
'StartTime': this.today,
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('todayUsers', rs);
this.todayUsers = rs.RepetitiveUserCount;
console.log('todayUsers', this.todayUsers);
this.avgDailyActiveCount.incrementTo(this.todayUsers, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getSevenDaysStartFromNow(),
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyActiveUsers', this.lastWeekDailyActiveUsers);
this.lastWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyActiveUsers', this.currentWeekDailyActiveUsers);
this.currentWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.avgDailyActiveUsers();
// Avg Daily Active Count percentage
// Avg Daily New Count percentage
// this.dashboard.getRepetUserCount({
// 'StartTime': this.today,
// 'EndTime': this.upToDate
// }).subscribe((rs: any) => {
// this.todayNewUsers = rs.TotalRepeatUsers;
// });
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyNewUsers', this.lastWeekDailyNewUsers);
this.lastWeekDailyNewUsers = rs.TotalRepeatUsers;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyNewUsers', this.currentWeekDailyNewUsers);
this.currentWeekDailyNewUsers = rs.TotalRepeatUsers;
this.myCounterTotalToday.incrementTo(this.currentWeekDailyNewUsers, 5, 200);
});
this.avgDailyNewUsers();
// Avg Daily New Count percentage
// Total Messages
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
'ChannelId': ''
}).subscribe((rs: any) => {
console.log('uniqueUserCount', this.uniqueUserCount);
console.log('totalMessageCount', this.totalMessageCount);
// console.log('uniqUeuserCountList', this.uniqUeuserCountList);
this.uniqueUserCount = rs.UserCount;
this.totalMessageCount = rs.MessageCount;
this.uniqUeuserCountList = rs.UniqueUserDayCount;
this.myMsgCounter.incrementTo(rs.MessageCount, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.lastMonthEnd
}).subscribe((rs: any) => {
console.log('lastMonthTotalMessages', this.lastMonthTotalMessages);
this.lastMonthTotalMessages = rs.MessageCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tillLastMonthTotalMessages', this.tillLastMonthTotalMessages);
this.tillLastMonthTotalMessages = rs.MessageCount;
});
this.totalMessages();
// Total Messages
// ? vijay myCode
}
What I am expecting is
Caching Example
What I am getting is
screenshot of cache
Above is my ngsw-config.json file. I am trying to fetch API for every 30 secs.
But I am able to cache data from Jsonplaceholder API.
Thanks in advance
angular angular6 progressive-web-apps angular-service-worker angular-pwa
asked Nov 11 at 5:41
Vijay
13
Sorry but this really needs some more info, like the related code, the exact problem, etc. What is a "jsonplaceholder API"? And why do you think API requests are always cached? What's your expectation?
– Boland
Nov 12 at 7:20
sorry for less information. Jsonplceholder is a fake rest API for the developers. (jsonplaceholder.typicode.com) click on this link you will get more information. I Edited my question please check it you will get all your information.
– Vijay
Nov 12 at 9:29
The question has been updated Please check @Boland
– Vijay
Nov 12 at 10:18
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I am trying to cache API data in my app. I am using Angular6 and @angular/PWA 0.7.0-beta 1. But I am unable to cache API data.
This is my ngsw-config.json file
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://fonts.gstatic.com/**",
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}],
"dataGroups": [
{
"name": "FeedbackAnalytics",
"urls": [
"https://mytechhelp.accenture.com/FeedbackAnalytics"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
},
{
"name": "JsonPlaceholder",
"urls": [
"https://jsonplaceholder.typicode.com/posts"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
}
]
}
this how I am calling api.
public ngOnInit(): void {
this.username = this.excelService.getCookie('userName');
this.userIsRanjan = this.excelService.getCookie('email') === 'ranjan.satya@accenture.com' ? true : false; // ? false in production
// console.log(this.userIsRanjan);
if (this.username === '') {
this.username = 'Guest';
}
this.initTopTabsData();
this.initTopBlockData();
this.loadGraphData(this.calenderStart, this.calenderEnd);
setInterval(() => {
console.log('Interval reached in 10000 ms');
this.initTopBlockData();
this.getGraphData(this.calenderStart, this.calenderEnd, () => { });
this.initTopTabsData();
}, 30000);
}
this is this.initTopTabsData() method
initTopTabsData() {
// console.log('initTopTabsData reached');
// console.log('today, uptodate' this.getUptoDate(), this.upToDate);
// myCode
// ? vijay myCode
// FeedBack
setTimeout(() => {
this.dashboard.getJsonData()
.subscribe(res => console.log(res));
}, 30000); //Here we get json data for caching from dummy api
this.dashboard.getFeedBack({
'StartTime': '2018-07-01 00:00:00',
'EndTIme': this.getUptoDate()
}).subscribe((rs: any) => {
this.feedBackAmazing = rs.FeedbackMessages[0].Count;
this.feedBackGood = rs.FeedbackMessages[1].Count;
this.feedBackBad = rs.FeedbackMessages[2].Count;
this.totalFeedbackCount = rs.TotalFeedbackCount;
});
// FeedBack
// New Users Percentage
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousWeekStart(),
'EndTime': this.getPreviousWeekEnd()
}).subscribe((rs: any) => {
this.lastWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.today
}).subscribe((rs: any) => {
this.currentWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
}).subscribe((rs: any) => {
this.tillDateNewUsers = rs.UserCount;
this.newUsers.incrementTo(this.tillDateNewUsers, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
this.tillLastWeekNewUsers = rs.UserCount;
});
this.NewUsersCalculation();
// New Users Percentage
// Total Users Percentage
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
this.totalUserCount = rs.RepetitiveUserCount;
console.log('total user count', this.totalUserCount);
this.totalUsers.incrementTo(this.totalUserCount, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.getPreviousMonthEnd()
}).subscribe((rs: any) => {
console.log('lastMonthTotalUsers', this.lastMonthTotalUsers);
this.lastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tilllast month Total Users', this.tillLastMonthTotalUsers);
this.tillLastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.totalUsersCalculation();
// Total Users Percentage
// Avg Daily Active Count percentage
this.dashboard.getRepetUserCount({
'StartTime': this.today,
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('todayUsers', rs);
this.todayUsers = rs.RepetitiveUserCount;
console.log('todayUsers', this.todayUsers);
this.avgDailyActiveCount.incrementTo(this.todayUsers, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getSevenDaysStartFromNow(),
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyActiveUsers', this.lastWeekDailyActiveUsers);
this.lastWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyActiveUsers', this.currentWeekDailyActiveUsers);
this.currentWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.avgDailyActiveUsers();
// Avg Daily Active Count percentage
// Avg Daily New Count percentage
// this.dashboard.getRepetUserCount({
// 'StartTime': this.today,
// 'EndTime': this.upToDate
// }).subscribe((rs: any) => {
// this.todayNewUsers = rs.TotalRepeatUsers;
// });
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyNewUsers', this.lastWeekDailyNewUsers);
this.lastWeekDailyNewUsers = rs.TotalRepeatUsers;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyNewUsers', this.currentWeekDailyNewUsers);
this.currentWeekDailyNewUsers = rs.TotalRepeatUsers;
this.myCounterTotalToday.incrementTo(this.currentWeekDailyNewUsers, 5, 200);
});
this.avgDailyNewUsers();
// Avg Daily New Count percentage
// Total Messages
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
'ChannelId': ''
}).subscribe((rs: any) => {
console.log('uniqueUserCount', this.uniqueUserCount);
console.log('totalMessageCount', this.totalMessageCount);
// console.log('uniqUeuserCountList', this.uniqUeuserCountList);
this.uniqueUserCount = rs.UserCount;
this.totalMessageCount = rs.MessageCount;
this.uniqUeuserCountList = rs.UniqueUserDayCount;
this.myMsgCounter.incrementTo(rs.MessageCount, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.lastMonthEnd
}).subscribe((rs: any) => {
console.log('lastMonthTotalMessages', this.lastMonthTotalMessages);
this.lastMonthTotalMessages = rs.MessageCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tillLastMonthTotalMessages', this.tillLastMonthTotalMessages);
this.tillLastMonthTotalMessages = rs.MessageCount;
});
this.totalMessages();
// Total Messages
// ? vijay myCode
}
What I am expecting is
Caching Example
What I am getting is
screenshot of cache
Above is my ngsw-config.json file. I am trying to fetch API for every 30 secs.
But I am able to cache data from Jsonplaceholder API.
Thanks in advance
angular angular6 progressive-web-apps angular-service-worker angular-pwa
asked Nov 11 at 5:41
Vijay
13
I am trying to cache API data in my app. I am using Angular6 and @angular/PWA 0.7.0-beta 1. But I am unable to cache API data.
This is my ngsw-config.json file
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://fonts.gstatic.com/**",
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}],
"dataGroups": [
{
"name": "FeedbackAnalytics",
"urls": [
"https://mytechhelp.accenture.com/FeedbackAnalytics"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
},
{
"name": "JsonPlaceholder",
"urls": [
"https://jsonplaceholder.typicode.com/posts"
],
"cacheConfig": {
"maxSize": 1000,
"maxAge": "6h",
"timeout": "5s",
"strategy": "freshness"
}
}
]
}
this how I am calling api.
public ngOnInit(): void {
this.username = this.excelService.getCookie('userName');
this.userIsRanjan = this.excelService.getCookie('email') === 'ranjan.satya@accenture.com' ? true : false; // ? false in production
// console.log(this.userIsRanjan);
if (this.username === '') {
this.username = 'Guest';
}
this.initTopTabsData();
this.initTopBlockData();
this.loadGraphData(this.calenderStart, this.calenderEnd);
setInterval(() => {
console.log('Interval reached in 10000 ms');
this.initTopBlockData();
this.getGraphData(this.calenderStart, this.calenderEnd, () => { });
this.initTopTabsData();
}, 30000);
}
this is this.initTopTabsData() method
initTopTabsData() {
// console.log('initTopTabsData reached');
// console.log('today, uptodate' this.getUptoDate(), this.upToDate);
// myCode
// ? vijay myCode
// FeedBack
setTimeout(() => {
this.dashboard.getJsonData()
.subscribe(res => console.log(res));
}, 30000); //Here we get json data for caching from dummy api
this.dashboard.getFeedBack({
'StartTime': '2018-07-01 00:00:00',
'EndTIme': this.getUptoDate()
}).subscribe((rs: any) => {
this.feedBackAmazing = rs.FeedbackMessages[0].Count;
this.feedBackGood = rs.FeedbackMessages[1].Count;
this.feedBackBad = rs.FeedbackMessages[2].Count;
this.totalFeedbackCount = rs.TotalFeedbackCount;
});
// FeedBack
// New Users Percentage
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousWeekStart(),
'EndTime': this.getPreviousWeekEnd()
}).subscribe((rs: any) => {
this.lastWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.today
}).subscribe((rs: any) => {
this.currentWeekNewUsers = rs.UserCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
}).subscribe((rs: any) => {
this.tillDateNewUsers = rs.UserCount;
this.newUsers.incrementTo(this.tillDateNewUsers, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
this.tillLastWeekNewUsers = rs.UserCount;
});
this.NewUsersCalculation();
// New Users Percentage
// Total Users Percentage
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
this.totalUserCount = rs.RepetitiveUserCount;
console.log('total user count', this.totalUserCount);
this.totalUsers.incrementTo(this.totalUserCount, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.getPreviousMonthEnd()
}).subscribe((rs: any) => {
console.log('lastMonthTotalUsers', this.lastMonthTotalUsers);
this.lastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tilllast month Total Users', this.tillLastMonthTotalUsers);
this.tillLastMonthTotalUsers = rs.RepetitiveUserCount;
});
this.totalUsersCalculation();
// Total Users Percentage
// Avg Daily Active Count percentage
this.dashboard.getRepetUserCount({
'StartTime': this.today,
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('todayUsers', rs);
this.todayUsers = rs.RepetitiveUserCount;
console.log('todayUsers', this.todayUsers);
this.avgDailyActiveCount.incrementTo(this.todayUsers, 5, 200);
});
this.dashboard.getRepetUserCount({
'StartTime': this.getSevenDaysStartFromNow(),
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyActiveUsers', this.lastWeekDailyActiveUsers);
this.lastWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.dashboard.getRepetUserCount({
'StartTime': this.getCurrentWeekStart(),
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyActiveUsers', this.currentWeekDailyActiveUsers);
this.currentWeekDailyActiveUsers = rs.RepetitiveUserCount;
});
this.avgDailyActiveUsers();
// Avg Daily Active Count percentage
// Avg Daily New Count percentage
// this.dashboard.getRepetUserCount({
// 'StartTime': this.today,
// 'EndTime': this.upToDate
// }).subscribe((rs: any) => {
// this.todayNewUsers = rs.TotalRepeatUsers;
// });
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getSevenDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('lastWeekDailyNewUsers', this.lastWeekDailyNewUsers);
this.lastWeekDailyNewUsers = rs.TotalRepeatUsers;
});
this.dashboard.getRepetUserCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate()
}).subscribe((rs: any) => {
console.log('currentWeekDailyNewUsers', this.currentWeekDailyNewUsers);
this.currentWeekDailyNewUsers = rs.TotalRepeatUsers;
this.myCounterTotalToday.incrementTo(this.currentWeekDailyNewUsers, 5, 200);
});
this.avgDailyNewUsers();
// Avg Daily New Count percentage
// Total Messages
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getUptoDate(),
'ChannelId': ''
}).subscribe((rs: any) => {
console.log('uniqueUserCount', this.uniqueUserCount);
console.log('totalMessageCount', this.totalMessageCount);
// console.log('uniqUeuserCountList', this.uniqUeuserCountList);
this.uniqueUserCount = rs.UserCount;
this.totalMessageCount = rs.MessageCount;
this.uniqUeuserCountList = rs.UniqueUserDayCount;
this.myMsgCounter.incrementTo(rs.MessageCount, 5, 200);
});
this.dashboard.getUniqueCount({
'StartTime': this.getPreviousMonthStart(),
'EndTime': this.lastMonthEnd
}).subscribe((rs: any) => {
console.log('lastMonthTotalMessages', this.lastMonthTotalMessages);
this.lastMonthTotalMessages = rs.MessageCount;
});
this.dashboard.getUniqueCount({
'StartTime': '2018-07-01 00:00:00',
'EndTime': this.getThirtyDaysEndFromNow()
}).subscribe((rs: any) => {
console.log('tillLastMonthTotalMessages', this.tillLastMonthTotalMessages);
this.tillLastMonthTotalMessages = rs.MessageCount;
});
this.totalMessages();
// Total Messages
// ? vijay myCode
}
What I am expecting is
Caching Example
What I am getting is
screenshot of cache
Above is my ngsw-config.json file. I am trying to fetch API for every 30 secs.
But I am able to cache data from Jsonplaceholder API.
Thanks in advance
angular angular6 progressive-web-apps angular-service-worker angular-pwa
angular angular6 progressive-web-apps angular-service-worker angular-pwa
asked Nov 11 at 5:41
Vijay
13
asked Nov 11 at 5:41
Vijay
13
edited Nov 12 at 10:17
asked Nov 11 at 5:41
Vijay
13
asked Nov 11 at 5:41
Vijay
13
asked Nov 11 at 5:41
Vijay
13
13
Sorry but this really needs some more info, like the related code, the exact problem, etc. What is a "jsonplaceholder API"? And why do you think API requests are always cached? What's your expectation?
– Boland
Nov 12 at 7:20
sorry for less information. Jsonplceholder is a fake rest API for the developers. (jsonplaceholder.typicode.com) click on this link you will get more information. I Edited my question please check it you will get all your information.
– Vijay
Nov 12 at 9:29
The question has been updated Please check @Boland
– Vijay
Nov 12 at 10:18
add a comment |
Sorry but this really needs some more info, like the related code, the exact problem, etc. What is a "jsonplaceholder API"? And why do you think API requests are always cached? What's your expectation?
– Boland
Nov 12 at 7:20
sorry for less information. Jsonplceholder is a fake rest API for the developers. (jsonplaceholder.typicode.com) click on this link you will get more information. I Edited my question please check it you will get all your information.
– Vijay
Nov 12 at 9:29
The question has been updated Please check @Boland
– Vijay
Nov 12 at 10:18
Sorry but this really needs some more info, like the related code, the exact problem, etc. What is a "jsonplaceholder API"? And why do you think API requests are always cached? What's your expectation?
– Boland
Nov 12 at 7:20
Sorry but this really needs some more info, like the related code, the exact problem, etc. What is a "jsonplaceholder API"? And why do you think API requests are always cached? What's your expectation?
– Boland
Nov 12 at 7:20
sorry for less information. Jsonplceholder is a fake rest API for the developers. (jsonplaceholder.typicode.com) click on this link you will get more information. I Edited my question please check it you will get all your information.
– Vijay
Nov 12 at 9:29
sorry for less information. Jsonplceholder is a fake rest API for the developers. (jsonplaceholder.typicode.com) click on this link you will get more information. I Edited my question please check it you will get all your information.
– Vijay
Nov 12 at 9:29
The question has been updated Please check @Boland
– Vijay
Nov 12 at 10:18
The question has been updated Please check @Boland
– Vijay
Nov 12 at 10:18
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246161%2fangular-pwa-0-7-0-beta-1-cant-able-to-cache-dynamic-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Sorry but this really needs some more info, like the related code, the exact problem, etc. What is a "jsonplaceholder API"? And why do you think API requests are always cached? What's your expectation?
– Boland
Nov 12 at 7:20
sorry for less information. Jsonplceholder is a fake rest API for the developers. (jsonplaceholder.typicode.com) click on this link you will get more information. I Edited my question please check it you will get all your information.
– Vijay
Nov 12 at 9:29
The question has been updated Please check @Boland
– Vijay
Nov 12 at 10:18