PWA (Progressive Web App) with WorkBox Support

I’m looking for guidance on this more than trying to report a bug or request a feature. We’ve built a PWA that uses WorkBox which handles the offline support.

import React from 'react';
// import { SafeAreaView, StyleSheet } from 'react-native';
import WebView from 'react-native-webview';

const App = () => (
    <WebView 
        source={{ uri: 'http://localhost:5000' }}
        contentInsetAdjustmentBehavior='automatic'
    />
);

export default App;

When using the code above if my localhost:5000 is running, we are golden. When the local servers is ended; on Chrome browser the site works with its offline support but ReactNative application produces an error (see below).

Are there any polyfills that could help with this, is this mainly a limitation to the WebView. It seems cache is supported by default, what is the expectation?

The main goal is to leverage our PWA and get it on the APP store we do want to introduce some push notifications for iOS as well.

[timothyfbowen]

I believe it would be helpful to keep this issue open as as far as I know it hasn’t been resolved yet. I believe this is an Apple SDK issue or I would try to submit a PR to fix it.

On Fri, Feb 28, 2020 at 7:09 PM github-actions[bot] < [e-mail]> wrote:

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-webview/issues/869?email_source=notifications&email_token=AADC5R57GSDEQ6WGV2ZOFM3RFBI4NA5CNFSM4IXFA6R2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENKTHSA#issuecomment-592786376, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADC5R5P5VDCZJIJQDZL43DRFBI4NANCNFSM4IXFA6RQ .

[kitolog]

Maybe, it’ll be helpful. So, on iOS 14+, wkwebiew has service workers and cache API To support Android and iOS, you need:

1. your website should be https
2. setup the cache and limitsNavigationsToAppBoundDomains props: <WebView .... cacheEnabled={true} cacheMode={isInternetReachable ? 'LOAD_DEFAULT' : 'LOAD_CACHE_ONLY'} limitsNavigationsToAppBoundDomains={true} ... />
3. in Xcode, Info.plist file, add: <key>WKAppBoundDomains</key> <array> <string>your-website.com</string> </array>
4. Implement the service worker, caching logic, etc.
5. Test on Android and iOS
6. Enjoy 😃