I have a WordPress website and I am transforming this website to a PWA with the help of a plugin.
The PWA is working as expected: notifications, working without internet …
I have also followed this tutorial completely:
https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/
At the end, I have an Android launcher.
The new app is doing this:
If the browser is not set by default, it will ask the user to choose a browser.
I have an URL bar at the top of the app.
The app is not working without internet.
How can I fix all those points?
If the browser is not set by default, it will ask the user to choose a browser
Can't get this one, every mobile phone already do that by default, I think.
I have an URL bar on top of the app
Check if you have included the tag:
"display": "standalone"
on the manifest.json file
the app is not working without internet.
Check your service-worker.js file to see the resources needed to provide an offline experience are effectively cached. One can use this nice tool from Google to define routes policy easily.
You can use this Helpful tool.
Not installed yet
A URL bar being still visible at the top is indicative that the web page has not been installed yet as a PWA on your device. Choose Install from the tab menu or click on a [↓] icon next to the URL bar.
This will most probably also solve your other problems.
Related
I'm building a web app for internal use of a company that uses Samsung tablets (Android 9 and Chrome latest versions). I have a page with a list of links to PDF documents and the problem is that when I click any of them, they do not open automatically but instead show an Open button asking to open the document. If I click Open, the document opens as expected with the default viewer (Google PDF Viewer). When I go back, the Open button is still there. If the document has already been downloaded, the browser asks whether to download it again. These images show the situation:
http://www.maresme.net/stackoverflow/chrome_android_pdf/open_button.jpg
http://www.maresme.net/stackoverflow/chrome_android_pdf/allow_auto_downloads.jpg
Is it possible to bypass this step and have the docs open automatically without showing this button? I want to avoid this button and that when users go back from reading the doc they find again the list of links to other PDFs.
I've tried different methods of embedding PDFs (embed, object and iframe) without success. Also, I considered using pdf.js with the canvas tag but my webapp must also work offline and this solution uses too much resources.
Searching the net I found references about an option in Chrome under "Privacy and security" to allow automatic opening of the PDFs but this option does not appear in the tablets I'm using. Is it a security restriction that can't be bypassed?
I will really thank any help with this, it's driving me nuts.
I'm going to answer myself: the problem with Chrome mobile is that it has no support for extensions, so there is no PDF plugin that allows to view this kind of files within the browser. When you intend to open a PDF file the browser has to open it in an external app, be the default viewer (if defined) or any other which is capable (a list will be presented). This is why it asks permission, which I suppose it's a security measure and don't know how/if it can be circumvented.
With pdf.js (and other commercial kits) you can parse the PDF file using JavaScript in the browser, so no plugins are required. However, you must include all this code in your PWA for offline use (and there is some). Another approach that has worked for me is to use the Kiwi browser which supports extensions (I have a closed group of users and I can force this) and then use a plugin, for instance, the plugin version of pdf.js.
Hope this helps someone.
I have couple questions about generating PWA App. Maybe at the first step I explain something about app for better understanding my problems with generating app for multiplatforms.
Multi Tenancy App
I can't say much more about application. This is application where users can create own account. Accounts is separated at servers, eg. app1, app2, app3 etc. Every server has his own domain, eg. app1.example.com etc. Every user can upgrade his account to premium type and define own domain, which can be go on and login to his account without using global domains (here is a problem with PWA app, multi domains). I think it is everything what you need to know, if you need more specific info, give me a feedback, I will try to help you. I need to use WebView because app need access to localStorage.
My problems
Problem is with multi domains. In manifest.json configuration is possible to define one domain, which app will be use to display application and authorize it (with assetlinks.json) to don't display URL Bar (for "Add to Home Screen" - with android app is possible to add wildcard).
I need possibility to use application with multi domains (I achieve it on android - explanation in the following part of post).
Problem is too with adding application from mobile Chrome "Add to Home Screen" and on the desktop "Install app...". After redirect to other URL, URL Bar is shown.
Next problem is to compile Windows Store app from Visual Studio (explanation in the following part of post).
I need more info about compiling app for iOS and MacOS - is this possible to compile and test it without Apple devices? I tried to use pwabuilder.com, but after download MacOS package folder is empty. Maybe virtual machine could help me with that? What you recommend too use to make that application? I tested what I found in google, but it wasn't what I expect.
Installation from Chrome browser
Is possible to change user URL without showing URL Bar? Now after autorization user and redirect him on the properly his premium address url bar is showing - i don't want users to have to go on properly domain and install app from "Add to Home Screen" - they should install it from any domain and use it like Native App.
Android
Partially solved problem with subdomains for every account. It's working properly, but maybe someone has any other authorization solution where I don't need custom subdomain for authorize app.
Windows Store
I installed Visual Studio, make new application with this documentation but I getting error
Error Project must have a reference to an application. Please add a reference under the 'Applications' node in the Solution Explorer.
Here is an issue - Maybe problem is with newest version of Visual Studio? Next question is, even if I compile the App, what with multi domain - URL Bar will be visible when user will be redirected? What if Chrome don't be installed?
iOS and MacOS
Maybe someone has good documentation how to create apps on this platform and where can I test it? What with multi domain? URL Bar will be shown? Is possible to make it invisible like an Android App eg. wildcard or other solution?
My questions
How to create PWA app for iOS and MacOS. Maybe is nice documentation for it.
How to build application for Windows Store. I made app with Microsoft documentation, but it doesn't work - problem was open on GitHub Issue, but without solution.
Is possible to use multi domains and don't show URL Bar for applications installed from mobile Chrome like a "Add to Home" or desktop Chrome "Install app...".
What if Chrome don't be installed on device? Application will be working properly? I know from android 8.1 is possible to remove chrome from android. I don't know if after remove Chrome application will be working?
Thanks everyone for help and your patience, I counting on much help from you.
I'm recently building a PWA with Vue and I'm trying to find a way of making the IOS package out of It. So far I haven't done yet but for Windows, Android & MacOs are pretty easy ... There a lot of blog tutorials for that and if you don't want to go through much of coding then the PWA Builder is the best option for you.
For your 4th question if you want to run a PWA from a browser the browser you have must support standalone desktop apps.
I wanted to try my PWA on iPhone from Chrome and couldn't because that chrome does not have the feature to pin an app to screen so I had to rely on safari only
I have an android application say Sample App. I want to add App Links according to Android Developer Guide. I was successful in implementing them, but there was an problem with Chrome. When I access the corresponding Sample Web App and there is <a> tag with href="https://www.sample.com/profile" and it's also supported by App, it opens in app instead of continuing in Chrome.
I checked documentation and it is supposed to be default behavior of Chrome. But then I came across Linkedin app. The My Network tab they have when clicked in browser continues in browser but same link if I save to docs or any other application and click it then it opens in native app.
I want to know how this is done?
I believe this is because, as you said, the standard deep linking behavior is to route to the app if it is installed. This behavior is handed-off immediately when the link is clicked because your app overriders that url to be handled by app instead of Chrome.
First, I believe that you should route users to your application because its a better, more engaging experience, presumably.
If you are convinced, then I would change your manifest to strictly handle links that you want to handle. See this post to see how to handle only certain links.
I have a responsive website which can be accessed across multiple devices, our design and application is mainly targeted for mobile users.
To ease access to the site, we want to create a launch icon which will apear on the mobile home screen and user can access the site using one touch, as against launching the browser and typing the url / opening the bookmarked page.
I found a solution for it in IOS, which is also supported by the safari browser using which you can save the page url as a launch icon, can a similar feature be found on a android device? I would also be interested in prompting the users to create the launch icon if they are accessing it from a mobile phone /tablet.
Default Android
This is the preferred way since this is all based on default Android options and doesn't add any maintenance.
As a widget from bookmarks
If on android you long press the home screen and then select the widget option you can create a bookmark. This will let you select a bookmark from your chrome bookmarks to be linked on the desktop. If that works for you you're all set with default Android features. The icon from the bookmark is used on the desktop.
Directly from Chrome
Similar to this approach is selecting the "Add to homescreen" option in the chrome settings menu.
The icon is the icon from the website.
Custom alternative
As stated before the alternative is to create an app that only serves the purpose of being a link to your mobile website. Then you have 2 options:
Using default browser of user
An app that uses intents to open the default browser of the user with your URL. This should be the way to go since the user can now keep on using his favorite browser.
In app browser
An app that contains a single webview loading the URL of your webapp. This last option gives you more control over the browsing experience (blocking scripts, overriding requests, ...). However the user can no longer use his preferred browser.
About the icon
In both cases the Icon will be the icon configured and distributed within the app. This also introduce the need of a new app release if the icon or the URL should change.
About the code
Code examples and information about this webapp in app approach can be found at http://developer.android.com/guide/webapps/webview.html
Another good resource is https://developers.google.com/chrome/mobile/docs/webview/overview where mobile app development using a native android app with webview is covered with several aspects like tools, css tricks and more.
If I have understood your issue exactly then you would want to show a launcher icon for your website without creating any activity (screen) or doing any programming in android.
If this is the case then my answer is YES, as depicted in snap Google chrome provides this functionality to create a launcher/app icon on home screen.
Some webBrowsers like chrome enable the user to make a bookmark for a specific URL as an icon in the home screen, but I did not get evolved in a project like that. So it is possible.
You can make it simple by creating an application that contain only a webview to open your url and you can then create an icon for your app that hold the website on the home screen as the following in this answer
In my 3 years on Android I have never seen a website ask me to make a shortcut on my homescreen, however, the standard Android browser as well as Dolphin can create shortcuts from bookmarks.
While researching this with a quick search I found this thread states that Chrome allows this as well, and there's even a way to specify a homescreen icon for your users.
I'm looking to build an android app based off a mobile site. Basically, I just need an app with a browser that I can use as a platform.
Many of the "build an app online" sites offer this, where you just put in the home url etc, but they all include their own ads etc.
Any ideas where to start?
If you want to make your own simple app without Ads, use just a WebView inside of a simgle activity layout set to fill the screen.
Doing this you will eliminate all ads, as well as have the ability to add in more features later on if you so choose.
If you just want to create a launcher icon that will open up the default browser to your sites page, you can do that by just starting a browser intent, and then closing the actual app.
This will allow you to have an app icon and play store listing, however the only thing that iw will do is bring the user to your website like you have mentioned.
Create an Activity with a WebView.
I think you're looking for an app that displays a WebView. However, that will only display the website as if you were looking at it in a mobile browser such as Android Chrome.
If you want the data from a mobile site, without anything else, then you have to hope that the site provides that, or you have to download its HTML and scrape it.