iPhone网络应用在主屏上的持久性

I have created a webapp that can be saved to the "Home Screen" on the iPhone. The app uses a canvas and is fairly interactive with changing state.

我创建了一个webapp，可以保存到iPhone的“主屏”上。该应用程序使用画布，并且与不断变化的状态具有相当的交互性。

Whenever the app is minimised and re-opened it resets back to the initial state. The same (as expected) occurs when closing the app and reloading it.

当应用程序最小化并重新打开时，它会重新回到初始状态。在关闭应用程序并重新加载应用程序时，也会发生相同的情况。

1. How can I prevent the app from being reloaded when it is merely minimised?

   当应用程序仅仅被最小化时，如何防止它被重新加载?

2. What is the best way to persist state data so that when the app is closed and re-opened it continues seamlessly?

   保持状态数据的最佳方式是什么，以便当应用程序关闭并重新打开时，它能够无缝地继续运行?

3. What events would I need to use to ensure that state data is not lost?

   我需要使用什么事件来确保状态数据不会丢失?

If possible a cross platform solution would be preferred iPhone + Android...

如果可能的话，一个跨平台的解决方案应该是iPhone + Android……

4 个解决方案

#1

TL;DR You'll need to design your application to use local storage or cookies or some other mechanism with which you can preserve state. It will need to look at this local storage and rebuilt it's interface every time it is launched. Using local storage or webdb (depreciated but supported), you'll need to save every state change and make sure you reload them when your page loads in the browser.

您需要设计应用程序来使用本地存储或cookie或其他可以保存状态的机制。它将需要查看这个本地存储并在每次启动时重新构建它的接口。使用本地存储或webdb(折旧但支持)，您需要保存每个状态更改，并确保在页面加载到浏览器时重新加载它们。

1. Define minimized? Running in the background?

   定义最小?在后台运行?

   Your webapp, regardless of it's status on the homescreen, is merely another page loaded into the browser. Due to a) the lack of memory on the device and b) how multitasking works, applications can be asked by the operating system to free up memory or even to terminate themselves at anytime.

   不管你的webapp在home creen上的状态如何，它只是加载到浏览器中的另一个页面。由于a)设备上的内存不足以及b)多任务处理如何工作，操作系统可以要求应用程序释放内存，甚至在任何时候终止自己。

   This is why when you're building an iOS app you have:

   这就是为什么当你在构建一个iOS应用程序时:

   - (void)applicationWillTerminate:(UIApplication *)application

   -(void)applicationWillTerminate:UIApplication(*)应用程序

   This method allows you, as the developer, to specify a behavior to use (such as saving user data) before your application terminates when it receives the terminate signal from the OS. This is also why the iOS developer guides ask you to retain state and always make sure that your state is restored when an app is brought to the foreground. (Users may not know an app has terminated as it still will appear in the "running applications" list when you double-click the home).

   作为开发人员，此方法允许您在应用程序收到来自OS的终止信号之前指定要使用的行为(例如保存用户数据)。这也是为什么iOS开发者指南要求你保留状态，并确保当应用程序被应用到前台时，你的状态会被恢复。(用户可能不知道某个应用程序已经终止，因为当你双击home时，它仍然会出现在“运行中的应用程序”列表中)。

   Now I understand you're talking about a web app, but this is important. Web pages, and I'm sure yours as well, take up some memory in the phone -- you've got the DOM, all the resources, information about the state as to where the page is and what widgets are set to what. You say your app is fairly interactive using the canvas and stuff -- I'm sure it takes up a lot of memory.

   我知道你说的是网络应用，但这很重要。Web页面，我相信您的页面也会占用手机中的一些内存——您有DOM，所有资源，关于页面位置的状态信息，以及设置了哪些小部件的信息。你说你的应用程序使用画布之类的东西是相当互动的——我肯定它会占用很多内存。

   So when you put Safari in the background, Safari is most likely trashing your in-memory cache.

   所以当你把Safari放到后台时，Safari很可能会破坏你的内存缓存。

2. Safari has access to both local storage and cookie data. iOS5 also has access to WebSQL (but no IndexedDB which is sad because WebSQL is depreciated). Choose your poison.

   Safari可以访问本地存储和cookie数据。iOS5也可以访问WebSQL(但是没有IndexedDB，因为WebSQL是贬值的)。选择你的毒药。

3. You'll need to always save state. Since you don't have access to the UIApplicationDelegate methods via JS, every time the user does something, you'll need to save that state change. And every time your page is reloaded, it needs to check for a persistant state and reload from the storage option which you've chosen.

   你需要一直保存状态。由于您无法通过JS访问UIApplicationDelegate方法，所以每次用户做一些事情时，您都需要保存状态更改。而且每次重新加载页面时，它都需要检查是否有持久化状态，并从您所选择的存储选项中重新加载。

#2

If you save the current state using the localStorage API and restore from this API on load, you should be able to recreate the application state.

如果您使用localStorage API保存当前状态并在加载时从该API恢复，您应该能够重新创建应用程序状态。

I recommend this page for an overview of the local storage API: http://diveintohtml5.info/storage.html

我推荐此页面以获得本地存储API的概述:http://diveintohtml5.info/storage.html

I'm afraid you will have trouble preventing the application/webpage in memory when it is in the background, but continuously storing state to localStorage and recover state when the pages is loaded (window.onload or $(document).ready()) would be a solution.

我担心当应用程序/网页在后台时，您会在内存中遇到问题，但是在页面加载时，会不断地将状态存储到localStorage并恢复状态(窗口)。onload或$(document).ready()是一种解决方案。

#3

1. I do not think you can
2. 我认为你做不到
3. WebKit supports HTML5 Client-Side data storage, which you could use
4. WebKit支持HTML5客户端数据存储，您可以使用它
5. I do not know about any way your webApp would get notified on closing, so you should try to save the current state after each step in your navigation etc (Background behavior for iOS Web App (so app doesn't restart)).
6. 我不知道你的webApp会以什么方式在关闭时被通知，所以你应该尝试在导航的每一步之后保存当前状态等等(iOS Web App的后台行为，所以App不会重新启动)。

#4

If your app is only using canvas for render, then you could bind a function to the window.unload or pagehide event that whenever the page is unloaded the function captures the pixel data of the canvas using

如果您的应用程序只使用canvas渲染，那么您可以将函数绑定到窗口。卸载或pagehide事件，每当卸载页面时，函数将使用该函数捕获画布的像素数据

ctx.getImageData()

• and stores that in localstorage, then when the page is reloaded you can push that data directly to the canvas for near instant reload and put a spinner ontop while you load the real application behind it.
• 并将其存储在localstorage中，然后当页面重新加载时，您可以将数据直接推到画布上进行几乎立即的重新加载，并在后面加载真正的应用程序时在其上放置一个spinner。