I write a WEB application on the platform Firebase
I have a file "firebase-messaging-sw.js", and when I access the file from home.html page, I get an error:
importScripts is not
File "firebase-messaging-sw.js" is at the root level.
home.html:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="img/favicon.png"/>
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen and (min-width:901px)" />
<link rel="stylesheet" href="css/mhome.css" type="text/css" media="screen and (max-width:900px)" />
</head>
<body>
<header>
...
</header>
<div class="function">
...
</div>
<footer>
...
</footer>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-performance.js"></script>
<script src="javaScript/initFirebase.js"></script>
<script src="javaScript/homeFirebase.js"></script>
<script src="javaScript/initHomePage.js"></script>
<script src="javaScript/latlon-geohash.js"></script>
<script src="firebase-messaging-sw.js"></script>
</body>
firebase-messaging-sw.js:
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '123456654321'
});
Help fix the error! Thank!
firebase-messaging-sw.js is service worker JavaScript file.
So you should not load JavaScript file using <script src="firebase-messaging-sw.js"></script>.
Remove <script src="firebase-messaging-sw.js"></script> and try the following code.
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/firebase-messaging-sw.js');
});
}
</script>
See https://developers.google.com/web/fundamentals/primers/service-workers/#register_a_service_worker
Related
I'm getting this error:
I'm not sure what I have wrong in my index.html. I am currently developing an app on ionic1 and this error is generated when I try to inspect my code by safari. I have read that this error occurs when a label is not closed, but in my case I do not know what I have wrong. What can be?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json" />
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<!-- css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet" type="text/css"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/utilities.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" href="lib/animate/animate.css" />
<link rel="stylesheet" type="text/css" href="lib/waves/css/waves.css" />
<link rel="stylesheet" type="text/css" href="lib/swiper/css/swiper.css" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngStorage/js/ngStorage.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constantes.js"></script>
<!-- libs -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/swiper/js/swiper.js"></script>
<script src="lib/prefixfree/js/prefixfree.min.js"></script>
<!--<script src='lib/ng-cordova-oauth.min.js'></script>-->
<!--<script src="http://maps.google.com/maps/api/js?key=AIzaSyANNBvPehUvWndNs7zmVqWa7ys1DBTQnDs"></script>-->
<!-- Controladores TinApp -->
<script src="js/controllers/login/loginController.js"></script>
<!--<script src="js/controllers/wizard/ubicacionTinController.js"></script>-->
<script src="js/controllers/wizard/instructivoTinController.js"></script>
<script src="js/controllers/wizard/recuperarContrasenaController.js"></script>
<script src="js/controllers/registros/registrarUsuariosController.js"></script>
<script src="js/controllers/ofertas/ofertasController.js"></script>
<script src="js/controllers/ofertas/descripcionOfertaController.js"></script>
<script src="js/controllers/negocios/negocioController.js"></script>
<!--<script src="js/controllers/negocios/productosController.js"></script>
<script src="js/controllers/negocios/descripcionProductoController.js"></script>
<script src="js/controllers/favoritos/favoritosController.js"></script>
<script src="js/controllers/favoritos/descripcionFavoritoController.js"></script>-->
<script src="js/controllers/cupones/cuponesController.js"></script>
<script src="js/controllers/cupones/misCuponesController.js"></script>
<!--<script src="js/controllers/tins/misTinsController.js"></script>-->
<!--<script src="js/controllers/ajustes/ajustesController.js"></script>-->
<script src="js/controllers/ubicaciones/ubicacionesController.js"></script>
</head>
<body ng-app="tinApp">
<ion-nav-view class="viewport_inicial"></ion-nav-view>
</body>
</html>
As stated in the HTML specification:
The title element must not be empty.
Just add a title:
<title>tinApp</title>
I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem
"Make sure window.Snap is defined or supply your own with SnapConstructorProvider.use(MySnap)."
That's what I have when I'm trying to use angular-snap. I followed what they said in github but still didn't work. Can I have some help ? I watched the angular-snap code and I saw a test :
if(angular.isUndefined(S)) {
throw new Error('Snap constructor is not defined. Make sure ' +
'window.Snap is defined or supply your own with ' +
'SnapConstructorProvider.use(MySnap).');
}
When I put a console.log of angular.isUndefined, it returns true but I don't know why.
Here the html :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset=utf-8 />
<title>AO</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/angular-snap.min.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<snap-drawer>
<p>I'm a drawer ! I maybe I've got some sweet navigation links.</p>
</snap-drawer>
<snap-content>
<p>Hello! I'm your main content!</p>
</snap-content>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/angular-snap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Javascript code :
var app = angular.module('myApp', ['snap']);
Thanks for help.
You have to include snap.js library to your index.html page
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.3/snap.min.js"></script>
I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');
My pages are not coming by using ng-view in angular.js.When i am typing the url http://localhost:8888/dashboard the pages should come.I am explaining my code below.
view/dashboard.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="adminDashboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" /><!-- Vector Map -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" /><!-- Carousal -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body ng-view>
</body>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/enscroll.js"></script>
<script type="text/javascript" src="js/grid-filter.js"></script>
<script type="text/javascript" src="app/routes/dashboard-route.js"></script>
<script type="text/javascript" src="app/controller/dashboard-controller.js"></script>
</html>
public/app/routes/dashboard-route.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/dashboard',{
templateUrl:'app/view/dashboard-partial.html',
controller:'dashboard-controller'
});
}
])
public/app/controller/dashboard-controller.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.controller('dashboard-controller',function($scope){
$.ajax({
type:'GET',
url:"/getAdminData",
success: function(data){
$scope.firstname=data.firstname;
$scope.lastname=data.lastname;
$scope.adminImage=data.image;
},
error: function(data){
console.log(data);
}
});
});
Please help me to resolve this issue so that the template will successfully display.I am also using node.js for client server architecture.
It looks like your dashboad-route.js is using templateUrl:'app/view/dashboard-partial.html', but the name of your HTML file is view/dashboard.html. Change templateUrl to app/view/dashboard.html (or whatever the correct path is) and see if that fixes things.
One problem is that if you use $.ajax to do scope changes angular is unaware of them so you need to use $apply() to tell angular to run digest scycle.
For this reason I suggest you don't use $.ajax and use angular $http