I have an angular app running on angular 7 and i'm trying to turn it on PWA, i installed pwa 0.6.8 and everything is working (in localhost) except the add to home screen who doesn't show up when i am running it on galaxy S5 from the google dev tolls
When i run the audit it says that it is installable for the user :
Result of the audit
here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BSJP</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" sizes="144x144" href="assets/icons/icon-144x144.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
</body>
</html>
my manifest :
{
"name": "mvp-front",
"short_name": "BouffeSqueJtePrepare",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/index.html",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
and ngsw.config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
what am i missing ?
Thank you
A web app can only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits.
This guide tells you how you can simulate those events for development: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
Add to home screen will appear if your application fullfills following criteria
manifest.json
app hosted over https server : eg: you can use netlify
service worker with atleast one fetch event.
You can find the entire code for it at
https://github.com/rohan12patil/pwa/tree/A2HS
demo at
https://newpwa.netlify.com
The code is basic & you can easily understand & integrate in your angular app
I would suggest you to try to host the project in Firebase (you can also choose another provider).
It is free and it gives already HTTPS out of the box. You can create a project in Firebase and deploy the solution in less than 10 minutes. Then you can test for real with any mobile device whether you app prompts for a A2HS.
I started writing a series of articles about PWAs, if you are interested to learn more about it you can have a look. The second post covers exactly the A2HS topic: How to install a PWA on a user's device.
Related
I am making a Chrome Extension in which I need to display some videos from YouTube.
The Chrome Extension works as follows. The action button starts a timer. When the timer completes, a new tab appears showing a random video from a list of YouTube videos.
To have control over these videos, and to be able to use the video player controls, I need to include the iFrame player API, but after trying several options I keep getting the same error:
Refused to load the script 'https://www.youtube.com/iframe_api'
because it violates the following Content Security Policy directive:
"script-src 'self'". Note that 'script-src-elem' was not explicitly
set, so 'script-src' is used as a fallback.
The relevant code is as follows:
event.js:
function openNCprojectVideo() {
chrome.tabs.create({url: "ncproject.html"});
}
This code activates when the timer ends.
ncproject.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NC Project Video</title>
<link rel="stylesheet" href="assets/templates/css/ncproject.css">
</head>
<body class="bg-gradient">
<!-- VIDEO PLAYER -->
<div id="player"></div>
<script src="assets/templates/js/ncproject.js"></script>
</body>
</html>
ncproject.js:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'FfwtA2nS2ik',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
Manifest:
{
"name": "NC Project",
"description": "A chair yoga google chrome extension for everyone",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "event.js"
},
"action": {
"default_title": "NC Project",
"default_icon": "images/icon32.png"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"permissions": [
"alarms",
"idle",
"notifications",
"tabs",
"storage"
],
"host_permissions": [
"<all_urls>"
],
"options_ui": {
"page": "options.html",
"open_in_tab": true
}
}
I have reviewed several posts related to this same issue, but in none of them I have found a satisfactory solution. Thanks in advance for your help.
I discovered that using manifest.json you can specify different icons for your site
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.json">
// manifest.json
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
The question is, will this technique works without adding a serviceworker to website?
It seems that service worker caches the website, etc and seems it does something that I do not want to do right now. So can you avoid adding service worker in order icons defined in manifest.json to work?
I was trying out this webextension-polyfill example to executeScript using tabs.executeScript and I get an error message:
Uncaught(in promise) Failed to load file: "browser-polyfill.js"
This is the example code I am referring to:
browser.tabs.executeScript({file: "browser-polyfill.js"});
https://github.com/mozilla/webextension-polyfill
The same goes for the other example where I try to use browser-polyfill in the content script like:
"content_scripts": [{
// ...
"js": [
"browser-polyfill.js",
"content.js"
]
}]
I get the error message: Could not load javascript "browser-polyfill.js" for content script. Could not load manifest
It works in background script though and also in popup html.
Here is my manifest file
{
"name": "Dummy",
"author": "UI Team at Dummy",
"version": "1.0.0",
"manifest_version": 2,
"description": "Vera browser extension",
"permissions": [
"storage",
"webRequest",
"tabs",
"webRequestBlocking",
"storage",
"*://*/*",
"declarativeContent"
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/extension_icon16.png",
"32": "images/extension_icon32.png"
}
},
"background": {
"scripts": ["background-proprietary.js", "background.js"]
},
"content_scripts": [
{
"matches": ["https://*.box.com/*"],
"js": ["content-script-box.js"],
"all_frames": true
},
{
"matches": ["https://*/*"],
"include_globs": ["*DummyExtensionFlow=1*"],
"js": ["browser-polyfill.js","config-sharepoint.js"],
"all_frames": true
}
],
"icons": {
"16": "images/extension_icon16.png",
"32": "images/extension_icon32.png",
"48": "images/extension_icon48.png",
"128": "images/extension_icon128.png"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Here is my popup html file which is working with webextension polyfill
<!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">
<link rel="stylesheet" href="./popup.css">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="application/javascript" src="browser-polyfill.js"></script>
<script type="text/javascript" src="./popup.js"></script>
</body>
</html>
What am I doing wrong?
Found a satisfying solution from the same tutorial.
var browser = require("webextension-polyfill");
This works for me!
The document said that after you've installed the package by npm install --save-dev, You will find that file at node_modules/webextension-polyfill/dist/browser-polyfill.js. All you have to do is copy that file to your project directory.
You can also use the minified version for better load speed
webextension-polyfill
I would like to create a chrome extension that open my website on homepage / new tab. I used the HTML tag <meta http-equiv.. to redirect the user to my website and it working great.
The problem is that I want to pass parameter (create unique ID for each user) and to attach this parameter to my website URL:
for example: http://www.mywebsite.com/?user_id=parameter_value_here
where I should create my user id?
how I pass it to the new tab html file?
My extension code:
newTab.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://www.mywebsite.com/?user_id=value_here" />
</head>
<body style="display: none;">
</body>
</html>
Manifest
{
"name": "My website name",
"version": "1.1",
"description": "website description goes here",
"chrome_url_overrides" : {
"newtab": "newTab.html"
},
"permissions": [
"topSites",
"chrome://favicon/"
],
"manifest_version": 2,
"permissions":[
"http://*/*",
"https://*/*",
"management",
"storage",
"tabs",
"webRequest",
"webRequestBlocking",
"cookies",
"bookmarks"
]
}
I'm working on building a Chrome extension for a forum, but the problem is the JavaScript for my popup.html won't do anything. I added alert("popup.js running...") at the top and it does come up but then my popup doesn't display at all. This is a problem because JavaScript is going to be required for the popup page. I'm kind of lost, so I'm assuming I'm just missing something that is preventing my JavaScript from running. I heard the AdBlock extension would prevent it from running but I removed that and it still didn't work. Anyone see a problem?
manifest.json
{
"name": "Riggy",
"short_name": "Riggy",
"description": "Create your own Roblox Forum signature with Riggy!",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup/popup.html"
},
"permissions": [
"storage"
],
"content_scripts": [
{
"matches": ["http://www.roblox.com/*"],
"js": ["scripts/jquery.js", "scripts/content.js"]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<span class="title">Riggy</span><br />
<span>Signature: </span><input name="siggy" id="siggy" value="Riggy is greatness!" />
<span id="output">[output]</span>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
alert("popup.js running");
$(document).on("ready", function() {
var siggy = $("#siggy");
var output = $("#output");
function message(text) {
output.html(text);
}
siggy.change(function() {
chrome.storage.sync.set({"siggy": siggy.val()}, function() {
message("Saved signature.");
});
});
message("Riggy is ready!");
});
I had the same exact problem with an extension of mine, I believe it was fixed after I added this to the manifest file.
manifest.json
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
More info here: http://developer.chrome.com/extensions/contentSecurityPolicy.html.