Using Kango, I have added an iFrame to a page. This iFrame points to an internal resource. I want this iFrame to be able to communicate with the background script. I would love to actually get the Kango API accessable from the iFrame, but if this is not possible I wonder how I might target this iFrame with a content script.
From your application that is inside the iFrame you can do:
top.window.postMessage({ type: 'EVENT', data: {} }, "*");
Then inside your Kango extension HTML link a JS file that has:
KangoAPI.onReady(function () {
window.addEventListener('message', function (event) {
console.log('host.js -> message', event);
kango.dispatchMessage('MessageToWindow', event);
});
document.body.onload = function () {
try {
document.getElementById('iFrameID').src = 'URL';
} catch (ex) {
throw ex;
}
}
});
Then inside the background.js
kango.addMessageListener('MessageToWindow', function (event) {
console.log('background.js -> MessageToWindow', event);
kango.browser.tabs.getCurrent(function (tab) {
console.log('background.js -> TAB', tab || 'NONE');
console.log('background.js -> TYPE', event.data.data.type || 'NONE');
console.log('background.js -> DATA', event.data.data.data || 'NONE');
tab.dispatchMessage(event.data.data.type, event.data.data.data);
});
});
Lastly, inside the content.js
kango.addMessageListener('EVENT', function(event) {
kango.console.log('got event');
});
Seems like a lot, but this was the only way that I could get it to work. Hope that helps!
Related
I have a question about caching in PWA.
I would like to let user choose a list to cache. For example:
User creating few lists, and then he choose one, to save for offline.
When he is offline he can only open 2 views:
smth like "u are offline, do you want to open saved list?" (if it exist)
View with saved list.
At this moment, I am caching all views that user visited, but can't cache views with dynamic data.
I'm using PWA.essentials to do PWA.
services.AddProgressiveWebApp(new PwaOptions
{
RegisterServiceWorker = true,
RegisterWebmanifest = false,
Strategy = ServiceWorkerStrategy.NetworkFirst,
RoutesToPreCache = "/, /Home/Offline, /Home/Saved_list",
OfflineRoute="Offline.html"
});
I have created manifest.json. When im using dev mode in chrome, I can see that at this moment, I'm caching all views execpt views with more complicated path (like /Controller/View/something).
I'm saving list, that user choose in a "Offline.json" file, that is cached too,but when user changes list to save, file "offline.json" is still no updated. I mean my PWA doesn't replace it with new one.
So I have a question about how can I save dynamic list to browser cache, and then set offline route to it.
Service Worker Created by pwa.essentials:
(function () {
'use strict';
// Update 'version' if you need to refresh the cache
var version = 'v1.0::NetworkFirst';
var offlineUrl = "Offline.html";
// Store core files in a cache (including a page to display when offline)
function updateStaticCache() {
return caches.open(version)
.then(function (cache) {
return cache.addAll([
offlineUrl,
'/','/Home','/Generate/Select_mode'
]);
});
}
function addToCache(request, response) {
if (!response.ok)
return;
var copy = response.clone();
caches.open(version)
.then(function (cache) {
cache.put(request, copy);
});
}
self.addEventListener('install', function (event) {
event.waitUntil(updateStaticCache());
});
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys()
.then(function (keys) {
// Remove caches whose name is no longer valid
return Promise.all(keys
.filter(function (key) {
return key.indexOf(version) !== 0;
})
.map(function (key) {
return caches.delete(key);
})
);
})
);
});
self.addEventListener('fetch', function (event) {
var request = event.request;
// Always fetch non-GET requests from the network
if (request.method !== 'GET') {
event.respondWith(
fetch(request)
.catch(function () {
return caches.match(offlineUrl);
})
);
return;
}
event.respondWith(
fetch(request)
.then(function (response) {
// Stash a copy of this page in the cache
addToCache(request, response);
return response;
})
.catch(function () {
return caches.match(request)
.then(function (response) {
return response || caches.match(offlineUrl);
})
.catch(function () {
if (request.headers.get('Accept').indexOf('image') !== -1) {
return new Response('<svg role="img" aria-labelledby="offline-title" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title id="offline-title">Offline</title><g fill="none" fill-rule="evenodd"><path fill="#D8D8D8" d="M0 0h400v300H0z"/><text fill="#9B9B9B" font-family="Helvetica Neue,Arial,Helvetica,sans-serif" font-size="72" font-weight="bold"><tspan x="93" y="172">offline</tspan></text></g></svg>', { headers: { 'Content-Type': 'image/svg+xml' } });
}
});
})
);
});
})();
You are saving the user selected pages’ list at server side in offline.json and you are caching that file too. As per working of PWA cached resources are served from cache and not from server until cache is removed/cleared.
You can take 2 approach.
Whenever user adds to the offline.json you need enforce service worker to update the offline file.
You can simply store the user selecting in local storage and from there you add pages to cache list.
Taking inspiration from Google's page, I pasted this into my website:
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'serviceworker.css'
];
debugger // 1
self.addEventListener('install', function(event) {
debugger // 2
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
Debugger 1 stops the program flow, but debugger 2 is never reached.
ServiceWorker.css exists.
I'm navigating to the page using the Incognito window with the developer toolbar open.
The code in your snippet above must be loaded in via register. You will need to be developing with https to see this work
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('./codeWithYourJsAbove.js').then((function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}), function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
Im using video in my project ,but video is playing in background ,When i move to another component.This problem occurs only in ios ,not in android
Html
<VideoPlayer
src="{{videoUrl}}"
height="300"></VideoPlayer>
angular
index:any
videoUrl :any
ngOnInit() {
this.router.paramMap.subscribe(
(response) =>{
this.index = response.get('id')
this.videoUrl=this.galleryService.getVideoById(this.index)
console.log(response)
}
)
}
This is my code .
Listen to navigatingFrom event on your current Page and call pause() method on the VideoPlayer.
HTML
<VideoPlayer #player
src="{{videoUrl}}"
height="300"></VideoPlayer>
TS
#ViewChild("player") player: ElementRef;
constructor(private page: Page) { }
ngOnInit() {
this.router.paramMap.subscribe(
(response) => {
this.index = response.get('id')
this.videoUrl=this.galleryService.getVideoById(this.index)
console.log(response)
});
this.page.on(Page.navigatingFromEvent, () => {
this.player.nativeElement.pause();
});
}
ngOnDestroy() {
this.page.off(Page.navigatingFromEvent);
}
You may also use Router Events on Angular, but you might have to filter the appropriate route.
I was following Lazy Blogger for getting started with routing in knockoutJS using crossroads and hasher and it worked correctly.
Now I needed to refresh the content using ajax for Home and Settings page every time they are clicked. So I googled but could not find some useful resources. Only these two links
Stack Overflow Here I could not understand where to place the ignoreState property and tried these. But could not make it work.
define(["jquery", "knockout", "crossroads", "hasher"], function ($, ko, crossroads, hasher) {
return new Router({
routes:
[
{ url: '', params: { page: 'product' } },
{ url: 'log', params: { page: 'log' } }
]
});
function Router(config) {
var currentRoute = this.currentRoute = ko.observable({});
ko.utils.arrayForEach(config.routes, function (route) {
crossroads.addRoute(route.url, function (requestParams) {
currentRoute(ko.utils.extend(requestParams, route.params));
});
});
activateCrossroads();
}
function activateCrossroads() {
function parseHash(newHash, oldHash) {
//crossroads.ignoreState = true; First try
crossroads.parse(newHash);
}
crossroads.normalizeFn = crossroads.NORM_AS_OBJECT;
hasher.initialized.add(parseHash);
hasher.changed.add(parseHash);
hasher.init();
$('a').on('click', function (e) {
crossroads.ignoreState = true; //Second try
});
}
});
Crossroads Official Page Here too I could not find where this property need to be set.
If you know then please point me to some url where I can get more details about this.
I am using jPlayer to play audio files.
If I use the player on content, which is privided, when the page gets loaded, it works without any problems.
I also need it for HTML which is inserted by AJAX. Here it does not work. It seems, that the ready event is not triggered.
I wrote a function, which can be executed by click(). In that way, I can click it manually, when the HTML which contains the player is fully loaded. Here I have the same problem: The ready event is not triggered.
This is my function which works on non ajax inserted players fine:
$('.jp-jplayer').each(function () {
var src = $(this).attr('data-src');
var id = $(this).attr('id');
var post_id = $(this).attr('data-id');
alert('beg');
$('#' + id).jPlayer({
ready: function () {
$(this).jPlayer('setMedia', {
mp3: "/prelisten/_lofidl/change_of_heart_full_lofi.mp3",
});
alert('#' + id);
},
swfPath: "/wp-content/themes/Dark_3Chemical_DE_mit_Pagenavi/Dark_3Chemical_DE/audioplayer/js",
//////ERRRROOOOOR
solution: "flash, html",
supplied: "mp3",
wmode: "window",
cssSelectorAncestor: "#jp_container_" + post_id,
play: function () { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function (event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function () {
$(this).jPlayer("play");
debug($(this));
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function () {
//$("#jquery_jplayer_4858").jPlayer("play", 0);
});
}
},
});
$("#jplayer_inspector").jPlayerInspector({
jPlayer: $('#' + id)
});
});
Currently I am setting the src manually to exclude any possible errors here.
How can I get this function running on AJAX inserted content?
EDIT:
This is the code, which fetches the html including the players:
$.get('/query_posts.php', {
paged: _page,
cats: cols
}, function(data) {
$('#search-results').append(data).fadeIn(300);
//create_player_scripts();
//set_players();
$('#search-results').find('input[name="cartLink"]').each(function() {
$(this).val($(this).closest('.post1').find('.post_headl a').attr('href'));
});
});
To make an AJAX page reload work I had to first destroy all jplayer instances. So I wrote a little function that grabs all instances of a jplayer on the site (by looking for jp-audio classes) and calls jplayer('destroy'); and jplayer('clearMedia'). This function gets called in the $.ajax({ beforeSend: destroyJplayerInstances(); })
UPDATE:
Here is a statement from the developer of jPlayer, Mark Panaghiston:
https://groups.google.com/forum/#!topic/jplayer/Q_aRhiyYvQo
Hope that helps!