I'm trying to trigger chrome mini-infobar for my PWA
I have checked that the page meets the add to home screen criteria, it also successfully passes
PWA audit in chrome devtools:
The web app is not already installed (not installed)
Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds) (nothing happens after 30s)
Includes a web app manifest that includes:
short_name or name icons must include a 192px and a 512px sized icons
start_url display must be one of fullscreen, standalone, or minimal-ui (yes)
Served over HTTPS (required for service workers) (yes)
Has registered a service worker with a fetch event handler (yes)
The most strange thing is that mini-infobar IS shown to the user when testing from local machine (using remote devices port forwarding). But it stops working after I upload it to the web.
My manifest:
{
"name": "Dota 2 counterpick",
"short_name": "Counterpick",
"start_url": "/?utm_source=homescreen",
"icons": [{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Service worker
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
I tried unregistering service worker, resetting site data, relaunching chrome but no luck. I'm using Chrome 71 on Android 8.1
PWA url: https://counterpick.herokuapp.com
Related
i have problem with the start_url And i dont know why is this code wrong i searching on all forums and internet but i cant found the answer for this, the Lighthouse say this:
Does not register a service worker that controls page and start_url
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. Learn more.
and if i add on the manifest.json add start_url: still dont works i found only one answer is use scope: but is still dont works.
{
"name": "Heexy",
"short_name": "Heexy",
"description": "Heexy is the private and fast search engine without ads!.",
"lang": "en-US",
"start_url":"/?start=url",
"scope": ".",
"display": "standalone",
"theme_color": "#03adfc",
"background_color": "white",
"icons": [
{
"src": "https://cdn.heexy.org/images/logo.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}
You must add service-worker.js script
I'm building a progressive web app bundled by webpack which uses service workers generated by workbox. When I ran the Chrome Lighthouse on the web app, however, it complains that:
Current page does not respond with a 200 when offline
start_url does not respond with a 200 when offline
Does not register a service worker that controls page and start_url
More disturbing is that even though this web app works as a PWA on my Windows desktop, it doesn't work on Android Chrome as the "Add to Home Screen" option didn't pop up.
Link to web app: https://alienkevin.github.io/try-elm-rust-pwa/
Link to full repo: https://github.com/AlienKevin/try-elm-rust-pwa/tree/master
Here's the log message proving that the service worker is registered:
Here's my webpack.config.js:
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const workboxPlugin = require('workbox-webpack-plugin');
const path = require('path');
module.exports = {
entry: "./bootstrap.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js",
},
mode: "development",
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin(['index.html', '*.ico', '*.png', 'manifest.json']),
new workboxPlugin.GenerateSW({
swDest: 'sw.js',
clientsClaim: true,
skipWaiting: true,
}),
],
};
Here's my manifest.json:
{
"short_name": "try-elm-rust-2",
"name": "try-elm-rust-2",
"icons": [
{
"src": "./android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#f74c00",
"background_color": "#ffffff"
}
I'm aware of a similar issue #6342 on lighthouse but the sample they provided didn't help me.
I have created a web app, PWA, and made it possible to add to Homescreen. When I add it to my mobile and try to open it, it doesn't open and Chrome stops working.
The same web app is working when launched from a desktop.
Here my manifest file:
{
"gcm_sender_id": "********",
"name": "*** **",
"short_name": "***",
"description":"**",
"icons": [{
"src": "icons/** 512x512.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/** 512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#032d31",
"theme_color": "#032d31"
}
If you want you can have a look at an article I wrote about it, maybe you find a missing setting.
Another thing: "gcm_sender_id"is obsolete and no more used (maybe this triggers the error). You should use FCM now (Firebase Cloud Messaging) that implements the Web Push interface and does not need to put anything in the web manifest.
I am working on a Chrome extension called Chrome Snippets that will allow you to inject snippets of JavaScript from files but I am having trouble accessing local directories on the user's computer. Anyone have an idea of how to accomplish this?
manifest.json:
{
"name": "Chrome Snippets",
"description": "Run JavaScript on the DOM of any web page from a library of recipes stored on your computer.",
"author": "Adam Fisher",
"version": "1.0",
"manifest_version": 2,
"default_locale": "en",
"permissions": [ "tabs", "webNavigation", "*://*/*", {"fileSystem": ["write", "retainEntries", "directory"]} ],
"app": {
"background": {
"scripts": ["js/background.js"],
"persistent": false
}
},
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"options_page": "html/options.html",
"homepage_url": "http://adamfisher.me"
}
background.js:
/*
** file: js/background.js
** description: Main functionality of the extension. Checks if a file exists
** for the given host name and loads it.
*/
chrome.webNavigation.onCompleted.addListener(function (details) {
var recipesDirectory = localStorage['Chrome_Snippets_Recipes_Directory'];
var host = "/^(?:ht|f)tps?:\/\/([^/]+)/".exec(details.url); // Get the host part of the URL.
chrome.tabs.executeScript(details.tabId, {
file: ''
});
});
You CAN'T make what you want in a single app/extension, that's what Paweł tries to tell you.
Compare Apps APIs and Extensions APIs
Apps can't use tabs (and in general can't interact with normal browser content), extensions can't use fileSystem (and in general can't access system resources).
You need to rethink your strategy OR use both an extension and an app that talk to each other.
Replace "app" in the manifest.json file with "background":
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
Reference: https://developer.chrome.com/extensions/event_pages
The "app" entry is reserved for Chrome Apps which have different set of API's and permissions.
================================================
Edit
Forgot about what you really asking for.
Chrome extensions can't access user's filesystem. This API is only available for Chrome Apps.
So if you need to do it as an extension you can't save files on local file system.
I'm trying to communicate from a web page to a packaged app. The idea is to have the web page read a number from a serial device. Because I want to access the serial device, I need a packaged app and can't use an extension. This is pretty similar to Keep Chrome Packaged App running in background? and it seems that Chrome documentation says this is possible.
How can I execute the chrome.runtime.sendMessage from a regular web page? When I do so, I get *Uncaught TypeError: Cannot read property 'sendMessage' of undefined. My simple function is:
function doFunction(){
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
function(response) {
if (!response.success)
handleError(url);
});
}
My packaged app loads and can access the serial ports. But my suspicion is the manifest isn't "enabling" the chrome.runtime of the regular webpage. Manifest.json:
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" },
"permissions": [
"serial",
"*://localhost/*"
],
"externally_connectable": {
"matches": [
"*://localhost/*"]
}
}
Maybe it's the ://localhost/ which I'm using for testing. But Chrome does not complain.
Any ideas out there? Thanks in advance.
Xan's comment did the trick.
While Chrome did not complain about *://localhost/*, it did not work. Chrome did complain about other combinations such as file://localhost/.
I added foo.com to host file and then served up my web page through a web server, and it worked! I can communicate from my web page to my packaged app.
Note that browsing to file://www.foo.com/hostpage.html did not work. But browing to http://www.foo.com:3000/hostpage.html did. (I'm using Rails, hence the 3000 port).
Morale of the story: When testing locally, you need to add an entry with a bogus second level domain to your host file.
Here's my manifest.json:
{
"name": "RFID Tag Reader",
"description": "Reads RFID Tags connected via USB reader",
"version": "0.0.0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": {
"16": "rfid-16.png",
"128": "rfid-128.png"
},
"permissions": [
"serial",
"*://www.foo.com/*",
"*://arealsite.net/*"
],
"externally_connectable": {
"matches": [
"*://www.foo.com/*",
"*://arealsite.net/*"
]
}
}
Adding "*://localhost/*" to externally_connectable worked for me.