Action Cable not working in Safari on IOS - ios

I want to exchange information about action cable in rails 6.0.2.
On my desktop this also works great.
But unfortunately in Safari on my IPhone and IPad (IOS 13.4) the connection to the websocket is not established. Neither the 'connected' nor the 'received' function is called. I have no errors or infos in the Developer Tools console of Safari on my IPhone (connected via cable).
I have all relevant files here again, they are mostly standard generated by rails.
app/javascript/channels/test_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("TestChannel", {
connected() {
console.log("connected")
},
disconnected() {
console.log("disconnected")
},
received(data) {
console.log("received")
}
});
app/javascript/channels/consumer.js
import { createConsumer } from "#rails/actioncable"
export default createConsumer()
app/javascript/channels/index.js
const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)
app/javascript/channels/index.js
const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
package.json
{
"name": "...",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
app/channels/test_channel.rb
class TestChannel < ApplicationCable::Channel
def subscribed
stream_from "some_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
ngnix Config (It does not work locally in development either)
....
location /cable {
passenger_app_group_name test_app_action_cable;
passenger_force_max_concurrent_requests_per_process 0;
}

Ok, it was my mistake. In my Safari the experimental features 'NSURLSession WebSocket' was enabled. After I disabled the option, it worked. The option can be found at:
Launch Settings > Scroll down to find Safari, and tap it. > Scroll down to click the Advance option. Then you will see the Experimental Features > Tap it

Related

ios App is not showing infoPlist permission string in app store review and got rejected

I am using expo-image-picker in one of my expo managed project (SDK 40). Here is my app.json:
{
"expo": {
"name": "Alpha Soko Classifieds",
"slug": "alphasokoclassifieds",
"version": "1.1",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"backgroundColor": "#ff4500",
"resizeMode": "contain"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.alpha.soko",
"buildNumber": "2",
"infoPlist": {
"NSCameraUsageDescription": "This app uses the camera to capture and upload user profile image and listing image.",
"NSPhotoLibraryUsageDescription": "This app needs access to the photo library to select and upload user profile image and listing image.",
"NSLocationWhenInUseUsageDescription": "This app usages device location on listing information, Listing search Data and User information."
},
"config": {
"googleMapsApiKey": "AIzaSyCCCF3jLaTY******hGASwzod1bPYNi***"
}
},
"web": {
"favicon": "./assets/favicon.png"
},
"android": {
"package": "com.alpha.soko",
"config": {
"googleMaps": {
"apiKey": "AIzaSyCCCF3jLaTY******hGASwzod1bPYNi***"
}
},
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#fff"
},
"permissions": [
"CAMERA",
"CAMERA_ROLL",
"MEDIA_LIBRARY",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"RECORD_AUDIO",
"READ_PHONE_STATE",
"READ_CONTACTS",
"LOCATION"
],
"versionCode": 2
}
}
}
The standalone build (.ipa) got rejected twice , because it is not showing the text in the permission modal. See the Image apple review team has sent me.
Apple's recommendation is following:
"Please revise the purpose string in your app’s Info.plist file for the photos to explain why your app needs access.
You can modify your app's Info.plist file using the property list editor in Xcode."
I tried with a simulator build and it works well.
I am really confused now . Can Anybody help me with this? What can I do now? Please help.
I had the exact same situation during the same days that you posted this question. Had my app update rejected twice for the same reason, even though I had the proper texts in the Info.plist.
I actually just decided to open an appeal in the conflict resolution center, responding to the rejection by explaining what had happened. I told them there is probably going something wrong in their testing environment, since I'm not the only one who has this problem (I linked to this question on Stackoverflow, so thank you), and told them I can see the messages when I view the app on my device.
Miraculously, they just accepted my update - the exact same build that was rejected previously!
I've found the problem and solved it.
Expo image picker has feature to reduce image quality and crop before "NSPhotoLibraryAddUsageDescription" this permission. I've add this and the problem is gone. Apple approved my app.
Thanks everyone.

Stable React Native App Suddenly Showing White Screen

An app I have been building for the past month using react native suddenly stopped working and started showing a white screen upon running react-native run-ios. Sometimes the emulator shows a yellowBox that says Possible Unhandled Promise Rejection, but other than that, I cannot see any errors. The issue is happening in both the branch I was working on and the master branch, which was definitely stable at its last commit.
These are the dependencies I have currently:
"axios": "^0.17.1",
"base-64": "^0.1.0",
"firebase": "^4.8.1",
"query-string": "^5.0.1",
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-dotenv": "^0.1.0",
"react-native-linear-gradient": "^2.4.0",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "^5.4.0",
"redux-thunk": "^2.2.0"
Does anyone have any suggestions for how to overcome this obstacle? Or any tools that would help debug? I really would appreciate any help anyone could provide.
Screenshot of JS Debugger Error
I believe I found the solution. The error was happening with the redux-persist dependency.
In my Redux reducer, I had this case:
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'persist/REHYDRATE': {
if (action.payload.auth) {
const { access_token, refresh_token, expiration } = action.payload.auth;
return {
...state,
access_token: access_token,
refresh_token: refresh_token,
expiration: expiration,
};
} return state;
}
// other cases
}
But for some reason, there was no payload to the rehydration (hence the error Cannot read property "Auth" of undefined).
I commented out this case, reloaded my simulator using cmd-R, and everything seemed to work again! I'm not entirely sure why this fixed the problem, so if anyone has any thoughts, definitely feel free to share.

Exporting/Packaging Firefox add-on to web extension xpi

I'm recently looking into Firefox web extension development and I have no prior extension development skills therefore, accept my apologies in advance if this is a silly question.
I have developed an extension to manipulate certain elements in a certain domain. It works great in Firefox about:debugging environment. I've only used jQuery and Javascript to manipulate my settings on DOM. No SDK or XUL has been used.
storage.local and browser tabs API used to store & transfer my data.
My questions are how to export this source code to test amongst few friends to verify functionality before signed by AMO and my approach in here is right or wrong.
manifest.json
{
"content_scripts": [
{
"matches": [
"*://*.domain.com/*"
],
"run_at": "document_start",
"js": [
"jquery.js",
"flat_ui_min.js",
"application.js"
]
}
],
"name": "Extension name goes here",
"icons": {
"48": "icons/extension-icon-48.png"
},
"description": "Sample description goes here",
"homepage_url": "URL to the extension info",
"version": "1.2",
"manifest_version": 2,
"browser_action": {
"default_icon": {
"32": "icons/browser-icon-32.png"
},
"browser_style": true,
"default_title": "Extension short name",
"default_popup": "popup/layout.html"
},
"permissions": [
"activeTab",
"storage",
"tabs"
]
}
install.rdf
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>name#domain.org</em:id>
<em:type>2</em:type>
<em:name>Extension name</em:name>
<em:version>1.2</em:version>
<em:description>Extension description</em:description>
<em:creator>Creator's name</em:creator>
<em:homepageURL>Extension homepage</em:homepageURL>
<em:optionsType>1</em:optionsType>
<em:targetApplication>
<Description>
<em:id>Some random string</em:id>
<em:minVersion>46.0</em:minVersion>
<em:maxVersion>57.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
Directory Structure
Extension Folder
└─── install.rdf
└─── manifest.json
└─── jquery.js
└─── application.js
└─── flat_ui_min.js
└─── popup/
└─── css/
└─── bootstrap.min.css
└─── flat-ui.min.css
└─── style.css
└─── fonts/
└─── glyphicons/
└─── lato/
└─── layout.html
└─── icons/
└─── browser-icon-32.png
└─── browser-icon-48.png
Appreciate your thoughts in advance.
Cheers!
SO user makyen has given his thoughts and ideas of making this extension to test upto my standards. Posting those here as an answer is to make it as a guide to other beginner developers to overcome my question.
Following changes were done:
new settings for manifest.json
{
"description": "brief intro about the extension",
"manifest_version": 2,
"version": "1.2",
"name": "Extension name",
"homepage_url": "Developer or extension website",
"icons": {
"32": "icons/browser-icon-32.png",
"48": "icons/browser-icon-48.png",
"96": "icons/browser-icon-96.png",
"128": "icons/browser-icon-128.png"
},
"content_scripts": [
{
"js": [
"jquery.js",
"flat_ui_min.js",
"application.js"
],
"matches": [
"*://*.somedomain.com/*",
"*://*.somedomain.org/*"
]
}
],
"browser_action": {
"default_title": "Extension browser title",
"default_popup": "popup/layout.html",
"browser_style": true,
"default_icon": {
"32": "icons/browser-icon-32.png"
}
},
"permissions": [
"activeTab",
"storage",
"tabs"
]
}
I removed install.rdf as web extension don't need one. When it comes to packing the extension, Follow this guide. More info can be found here.
After that simply change file extension from filename.zip to filename.xpi to distribute.
Happy coding everyone.!

How do I set a keybinding for an extension in VSCode?

I am using VSCode to write a Swagger (OpenAPI) specification and I want to make use of a specific extension to aid in the writing of that specification.
The extension I have installed does not supply a key binding for me to easily invoke it with.
How do I go about adding the key binding? I have attempted to make it work by clicking File->Preferences->Keyboard Shortcuts and editing the keybindings.json file, but without success thus far.
It seems I have to discover the extension's command and I don't know where to find that, doesn't seem to be readily apparent on the extension summary page either when I click on the extensions hub, then on the extension I want to use.
In case somebody is writing their own extension for VSCode, you can set up a default key binding for your commands using the keybindings prop alongside with commands inside contributes prop. Example setup in package.json of a sample project inited by Yeoman yo code command:
{
"name": "static-site-hero",
"displayName": "Static site hero",
"description": "Helps with writing posts for static site generator",
"version": "0.0.1",
"engines": {
"vscode": "^1.30.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.helloWorld",
"onCommand:extension.insertLink",
"onCommand:extension.insertFigure"
],
"main": "./extension.js",
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
},
{
"command": "extension.insertLink",
"title": "Insert Markdown Link to File or Image"
},
{
"command": "extension.insertFigure",
"title": "Insert HTML figure"
}
],
"keybindings": [
{
"command": "extension.insertLink",
"key": "ctrl+alt+l",
"mac": "shift+cmd+f"
},
{
"command": "extension.insertFigure",
"key": "ctrl+alt+F",
"mac": "shift+cmd+l"
}
]
},
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "node ./node_modules/vscode/bin/test"
},
"devDependencies": {
"typescript": "^3.1.4",
"vscode": "^1.1.25",
"eslint": "^4.11.0",
"#types/node": "^8.10.25",
"#types/mocha": "^2.2.42"
}
}
If you open your extension's information window, you might see a Contributions tab, and in there you might see a Commands list.
From there you can find the command that you want and bind to it in your keybindings.json file or File -> Preferences -> Keyboard Shortcuts
[
{
"key": "ctrl+enter",
"command": "command.execute",
"when": "editorTextFocus"
}
]

POST requests not working on IOS in Ionic2 App

I'm having an issue with HTTP requests. Everything is working fine in Ionic View, browser and Android, but not working on IOS. GET requests are working fine on IOS also. Any guesses, what can that be?
I can provide you with more information, just tell me what info do you need. Here's what I have in my package.json:
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/cloud-angular": "0.7.0",
"#ionic/storage": "1.1.7",
"#types/moment-timezone": "0.2.32",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"moment": "2.15.1",
"moment-timezone": "0.5.7",
"ng2-translate": "5.0.0",
"rxjs": "^5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "^1.0.0",
"sw-toolbox": "^3.4.0",
"typescript": "2.0.9"
},
The backend receives blank body of a post request. Here's what I get back:
ERROR: {"_body":"{\"error\":\"Sign up error\",\"message\":{\"first_name\":[\"First Name cannot be blank.\"],\"last_name\":[\"Last Name cannot be blank.\"],\"email\":[\"Email cannot be blank.\"],\"device_id\":[\"Device Id cannot be blank.\"]}}","status":422,"ok":false,"statusText":"Bad Request","headers":{"Content-Type":["application/json; charset=UTF-8"],"Pragma":["no-cache"]},"type":2,"url":"http://app.EDITED"}
Feel free to ask anything and thank you for your help!
UPDATE: We moved our backend to HTTPS and now everything is working fine :)
The official answer seems to be here:
https://techcrunch.com/2016/06/14/apple-will-require-https-connections-for-ios-apps-by-the-end-of-2016/
Apple simply decided to enforce the use of HTTPS. I suspect Cordova / Ionic are simply not handling this well at the moment (aka no error is thrown, it's not documented etc.)
Keep in mind that the safari inspector will show that data is being sent to the server - that is not correct all data sent is removed (entire body) in the iOS app (I lost a day on this).
As Dmytro Garastovych mentioned, the correct (and only) solution is to move to HTTPS

Resources