googlechromelabs / airhorn Goto Github PK
View Code? Open in Web Editor NEWAir horn
Home Page: https://airhorner.com/
License: Other
Air horn
Home Page: https://airhorner.com/
License: Other
While running through the tutorial I ran into the issue where after I switched branches (master
> code-lab
) the tutorial continued running offline because Chrome still had the service worker registered in memory. Might be helpful to add some quick instructions for unregistering it if others run into that issue:
If you do not get an error screen this is because the Service Worker needs to be unregistered. Open up the Chrome devtools and under
Sources
>Workers
, click theUnregister
button next tosw.js
. Refresh the page, and you should get the standard error.
I'm displaying desktop notifications when push requests come from GCM, but haven't succesfully played a sound when browser receives it, can you give me more information about how to achieve that...
Here is my sample:
self.addEventListener('push', function(event) {
event.waitUntil(
self.registration.showNotification("Title", {
body: "body",
icon: 'img/logo.png',
vibrate: [200, 100, 200, 100, 200, 100, 200],
requireInteraction:true,
tag:"my-tag",
sound:"notify.mp3"`,
silent:false
});
);
})
Needs visual focus and keyboard access to cover minimal usability and accessibility use cases. Name role and state could be enhanced with aria role of button to improve those use cases.
It's because I have a timestamp on the URL and then use ignoreSearch and a host of other reasons.
Best thing, is make a specific cache per version of the App and just target that for the reqeusts.
I've put together a version of Air Horner that uses sw-precache
to handle generating and versioning the service worker for the static resources the site uses. You can check out the changes in https://github.com/GoogleChrome/airhorn/compare/master...jeffposnick:master?w=1 and I have it deployed at https://jeffy.info/airhorn/
I have a feeling that @PaulKinlan wants to keep this repo using a "vanilla" SW, in which case the issues identified at #9 and #10 should probably be resolved independently (I'm happy to take care of them). But I wanted to at least propose using sw-precache
, since I do think it avoid these common pitfalls and pointing developers to it from the get-go can lead to a better overall experience, especially as the size and complexity of a static site grows.
Hey, while reading your article here:
https://developers.google.com/web/fundamentals/codelabs/offline/
I've visited the repo in order to take a look at the cache-polyfill and was suprised I found it only in Removal commit message. Maybe it would be good to remove it from the code provided in the article as well.
Hi,
Not sure this is a place to ask questions and if not apologies and could you direct me to a more appropriate forum. Thanks.
One general issue (not with this code per-se but related to service worker caching in general) that i see is that some files get loaded twice - specifically those links and scripts which are in the doc head section and then again in the set of files that are to be cached during the service worker install. For example the script <script src='/scripts/pwacompat.min.js' async></script> is loaded at the end of and is also in the cache.addAll of the install.
So, what seems to happen is that the files that are loaded by the browser because they are linked in the head section get loaded before the install event occurs for the service worker and then get loaded again during the install process to put them in cache.
Am I understanding this correctly and if so, is there a particular strategy to follow to minimize or avoid this?
Hi,
Just wondering if there is an advantage to use an XMLHttpRequest for the airhorn sound effect rather than the native Audio API? I guess compatibility could be an issue, but it seems very well supported:
http://caniuse.com/#feat=audio
There is no description of how to run the run/deploy the project. Would be nice to have a more detailed README that addresses this issue.
Clicking with 2 mouse buttons simultaneously causes the sound to play forever, even after release of both mouse buttons.
Clicking this way multiple times causes the long airhorns to stack and eventually sound really bad.
Chromecast and Chromecast built-in devices uses Chrome to open the receiver files. In some devices it isn't possible to play videos because Chrome requires a user click and, obviously, it's impossible.
The videos only play if we set in muted mode and pauses when we try to unmute.
The allow="autoplay;" attribute for iframe tag doesn't run in all Chromecast. It looks as depending chromecast type it uses different Chrome versions.
Since the SW uses a cache-first strategy that will never check for updates to resources outside of the install
handler, it's crucial that the HTTP request made during the install
handler goes directly against the network, and doesn't return a response from the browser's cache. In order to ensure this, a cache-busting URL parameter can be added to each URL.
This is something that sw-precache
takes care of automatically.
I appreciate the sample code but this airhorn made me jump off my chair.
Hi, I cloned the contents of app folder (airhorn/app/*), the app works on the domain but the service worker doesn't. opening the progressive app offline doesn't work. It shows the internet disconnected error. Should I take any other steps ? As I understand these mentioned are optional.
Working on Apache server, Derbian.
Google docs says it will be called only once in 3 months.
If dismissed by a user, it will not be shown until a sufficient period of time (~3 months) has passed.
https://developers.google.com/web/updates/2018/06/a2hs-updates
const beforeinstallprompt = function(e) {
promptEvent = e;
promptEvent.preventDefault();
ga('send', 'event', 'install', 'available');
root.classList.add('available');
return false;
};
window.addEventListener('beforeinstallprompt', beforeinstallprompt);
Just need to clean up the code a bit and remove the stuff that isn't core.
Many of the URLs within the source are absolutely, starting with /
. This makes it more difficult than it needs be to deploy somewhere that isn't the root of a domain.
E.g. xhr.open('GET', '/sounds/airhorn.mp3' );
would be more flexible if it were xhr.open('GET', 'sounds/airhorn.mp3' );
There's another case where /
is used as the scope
for the SW registration, and that's an anti-pattern. /
will never be valid unless the registering page is also served from the top-level, and if that's the case, you might as well just leave it with the default scope of ./
.
Unless the project were to move to an automated build-time solution, like sw-precache
, it's necessary to bump the version number in sw.js
in order to trigger the SW update flow.
If a developer makes any local changes to resources and then fails to bump the version, their existing users will be stuck indefinitely with the old resources due to the cache-first strategy that's being used.
Given the importance of understanding versioning, it would be ideal to explicitly call this out in the README.md.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.