When I change the pages without loading them in the cache with service workers there are no problems when I go to save the pages in the cache they are no longer found both online and offline. The problem occurs only with pages and not with other elements such as .jpg .png .js .css and some .html elements
When i go to another page after i saved it in the cache
Unable to reach site The web page at link of the page may be temporarily unavailable or has been permanently moved to a new web address.
ERR_FAILED
Service Workers
const staticChacheName = 'site-static'
const assets = [
'/',
'/index.html',
'/Html/Elements/footer.html',
'/Html/Elements/mobile_menu.html',
'/Html/Elements/navbar.html',
'/Html/Pages/film.html', //not working
'/Html/Pages/anime.html', //not working
'/Html/Pages/sitobello.html', //not working
'/Html/Pages/song.html', //not working
'/Html/Pages/amici_home.html', //not working
'/Html/Pages/Amici/tilde.html', //not working
'/Html/Pages/Amici/kloe.html', //not working
'Css/Index/style.css',
'Css/Sito Bello/background.css',
'Css/Sito Bello/section.css',
'Css/Sito Bello/settings.css',
'Css/Song/background.css',
'Css/Song/elementi.css',
'Css/Film/background.css',
'Css/Film/elementi.css',
'Css/Anime/background.css',
'Css/Anime/elementi.css',
'Css/Element/footer.css',
'Css/Element/mobile_menu.css',
'Css/Element/navbar.css',
'Css/Element/scrollbar.css',
'Css/Amici/Home/background.css',
'Css/Amici/Home/elementi.css',
'Css/Amici/Kloe/background.css',
'Css/Amici/Tilde/background.css',
'/Images/Logo.png',
'/Images/Index/background.jpg',
'/Javascript/Element/navbar.js',
'/Javascript/Film/add.js',
'/Javascript/Sito Bello/add.js',
'/Javascript/Sito Bello/settings.js',
'/manifest.webmanifest',
'/Javascript/app.js',
]
//install service worker
self.addEventListener('install', evt => {
// console.log('service worker has been installed')
evt.waitUntil(
caches.open(staticChacheName).then(chache => {
console.log('chaching shell assets')
chache.addAll(assets)
}))
})
//activate service worker
self.addEventListener('activate', evt => {
// console.log('service worker has been activated')
})
self.addEventListener('fetch', evt => {
//console.log('fetch event', evt)
evt.respondWith(
caches.match(evt.request).then(chacheRes => {
return chacheRes || fetch(evt.request)
})
)
})
Example of a page that doesn't work
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="/Css/Element/navbar.css">
<link rel="stylesheet" href="/Css/Element/mobile_menu.css">
<link rel="stylesheet" href="/Css/Film/background.css">
<link rel="stylesheet" href="/Css/Film/elementi.css">
<link rel="stylesheet" href="/Css/Element/footer.css">
<link rel="stylesheet" href="/Css/Element/scrollbar.css">
<link rel="manifest" href="/manifest.webmanifest">
<link rel = "icon" href = "/Images/Logo.png" type = "image/x-icon">
<title>Aside - Film</title>
</head>
<body>
<nav></nav>
<div id="mb-menu"></div>
<h1 id="title">Film</h1>
<div id="films">
<!-- aggiunge film -->
</div>
<footer></footer>
<script src="/Javascript/app.js"></script>
<script src="/Javascript/Film/add.js"></script>
<script src="/Javascript/Element/navbar.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$("nav").load("/Html/Elements/navbar.html");
$("footer").load("/Html/Elements/footer.html");
$("#mb-menu").load("/Html/Elements/mobile_menu.html");
});
</script>
</body>
</html>
Site structure
what am I doing wrong? because I would like my site to work offline too but not being able to load the other pages it works only in the home
Related
I made a Pwa with Flutter Web and I set as color on the whole project: # 8C3144. On Index.html I have black-translucent so also the status-bar in ios became # 8C3144, but it continues to remain black. I don't understand what I need to change, I don't think the problem is in the Flutter project
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="theme-color" content="#8C3144">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="follow crash">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="crash">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Crash</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-core.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
SOLVED
In the in index.html add this in the head:
<style>
body {
background-color: #79d279;
}
</style>
I would like to get the parameters in a URL and use them to generate an og:image meta tag in my SPA. The specific purpose is to have a dynamic thumbnail for a given url. The idea is for crawlers to be able to find the appropriate thumbnail.
example URL:
https://my.app/#/post?uid=abc&pid=123
These two parameters will not necessarily always be included. I hope it won't cause an issue.
My understanding is that crawlers generally only check the html for metadata. How could I include a bit of code in my html before the metadata? (I am relatively new to HTML)
Would I be able to put a script in the head tag? Are variable in the script available outside of the script? Can I use variable in the URL address of my og:image tag?
<!DOCTYPE html>
<html>
<head>
<meta property="og:image" content="https://my.app/{uid}/{pid}/thumb.png" />
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Get Dressed. Better than you ever had">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="vestiqweb">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>VESTIQ</title>
<link rel="manifest" href="manifest.json">
</head>
<body id="app-container">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
//config info
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js?version=14" type="application/javascript"></script>
</body>
</html>
I was able to put a script before the meta tags and used window.location.href to get the URL. I used URLSearchParams to extract the parameters. However, I can only get the second parameter and not the first. If I add an '&' before the uid it works, but makes the url look weird... "?&uid"
<script>
const queryString = window.location.href;
const urlParams = new URLSearchParams(queryString);
const uid = urlParams.get('uid')
const pid = urlParams.get('pid')
if (uid != null && pid != null)
document.getElementById('urlThumb').content = `https://my.app/posts%2F${uid}%2F${pid}%2Furl_thumb.jpg?alt=media`;
</script>
I'm creating a webview Chrome app that should auto refresh its window.
I've tried using html meta refresh, but it didn't work:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5" >
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!-- Most magic happens here -->
<webview id="webview" src="URL" partition="persist:applicationize"></webview>
<!-- Embed script to capture keystrokes -->
<script src="../js/embed.js"></script>
</body>
</html>
You can reload the page using javascript like this
location.reload();
so to refresh every 5 seconds you can do the following
setInterval( () => {
location.reload();
}, 5000)
The code should be in your extension as when you reload the page, the page's code will stop execution.
OR
You can fire the setTimeout function after the page is loaded which will execute the refresh after 5 seconds like this
setTimeout( () => {
location.reload();
}, 5000)
I am implementing a simple routing app in polymer.js using iron-pages and page.js but this is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="routes.html">
<title>Document</title>
</head>
<body>
<div is="dom-bind" id="app">
<a data-route="home" href="/">home</a>
<a data-route="users" href="/users">users</a>
<a data-route="settings" href="/settings">settings</a>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">Home</section>
<section data-route="users">Users</section>
<section data-route="settings">Settings</section>
</iron-pages>
</div>
</body>
</html>
<script src="/bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
page('/', function() {
app.route = 'home'
console.log(app.route)
// console.log('home')
})
page('/users', function () {
app.route = 'users'
})
page('/settings', function () {
app.route = 'settings'
})
page({
hashbang: false
})
})
</script>
Everything seems okay but this is not working.
At first, you should NOT use iron-pages in index.html.. It's much more easier and in future of your application also necessary to create new element where is located all the structure logic (routing, some popup elements etc...).
Dom-bind is only temporary solution. Your code seems ok and there should be no problem.
I assume you have your .htaccess configured as it is necessary to have it when using page.js
I've been trying to display JSON data saved on a local directory using Angular but have been getting the dreaded "XMLHttpRequest cannot load file" error because I'm using Chrome. I just need to get this logged on the console and then I can take it from there.
I want to know if there is a good solution to get around this without changing my security setting on Chrome from the command line. Is this a good time to use 'jsonp' instead of 'get'?
Here is my app.js:
angular
.module('myApp', [])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$http.get('data/posts.json').success(function(data){
$scope.data = data
console.log(data);
})
}])
Here is my HTML:
<!DOCTYPE HTML >
<html>
<head>
<title>The network</title>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></script>
<script type="text/javascript" src="javascripts/ng-app/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='MainCtrl'>
{{data}}
</div>
</body>
</html>
Thanks in advance!