There is a web app which runs in a standalone mode with the following manifest.json
{
"lang": "de",
"name": "Test.App",
"short_name": "Test.App",
"start_url": "/36485/",
"display": "standalone",
"theme_color": "#FF4500",
"background_color": "#FFFFFF",
"icons": [...]
}
There is no browser UI in this mode, so opening documents (like pdfs, docs, etc) must be done in a new Safari Window. Which brings me to the question: how do I force Safari to open a new browser window? The solution we have found now is to give it a different domain name(!!), ie. a subdomain. Every other option - be it window.open or taget=_blank - had no effect whatsoever and all the links would open in the same standalone window thus making it impossible to go back to the actuall app interface. External domain seems to do the trick. Is there any workaround to avoid using a subdomain? Maybe via some definitions in the manifest?
Related
Currently I implemented a site.webmanifest and a service worker on my new version of my blog.
https://nextjs.marcofranssen.nl/
Despite Lighthouse reports I'm 100% matching the PWA requirements, including installability, I do not see the install button in the address bar of my browser.
On my current version of my blog it does show up.
https://marcofranssen.nl
Following picture shows the button when navigating to my current blog.
Now I'm wondering which requirement I'm missing.
I also did a review of this criteria https://web.dev/install-criteria/.
Does anybody have a clue what I'm missing or overreading?
See here for the manifest file https://nextjs.marcofranssen.nl/site.webmanifest
This manifest file is also referenced in the head section.
My old blog is fully static generated html. My new blog is build using Next.js so not entirely a static page, although I don't think that should matter.
Despite Lighthouse reports I'm 100% matching the PWA requirements, including installability, I do not see the install button in the address bar of my browser.
I ran a lighthouse test on https://nextjs.marcofranssen.nl/ and [PWA] section had a few problems
as detailed above, your website manifest misses start_url :
"name": "Marco Franssen - Blog",
"short_name": "MF Blog",
"description": "Blog by Marco Franssen, covering software development!",
"icons": [],
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/"
}
for more details about manifest structure please refer to Web app manifests
after that you need to implement a serviceWorker, and for that you can use next-pwa package or next-offline package and both use google's workbox under the hood.
I prefer next-pwa package, because it works out of the box and there is no need for too much configurations.
I have a custom URL prefix setup for Firebase dynamic links. I create my shortened URL via the REST API as follows:
{
"dynamicLinkInfo": {
"domainUriPrefix": "https://my-custom-domain.com",
"link": "URL_TO_BE_SHORTENED"
},
"suffix": {
"option": "SHORT"
}
}
The Firebase project is linked to my iOS and Android apps.
Here is a debug of a link created as per above (I get this from adding ?d=1 at the end of the dynamic link). According to the debug it should open the web link.
I would like to user to tap the link and for the URL to open. Currently the app opens on iOS and Android. If the app isn't installed, then it takes the user to the respective app store listing of our app. How can I get our custom domain to work just like a normal shorten URL and take the user to a webpage and not open our app or app store?
Actually this is pretty simple, when you create a dynamic link you can define the behaviour on different platforms (ios, android, web). (Choose edit on an existing link to modify behaviour)
Under the section
"Define link behaviour for XXX"
choose
"Open the deep link URL in a browser"
Then the link will be opened directly in the browser.
If you would like to lead them into the app, and only if the app is not installed, redirect them to the url, then Choose:
"Open the deep link in your iOS App" -> Select your App
And then under the section "If your app is not installed, send the user to" select Custom Url and paste the original URL.
I have a link that looks like this:
https://mywebsite.com/#/new-account?jk=-LOLgLiyfxANW-ojMKrf
jk is the variable that I would like to read and use on this page. The variable will change for each user.
The problem is that when this link is clicked, the user is redirected to the main page of the application. The app is a PWA developed using Ionic. I checked my code carefully and there is nothing that would cause such redirect behavior.
So far I tried uploading the app again with deselecting "single page" option during Firebase Init but the problem persists.
thanks
I contacted firebase support and they suggested I solve it by including this in firebase.json within the hosting tag:
"redirects": [{
"source": "/#/new-account?:vars*",
"destination": "https://mywebsite.com/#/new-account?:vars*",
"type": 301
}]
Firebase hosting captures whatever text is after : and transfers it to the destination. Otherwise, it creates a 404 for any link that doesn't exactly match the URL of existing pages.
Maybe there is a more elegant way to do this but it worked well for my situation. More info is available at this link:
https://firebase.google.com/docs/hosting/full-config#redirects
I would like to serve two different versions of my statically generated website: mobile version and tablet, desktop version on the same url - basically I want to use Dynamic serving and Vary HTTP Header - Vary: User-Agent as described here: https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving
I want to use:
responsive web design / rwd for desktop and tablet versions with desktop optimised image sizes and assets
adaptive web design / awd with responsive web design (rwd is much simpler implementation than desktop one - just may be some different styling for phablets) for mobile version with mobile optimised image sizes and assets
(I should serve two different layouts and at least two different sizes for the images - mobile and desktop/tablet)
I was reading "Customize Hosting Behavior" section in Firebase Hosting documentation - https://firebase.google.com/docs/hosting/url-redirects-rewrites , but it seems there is no way to configure that at the moment.
The only way currently as suggested by Daniel Herr comment - Dynamic serving on Firebase Hosting (Vary HTTP Header)
is to use cloud functions:
So, I can use
https://www.npmjs.com/package/mobile-detect
https://www.npmjs.com/package/device
https://www.npmjs.com/package/wurfl / http://wurfl.sourceforge.net/
to detect the type of device and then dynamically generate/read the mobile or desktop version of the pages.
This way we will serve the content dynamically which disables the benefits and speed of CDN, but we can still cache the pages by setting res.set('Vary', 'User-Agent'); which may be workaround this problem.
I was wondering about more "native"/"out-of-the-box" solution, which is provided by firebase-hosting itself, like in "Rewrites" (https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites):
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [
{
"source": "**",
"device": "MOBILE",
"destination": "mobile/index.html"
},
{
"source": "**",
"device": "DESKTOP",
"destination": "desktop/index.html"
},
{
"source": "**",
"device": "TV",
"destination": "tv/index.html"
}
]
}
This way, even if I have TV version of the website with tones of images and very wide layout it will not be served on MOBILE devices - adaptive web design.
So, currently there is no way to do that, except using custom cloud functions and actually generating the website dynamically.
Could you please confirm that or provide any information if this will be implemented by the Firebase team at some point?
Thanks!
I'm currently using grunt-contrib-watch which has livereload built in. This is working fine and on saving a file Chrome reloads page (with the help of live reload browser extension).
However there is sometimes a brief delay in reloading a page. Sometimes I'm left staring at a page not knowing whether it just hasn't reloaded yet or whether a LESS/CSS change hasn't worked. Is it possible to have some kind of notification (like a beep) to tell me when the page has been refreshed?
Might want to take a look at Grunt Notify.
This allows you to set specific notifications for each task you are running and allows for a large amount of configuration.
Example task at the top of your grunt file:
grunt.initConfig({
notify_hooks: {
options: {
enabled: true,
max_js_hint_notifications: 5,
title: 'Notifications'
}
},//other grunt tasks here
});