I have a quick question.
I'm building a PWA with Polymer and Lighthouse reports, that the manifest's start_url is not cached by the ServiceWorker.
Since I want to track the users, which use the 'Add to homescreen' function, my manifest.json contains
"start_url": "index.html?homescreen=1",
I tried putting this exact string into my sw-precache config file, but the script generates a ServiceWorker, that just caches the index.html file.
(I'm aware, that it's a bit redundant to cache index.html & index.html?homescreen=1)
Do you have any idea, how to fix this behaviour?
Thanks!
The ignoreUrlParametersMatching option is sw-precache can help you here.
By default, it's set to [/^utm_/], meaning that if you configured your Web App Manifest like
{
"start_url": "index.html?utm_source=homescreen"
}
then things should work as expected. If you'd like to keep that ?homescreen=1, then, when generating your service worker, you can change explicitly set the ignoreUrlParametersMatching parameter to [/^homescreen/].
Related
Hi contao developer out there,
Anybody knows why the styling of the whole admin backend's missing.
I attach a screenshot, let me know if anyone knows something.
enter image description here
Looks like you have installled your Contao into a sub directory and setup your base url incorrect.
Have a look into system/config/pathconfig.php and verify the path is the same as in your browser (i.e. return ''; for an installation in the root dir and return '/some-dir'; for an installation in an subdir).
You should also check with web-developer tools as to which URLs for the Backend CSS it tries to load. Usually this already points out what in the base url is wrong.
Last thing, you might have set up some "strange" rewrite rules in your .htaccess file which may cause these problems.
Problem solved.
The fact that, the problem comes from the server configuration.
The Php process wasn't have enough permission, so it takes me some time to realise and knowing that I need to change the apache modul version to cgi/fpm mode.
This grants the php to recreate and generate the assets including js/css in asset folder. (at least from my own observation) and it works now.
In my Grails app I have various images:
/web-app/images/competition/foo bar.png
/web-app/images/competition/foo bar2.png
/web-app/images/competition/foo bar3.png
The name of the image to be displayed is stored in the model that's passed to the GSP. I'm trying to create a link to this using the <r:img> tag provided by the resources plugin. So far I've tried:
<r:img file="competition/${imageName}.png"/>
<r:img file="competition/${imageName.encodeAsHTML()}.png"/>
<r:img file="competition/${imageName.encodeAsURL()}.png"/>
But none of these seem to work. I realise renaming the file would make my life a lot simpler, but sadly this is not possible.
Add the below entry in ApplicationResources.groovy as.
modules = {
images {
resource url:'images/competition/foo%20bar.png'
}
}
and access it in view as
<r:img uri="/images/competition/foo bar.png"/>
or
<r:img file="competition/foo bar.png"/>
You should be able to access the resource.
Note:-
Accessing the resource as
<r:img file="competition/foo%20bar.png"/>
did not work for me. Apparently, I made sure I am not reading from browser cache so I followed the below steps:
Tested in Chrome Incognito Mode.
Cleared browser cache every time.
Tested in Firefox and IE.
Cleaned and compiled the project to replicate the issue every time, in case browser was served from the cache.
Can someone show a complete example of application cache with html, css, js, appcache file including CACHE, NETWORK and FALLBACK section. Also updating the manifest. Where should the coding be written?
http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-updating-cache
As per updating cache from the above link, where should the coding been written?
The code for updating the manifest is written by your sever somewhere.
Either in PHP or Node.js you must write and serve this file with the correct mime type as specified in the link you posted.
You can auto generate this from the css and js files on your server. Don't include html files unless they are dynamic pages.
The first line in the file must be CACHE MANIFEST
Now it assumes your are putting things into the CACHE section, which is where you need to include all the paths to your css and js that you want the user to be able to use offline.
To create a NETWORK section, simply print out the word on it's own line.
Under this section you should include pages that should only be used online.
Under the FALLBACK section include a page to show if there is no offline version available.
This is a brief explanation but you should be able to easily find a tutorial that will help you auto generate this file.
For more details about the cache manifest itself:
http://diveintohtml5.info/offline.html
Offers the best explanation IMHO.
I'm trying to setup a iPad app to work offline. I was able to successfully get it to work but I was told to put the app in multiple sub directories. When I did this and update the cache manifest file to the new destinations of all the files I kept getting an error that the site wouldn't work because it wasn't connected to the internet. I tried multiple paths and looked up different ideas but have come up empty handed. Is their a way to get offline mode working with a site inside sub directories?
Thanks.
This shouldn't make a difference. Make sure all urls in the manifest are relative and always end the manifest with:
NETWORK:
*
Furthermore make sure you don't forget to add any images, libraries etc. from the cached url's to the manifest. Sometimes even caps can make a difference. OPen the console of the developer tools in Chrome to see what's being cached and what breaks loading the appcache.
Also make sure there are no iframes (ie. like-buttons) on the homepage(page that includes the manifest attribute in the html-tag) which is always cached.
Little trick:
If you want to fallback you're homepage place the manifest attribute in an invisible iframe on the homepage of your app.
That way you have total control over what's cached and what not.
Does anyone know why there are question marks (with a number) after the images and css files (when looking at the html code)? And how can I turn them off?
From Rails API documentation:
By default, Rails will append all
asset paths with that asset‘s
timestamp. This allows you to set a
cache-expiration date for the asset
far into the future, but still be able
to instantly invalidate it by simply
updating the file (and hence updating
the timestamp, which then updates the
URL as the timestamp is part of that,
which in turn busts the cache).
Hope it helps.
It is to be able to cache the file on the client and still making sure the client receive the newest version when there is a change. So each file modification results in a new timestamp which the client will do a new request to the server to receive the modified file.
If you do not want to use (though I cannot see why - it is a good thing) simple do not use the rails helpers for including javascripts or stylesheets. Just include the normal HTML tags: link and script.