This is driving crazy. Have a simple Wordpress blog. Ran an audit using the Lighthouse tool in web developer tools of Chrome. For the area of Progressive Web App my score is an abysmal 53 with the following three errors. I can't figure out how to fix these errors.
Does not respond with a 200 when offline.
User will not be prompted to Install the Web App
Failures: Manifest's display value is not one of: minimal-ui | fullscreen | standalone, Site does not register a service worker.
Does not register a service worker.
The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications.
Here is my manifest.json file. I change URL to example.com. And I know for a fact it's reachable on the server by going to the example.com/manifest.json and that is how it is called in the header as well. Am I missing anything in my manifest to cause these errors?
{
"name": "My Site",
"short_name": "My Site",
"theme_color": "#ffffff",
"background_color": "#082953",
"display": "browser",
"Scope": "/",
"start_url": "https://www.example.com",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
Here is my generated header from home page. Not sure if I need all these icons. A bit confused as Lighthouse says a 512x512 is needed for manifest, but realfavicongenerator and other manifest generators don't seem to produce a 512x512 so I just made one in Photoshop and uploaded to root with the rest of the icons, then added the extra code to the manifest.json file.
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Site">
<meta name="apple-mobile-web-app-title" content="My Site">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-navbutton-color" content="#082953">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My Site">
<meta name="msapplication-starturl" content="https://www.example.com">
<meta name="msapplication-TileColor" content="#082953">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="384x384" href="/android-chrome-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#082953">
This can be considered an error depending on whether you are making your blog available offline or not. Do you want your blog to be PWA, if yes then this all errors need to be handled otherwise you can just ignore them. Following is the explanation of errors.
Does not respond with a 200 when offline-
Progressive web apps work offline. If Lighthouse does not receive an HTTP 200 response
when accessing a page while offline, then the page is not accessible offline.
User will not be prompted to Install the Web App-
This is the feature which is available for PWA where you have service worker installed
and manifest is provided so that a web app is created on your phone's home screen.
Does not register a service worker-
This is the first thing you need to do for a PWA."To register a service worker".
You can uncheck progressive web app in audits and then calculate your score.
Now, lighthouse will not check for PWA compatibility and will not give any errors to it.
Related
i am trying to run my existing flutter application on web, after adding the support for web and adding firebase javascript code to my index.html, when i run the application on a browser i get this error
If you are serving your web app in a path other than the root, change
the href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order
for it to work correctly. Fore more details: *
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base -->
i have tried looking for solution online but i could not find any, i have tried following this https://flutter.dev/docs/development/ui/navigation/url-strategies but its not working for me please any help will be appreciated thanks
Bellow is my index.html file
<!DOCTYPE html>
<html>
<head>
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- 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="st_anthony_app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>st_anthony_app</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxxxxenter`enter code here`",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: "xxxxx"
};
firebase.initializeApp(firebaseConfig);
</script>
<!-- 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>
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>
This is my first time using Hugo. I am using the Bento theme for my Hugo site which did not come with favicon support out of the box (I searched the entire code base and it is nowhere to be found). Consequently, I added the necessary HTML tags to the partials > head.html. When I run locally with hugo server -D or npm run dev, the favicon shows up fine.
I think there is an issue with how my relative href is written, however, whenever I change it, it breaks it locally. I am using AWS Amplify for deployment with auto cloudfront invalidation so that is not the issue.
When I inspect the page source of the deployed site, I get this for the favicons:
<link rel="apple-touch-icon" sizes="180x180" href="favicon%20not%20found%25!%28EXTRA%20string=apple-touch-icon.png%29">
You can see the issue in the href= field
Here is how my favicons are implemented in partial/head.html:
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/img/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/img/favicon-16x16.png" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/img/apple-touch-icon.png" | relURL }}">
I also tried to implement this by adding the links in the config.toml and using Site.Params, but no luck with that either.
The below is how you would do it:
<link ... href="/img/favicon-32x32.png">
<link ... href="/img/favicon-16x16.png">
<link ... href="/img/apple-touch-icon.png">
So you don't have to use the hugo/Go {{}} tag (that would be for a site variable like {{.section }} - you can just put in the relative url which would simply be "/img/favicon-32x32...etc" Just make sure your image is in the corresponding folder.
I tested on my install of hugo and as long as your favicon is in the right place - that handles your problem.
Also note: If you would like to use a site variable {{ $.Site.Params etc...}} such as a href="{{ #.Site.Params etc...}} you would add the variable name and value to your config file. See below for reference on this from hugodocs:
Site Variables
I am new in this Ionic field. I created a new app in my localhost folder(C:\xampp\htdocs). When I go to "http://localhost/ionapp/www/" everything works fine but when I run the app from "ionic serve" command I get the blank page.
When I viewed the page source I found that ionic.css and ionic.bundle.js file are not loaded during ionic serve. And in the console I get the error like "angular is not defined". Can anyone please help me fix this?
Here is my index.html which should load css and js files
<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 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>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
So it was not the issue with my ionic but with my browser. Turns out I was getting ERR_CONNECTION_RESET in my console. So basically what I did was
Open cmd prompt as administrator.
Run the command netsh winsock reset.
Restart my computer.
I don't know how it happened but it solved all my problems.
I've recently stumbled upon an annoying problem and can't figure out what could be the cause. I'm working on a ionic hybrid app and since yesterday everything worked fine: I was able to deploy it on my android phone, I could debug it on my browser. Today I open up my project, fire the ionic serve and the browser greets me with a blank screen.
I get the address: localhost:8100/, but it really should be localhost:8100/#/app/sessions
The console log report no errors neither the net log.
This is the source code of the index.html page:
<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 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/angular/angular.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
I tried to start a new ionic project but the outcome is the same: I get a blank page.
I've set the ionic serve address to localhost; I,ve tried to load all angular and ionic module but to no avail. Do you have any suggestions?
On a closer inspection I found this error (I've skimmed the log):
"Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module starter.controllers due to:
[$injector:modulerr] Failed to instantiate module starter.services due to:
[$injector:modulerr] Failed to instantiate module ngResource due to:
**[$injector:nomod] Module 'ngResource' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.**
I wasn't really sure why but angular coudn't find the ngResource module. A quick check show me spelling wasn't the real problem.
For some reason (on whitch I'm still investigating) publishing the app destroyed angular-resource.js and the resulting .min was lacking the code.
Anyway, when I tried to reload the whole thing, I was loading ngResource version 1.3.15 and angular.js version 1.3.14, making them not working.
So, I was failing Computer Science 101: "always check the versions".
I've set all the version to 1.3.15 and all is working like a charm.
For what it is worth, we had a very similar problem: ionic serve -c had no negative behavior, no error output, simply loaded a blank screen.
The problem in our case was that there was a "!" in the full path of the working directory.
Changing the working directory to a path without a "!" solved this issue.
Original solution here
I have created a simple project with PhoneJS. i can see output simple project in google chorme and ie etc. i have added this project into xcode 5 use making UIWebview. Builded and install app to iphone 5. i cant see output simple project in any mobile device like iphone 5s and sumsung s4 etc.
index.html
<html>
<head>
<title>Making Change Happen</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="lib/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="lib/css/dx.ios.default.css" />
<link rel="stylesheet" type="text/css" href="lib/css/dx.android.holo-dark.css" />
<link rel="stylesheet" type="text/css" href="lib/css/dx.tizen.black.css" />
<link rel="stylesheet" type="text/css" href="lib/css/dx.generic.light.css" />
<link rel="stylesheet" type="text/css" href="lib/css/dx.win8.black.css" />
<script type="text/javascript" src="lib/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="lib/js/knockout-3.0.0.js"></script>
<script type="text/javascript" src="lib/js/globalize.min.js"></script>
<script type="text/javascript" src="lib/js/dx.phonejs.js"></script>
<link rel="dx-template" type="text/html" href="lib/layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="lib/layouts/SlideOut/SlideOutLayout.js"></script>
<link rel="stylesheet" type="text/css" href="lib/layouts/SlideOut/SlideOutLayout.css" />
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<!-- Views -->
<link rel="dx-template" type="text/html" href="views/news/news.html"/>
<script type="text/javascript" src="views/news/news.js"></script>
<link rel="dx-template" type="text/html" href="views/About PES/aboutpes.html"/>
<script type="text/javascript" src="views/About PES/aboutpes.js"></script>
</head>
<body>
</body>
</html>
index.js file
window.AppNamespace = {};
$(function () {
AppNamespace.app = new DevExpress.framework.html.HtmlApplication({
namespace: AppNamespace,
navigationType: 'slideout',
navigation: [
{
title: "News",
action: "#news",
},
{
title: "About PES",
action: "#aboutpes"
}]
});
AppNamespace.app.router.register(":view/:id", { view: "news", id: undefined });
AppNamespace.app.navigate();
});
Try to build package using Visual Studio with DevExtreme installed.
It allows to build native packages for all supported platforms (ios, android, windows phone).
Check out following link
http://help.devexpress.com/DevExtreme/Documentation/Howto/Packaging
If package will be built ok with DevExtreme, then your app is ok, and the problem with the way you do packaging. Will be glad to help you, just try and report the results.