Merge pull request #278 from pybricks/dlech

add ready for offline message

src/components/SettingsDrawer.tsx

@@ -54,6 +54,7 @@ type StateProps = {
     updateAvailable: boolean;
     beforeInstallPrompt: BeforeInstallPromptEvent | null;
     promptingInstall: boolean;
+    readyForOfflineUse: boolean;
 };
 
 type DispatchProps = {
@@ -83,6 +84,7 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
             updateAvailable,
             beforeInstallPrompt,
             promptingInstall,
+            readyForOfflineUse,
             onClose,
             onShowDocsChanged,
             onDarkModeChanged,
@@ -226,7 +228,13 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                 <AboutDialog />
                             </ButtonGroup>
                         </FormGroup>
-                        <FormGroup label={i18n.translate(SettingsStringId.AppTitle)}>
+                        <FormGroup
+                            label={i18n.translate(SettingsStringId.AppTitle)}
+                            helperText={
+                                readyForOfflineUse &&
+                                i18n.translate(SettingsStringId.AppOfflineUseHelp)
+                            }
+                        >
                             <ButtonGroup
                                 minimal={true}
                                 vertical={true}
@@ -319,6 +327,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
     updateAvailable: state.app.updateAvailable,
     beforeInstallPrompt: state.app.beforeInstallPrompt,
     promptingInstall: state.app.promptingInstall,
+    readyForOfflineUse: state.app.readyForOfflineUse,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({

src/components/settings-i18n.en.json

@@ -39,6 +39,7 @@
         },
         "app": {
             "title": "App",
+            "offlineUseHelp": "Ready for offline use.",
             "install": {
                 "label": "Install as App"
             },

src/components/settings-i18n.ts

@@ -20,6 +20,7 @@ export enum SettingsStringId {
     HelpChatLabel = 'settings.help.chat.label',
     HelpBugsLabel = 'settings.help.bugs.label',
     AppTitle = 'settings.app.title',
+    AppOfflineUseHelp = 'settings.app.offlineUseHelp',
     AppInstallLabel = 'settings.app.install.label',
     AppCheckForUpdateLabel = 'settings.app.checkForUpdate.label',
     AppRestartLabel = 'settings.app.restart.label',

src/reducers/app.ts

@@ -18,6 +18,7 @@ export interface AppState {
     readonly updateAvailable: boolean;
     readonly beforeInstallPrompt: BeforeInstallPromptEvent;
     readonly promptingInstall: boolean;
+    readonly readyForOfflineUse: boolean;
 }
 
 const showSettings: Reducer<boolean, Action> = (state = false, action) => {
@@ -116,6 +117,15 @@ const promptingInstall: Reducer<boolean, Action> = (state = false, action) => {
     }
 };
 
+const readyForOfflineUse: Reducer<boolean, Action> = (state = false, action) => {
+    switch (action.type) {
+        case ServiceWorkerActionType.DidSucceed:
+            return true;
+        default:
+            return state;
+    }
+};
+
 export default combineReducers({
     showSettings,
     showAboutDialog,
@@ -125,4 +135,5 @@ export default combineReducers({
     updateAvailable,
     beforeInstallPrompt,
     promptingInstall,
+    readyForOfflineUse,
 });