Skip to content

GitLab

T
tangled
Commit 21f2a773 authored by Margaret Mary Kearney's avatar Margaret Mary Kearney Committed by Anthony LaForge
Browse files
Options

Updating the Chrome Apps migration guide 

The new version has information about progressive web apps.
It also has details about migrating specific APIs.

Change-Id: I8ee02283cd8fcc859bce221a53c408aac0596e52
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1935235Reviewed-by: default avatarMeggin Kearney <mkearney@chromium.org>
Reviewed-by: default avatarAnthony LaForge <laforge@chromium.org>
Auto-Submit: Meggin Kearney <mkearney@chromium.org>
Commit-Queue: Anthony LaForge <laforge@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720639}
parent 7b934485
Show whitespace changes
Inline Side-by-side
Showing with 640 additions and 231 deletions
chrome/common/extensions/docs/templates/articles/migration.html
View file @ 21f2a773
<h1>Transitioning from Chrome apps on Windows, Mac, and Linux</h1> <h1>Transitioning from Chrome Apps</h1>
<p>Chrome packaged and hosted apps will be discontinued on Windows, Mac, <p>To transition away from a Chrome packaged or hosted app, the following
and Linux over the course of now and early 2018. options are available.</p>
For more information, refer to the August 2016
<a href="https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html">Chromium blog post</a>. <h2 id="chrome-packaged-apps">Chrome packaged apps</h2>
This transition does not apply to Chrome OS,
where Chrome packaged and hosted apps will remain supported and maintained for the foreseeable future.</p> <p>Recommended migration options for packaged apps are listed in order from
simplest to most complicated.</p>
<p>To transition away from a Chrome packaged or hosted app on Windows, Mac, and Linux,
the following options are available. <p> <h3 id="build-pwa">Build a Progressive Web App</h3>
<h2 id="apps">Chrome packaged apps</h2> <p>Building a <a
href="https://developers.google.com/web/progressive-web-apps/">Progressive Web
<p>Recommended migration options for packaged apps are listed App</a> (PWA) is the ideal way to reach users across all operating systems.<br>
in order from simplest to most complicated.</p> As part of our <a
href="https://developers.google.com/web/updates/capabilities">Web
<h3 id="build-app">Build a web app</h3> Capabilities</a> (codename: <a
href="https://www.chromium.org/teams/web-capabilities-fugu">Fugu</a>)
<p>Building a web app on top of the web platform is the ideal way efforts, we are investigating ways to improve the migration path to the web for
to reach users across platforms.</p> developers that depend on exclusive Chrome App APIs—in particular the Sockets,
HID, File System, and Serial APIs. If there are web platform features you need
<p>We are investigating ways to improve the migration path to the web for developers that depend on exclusive Chrome App APIs that are <a href="https://caniuse.com/">only available in select
- in particular the Sockets, HID, fileSystem and Serial APIs. browsers</a>, you can use feature detection to gracefully degrade or include
If there are web platform features you need that are only available in select browsers, explanatory text when your app is run in a browser that doesn't support a
you can use feature detection to gracefully degrade or include explanatory text particular API. If there are gaps in the web platform for your application,
when your app is run in a browser that doesn’t support a particular API. please <strong><a
If there are gaps in the web platform for your application, please href="https://bugs.chromium.org/p/chromium/issues/entry?summary=Fugu+Request:++Add+your+feature+title&comment&labels=Type-Feature,Pri-3,Proj-Fugu">let
<a href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLSenHdpA8_eqKiVOrWDjWe_KTfJmoSBEqFIh6SMwQ-NRDJnx1Q/viewform?c=0&w=1">let us know</a>.<p/> us know</strong></a>.
</p>
<p>An experimental tool that can help migrate simple Chrome Apps to
<a href="https://developers.google.com/web/progressive-web-apps/">Progressive Web Apps</a> <p>
is <a href="https://github.com/chromium/caterpillar">Caterpillar</a>. PWAs are installable on both <a
This tool can insert JavaScript to substitute Chrome Apps APIs you might be using. href="https://developers.google.com/web/progressive-web-apps/desktop">desktop</a>
It is currently limited to handling only certain types of apps. and <a
In particular, href="https://developers.google.com/web/fundamentals/app-install-banners/">mobile</a>
apps that contain processing in background pages will not be converted.</p> platforms. Users who choose to install your PWA can launch it via icons and
shortcuts, similar to the way that Chrome Apps can be installed today.</p>
<p>In the future, </p>
Progressive Web Apps (PWAs) will become installable on desktop platforms.
Users will be able to install web apps to the desktop <h3 id="build-extension-web-page">Build an extension-enhanced web page</h3>
and launch them via icons and shortcuts,
similar to the way that Chrome Apps can be installed today. <p>If there is a capability that your Chrome App has that the regular web
This functionality is expected to launch sometime during 2018.</p> platform can't provide, it might be available as an <strong><a
href="https://developer.chrome.com/extensions/api_index">extension
API</strong></a>. In this case, you use a <strong><a
<h3 id="extension-web-page">Build an extension-enhanced web page</h3> href="https://developer.chrome.com/extensions/messaging#external-webpage">progressive
web app together with an externally connectable extension your web app can send
<p>If there is a capability that your Chrome App has messages to</strong></a>. Building a web app is typically preferable to
that the regular web platform can’t provide, it might be available as an this, because this approach forces users to install an extension that is only
<a href="https://developer.chrome.com/extensions/api_index">extension API</a>. useful on your site and can cause increased friction.
In this case, you can continue using a </p>
<a href="https://developer.chrome.com/extensions/messaging#external-webpage">regular web app together with an externally connectable extension your web app can send messages to</a>.
Building a web app is typically preferable to this, <p>
because this approach forces users to install an extension As Chrome extensions can't be run on other browsers, you should detect when
that is only useful on your site and can cause increased friction.</p> required functionality isn't available and provide explanatory text for users on
these other browsers.
<p>As Chrome extensions can’t be run on other browsers, </p>
you should detect when required functionality isn’t available and
provide explanatory text for users on these other browsers.</p> <h3 id="build-extension">Build an extension</h3>
<h3 id="extension">Build an extension</h3> <p>Depending on the user experience you want to provide, it might make sense to
convert your entire app into an extension. For example you could provide a
<p>Depending on the user experience you want to provide, <strong><a
it might make sense to convert your app over to an extension. href="https://developer.chrome.com/extensions/browserAction">browser
For example you could provide a action</strong></a> button which shows a small popup window for your user
<a href="https://developer.chrome.com/extensions/browserAction">browser action</a> interface, or navigates to a page your extension provides. For some apps, this
button which shows a small popup window for your user interface, might be a good enough user experience to be a viable solution.
or navigates to a page your extension provides. </p>
For some apps,
this might be a good enough user experience to be a viable solution.</p> <p>
Note there are significant costs to this approach. <a
<p>Note there are significant costs to this approach. href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">While
Users that do not use Chrome will not be supported, some browsers</a> support the same extensions API as Chrome, this support is
and there will be significant friction for your users to install your extension.</p> not universal. This can significant friction for your users who would prefer a
cross-browser alternative.</p>
<h2 id="app-faqs">FAQs</h2>
<h3 id="build-chromeos-android">Build for Chrome OS via Android</h3>
<h3 id="users"><strong>Q: My Chrome App has many users.
What’s the best way to migrate them to my new web app and <p>If you are an Android developer interested in building for Chrome OS, you can
deprecate my Chrome App?</strong></h3> optimize your Android application for a better experience.</p>
<p>You will still be able to publish updates to your Chrome App <p>Chrome App API/Capability migration recommendations (current as of Nov.
until the runtime is removed in early 2018. 2019):</p>
We recommend updating your app to include a message indicating
that your app has been discontinued, <table>
and that users should visit your website going forward (see example below). <thead>
You can also include an “uninstall” button that calls the <tr>
<a href="https://developer.chrome.com/extensions/management#method-uninstallSelf">uninstallSelf function</a>.</p> <th><strong>Chrome App feature/functionality</strong></th>
<th><strong>Web platform migration recommendations</strong></th>
<img src="{{static}}/images/photo.png" width="598" height="468" alt="Uninstall message."/> <th><strong>Android migration recommendations</strong></th>
<th><strong>Extension migration recommendations</strong></th>
<h3 id="launcher"><strong>Q: I want to continue to have a UI affordance </tr>
that enables users to launch my app from the taskbar/dock/app shelf. </thead>
What should I do?</strong></h3> <tbody>
<tr>
<p>This is still possible with web apps, but it is up to the user. <td><a href="https://developer.chrome.com/apps/accessibilityFeatures">chrome.accessibilityFeatures</a></td>
On all desktop platforms except Mac, users can <td></td>
<a href="https://support.google.com/chrome_webstore/answer/3060053?hl=en">add ‘bookmark apps’ to their shelf / desktop</a>, <td></td>
which optionally run your web app in its own window.</p> <td><a href="https://developer.chrome.com/extensions/accessibilityFeatures">chrome.accessibilityFeatures</a></td>
</tr>
<p>In the future, <tr>
Progressive Web Apps (PWAs) will become installable on desktop platforms. <td><a href="https://developer.chrome.com/apps/alarms">chrome.alarms</a></td>
Users will be able to install web apps to the desktop and launch them via icons and shortcuts, similar to the way that Chrome Apps can be installed today. <td><a href="http://crbug.com/891339">Notification Triggers</a></td>
This functionality is expected to launch sometime during 2018.</p> <td><a href="https://developer.android.com/topic/libraries/architecture/workmanager">WorkManager</a></td>
<td><a href="https://developer.chrome.com/extensions/alarms">chrome.alarms</a></td>
<h3 id="window"><strong>Q: I want my app to run in its own window, not in a tab. </tr>
Is this something I can do with a web app?</strong></h3> <tr>
<td><a href="https://developer.chrome.com/apps/app_runtime">chrome.app.runtime</a></td>
<p>Yes, but it is up to the user. On desktop platforms other than OS X, <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=844279">Launch
users can add ‘bookmark apps’ to their shelf / desktop, Event</a></td>
which optionally run your web app in its own window.</p> <td><a href="https://developer.android.com/guide/components/activities/activity-lifecycle">Activity
Lifecycle</a></td>
<h3 id="shortcuts"><strong>Q: My app supports keyboard shortcuts. <td></td>
Can the web support this also?</strong></h3> </tr>
<tr>
<p>Web apps can support keyboard shortcuts by listening to the various key events <td><a href="https://developer.chrome.com/apps/app_runtime#event-onRestarted">chrome.app.runtime.onRestarted</a></td>
(e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/Events/keydown">keydown</a>), <td><a href="https://developers.google.com/web/updates/2018/07/page-lifecycle-api">Page Life Cycle</a></td>
but the shortcuts you can support are limited. For example, <td><a href="https://developer.android.com/guide/components/activities/activity-lifecycle#onresume">Activity.onResume</a></td>
you cannot intercept Ctrl+N, Ctrl+T etc. as these are used by the browser. <td></td>
Or, these might be shortcuts that are handled by the operating system </tr>
(e.g. Alt+Tab on Windows).</p> <tr>
<td><a href="https://developer.chrome.com/apps/app_window">chrome.app.window</a></td>
<p>Work <a href="https://github.com/jondahlke/system-keyboard-lock/">has begun</a> <td><a href="https://crbug.com/897300">Window Placement / Screen Enumeration</a></td>
to allow developers to intercept these additional shortcuts on the web, <td></td>
but this is not yet ready for use.</p> <td><a href="https://developer.chrome.com/extensions/windows">chrome.windows</a></td>
</tr>
<p>The <a href="https://developer.chrome.com/extensions/commands">Extension Commands API</a> <tr>
supports richer keyboard shortcuts which operate across the entire browser, <td><a href="https://developer.chrome.com/apps/audio">chrome.audio</a></td>
which may enable new capabilities if transitioning to an extension is possible.</p> <td><a href="http://crbug.com/897326">Audio Device Client</a></td>
<td><a href="https://developer.android.com/guide/topics/media/mediaplayer">Some
<h3 id="offline"><strong>Q: My app needs to run when the user is offline. Audio APIs</a></td>
Can I do that with a web app?</strong></h3> <td></td>
</tr>
<p>Yes, <tr>
you can <a href="https://developers.google.com/web/fundamentals/getting-started/your-first-offline-web-app/">use service workers to make your site run offline</a>.</p> <td><a href="https://developer.chrome.com/apps/app_bluetooth">chrome.bluetooth</a></td>
<td><a href="https://www.chromestatus.com/feature/5264933985976320">Web Bluetooth API</a></td>
<h3 id="gcm"><strong>Q: My app uses the chrome.gcm API to receive push messages <td><a href="https://developer.android.com/guide/topics/connectivity/bluetooth">Bluetooth API</a></td>
from the cloud. Can the open web do that?</strong></h3> <td></td>
</tr>
<p>Yes, the <tr>
<a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Push API and Notifications API</a> <td><a href="https://developer.chrome.com/apps/bluetoothLowEnergy">chrome.bluetoothLowEnergy</a></td>
provide the ability to show your user push notifications even when the page is closed.</p> <td><a href="https://www.chromestatus.com/feature/5264933985976320">Web Bluetooth API</a></td>
<td><a href="https://developer.android.com/guide/topics/connectivity/bluetooth-le">BTLE</a></td>
<h3 id="show"><strong>Q: My app needs to be able to show notifications <td></td>
to the user even when it has no windows open. Can I do that with the open web?</strong></h3> </tr>
<tr>
<td><a href="https://developer.chrome.com/apps/bluetoothSocket">chrome.bluetoothSocket</a></td>
<td><a href="https://www.chromestatus.com/feature/5264933985976320">Web Bluetooth API</a></td>
<td><a href="https://developer.android.com/reference/android/bluetooth/BluetoothSocket">Bluetooth Socket</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/browser">chrome.browser</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open">window.open</a></td>
<td><a href="https://developer.android.com/reference/android/content/Intent">Intent
system</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/commands">chrome.commands</a></td>
<td><a href="https://w3c.github.io/uievents/">UI Events</a></td>
<td><a href="https://developer.android.com/training/keyboard-input/commands">Hard-code
keyboard commands</a></td>
<td><a href="https://developer.chrome.com/extensions/commands">chrome.commands</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/contextMenus">chrome.contextMenus</a></td>
<td>(HTML/script)</td>
<td><a href="https://developer.android.com/reference/android/view/ContextMenu">Native,
Android has its own contextmenus</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/documentScan">chrome.documentScan</a></td>
<td></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/documentScan">chrome.documentScan</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/events">chrome.events</a></td>
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=891339">Alarms</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/events">chrome.events</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/extensionTypes">chrome.extensionTypes</a></td>
<td></td>
<td>N/A</td>
<td><a href="https://developer.chrome.com/extensions/extensionTypes">chrome.extensionTypes</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/fileSystem">chrome.fileSystem</a></td>
<td><a href="http://crbug.com/853326">Native FileSystem API</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/fileSystemProvider">chrome.fileSystemProvider</a></td>
<td></td>
<td><a href="https://developer.android.com/reference/java/nio/file/spi/FileSystemProvider.html">FileSystemProvider</a></td>
<td><a href="https://developer.chrome.com/extensions/fileSystemProvider">chrome.fileSystemProvider</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/gcm">chrome.gcm</a></td>
<td><a href="https://developers.google.com/web/fundamentals/push-notifications/">Web
Push Notifications</a></td>
<td>N/A</td>
<td><a href="https://developer.chrome.com/extensions/gcm">chrome.gcm</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/hid">chrome.hid</a></td>
<td><a href="https://www.chromestatus.com/feature/5172464636133376">Web HID API</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/i18n">chrome.i18n</a></td>
<td>(HTML/script)</td>
<td><a href="https://developer.android.com/guide/topics/resources/localization">Localization</a></td>
<td><a href="https://developer.chrome.com/extensions/i18n">chrome.i18n</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/identity">chrome.identity</a></td>
<td>OAuth API or <a href="https://www.chromestatus.com/feature/5669923372138496">Credential Management API</a></td>
<td><a href="https://developer.android.com/training/id-auth/authenticate">Native</a></td>
<td><a href="https://developer.chrome.com/extensions/identity">chrome.identity</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/idle">chrome.idle</a></td>
<td><a href="http://crbug.com/878979">User Idle Detection API</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/idle">chrome.idle</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/instanceID">chrome.instanceID</a></td>
<td><a href="https://developers.google.com/web/fundamentals/push-notifications/">Web
push</a></td>
<td>Per-App ID needs to be self-generated</td>
<td><a href="https://developer.chrome.com/extensions/instanceID">chrome.instanceID</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/mdns">chrome.mdns</a></td>
<td></td>
<td><a href="https://developer.android.com/training/connect-devices-wirelessly/nsd">NDS
discovery</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/mediaGalleries">chrome.mediaGalleries</a></td>
<td><a href="http://crbug.com/853326">Native FileSystem API</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/networking_onc">chrome.networking.onc</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/notifications">chrome.notifications</a></td>
<td><a href="https://www.chromestatus.com/feature/5064350557536256">Notifications API</a></td>
<td>Notifications show in lower right of CrOS as system level notifications</td>
<td><a href="https://developer.chrome.com/extensions/notifications">chrome.notifications</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/permissions">chrome.permissions</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API">Web
Permissions API</a></td>
<td>N/A</td>
<td><a href="https://developer.chrome.com/extensions/permissions">chrome.permissions</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/power">chrome.power</a></td>
<td><a href="https://www.chromestatus.com/feature/4636879949398016">WakeLock API</a></td>
<td><a href="http://b/133417350">In discussion</a></td>
<td><a href="https://developer.chrome.com/extensions/power">chrome.power</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/printerProvider">chrome.printerProvider</a></td>
<td><a href="https://developer.chrome.com/extensions/printerProvider">Transition to Extension</a></td>
<td><a href="https://developer.android.com/reference/android/printservice/package-summary">android.printservice</a></td>
<td><a href="https://developer.chrome.com/extensions/printerProvider">chrome.printerProvider</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/runtime">chrome.runtime</a></td>
<td><a href="https://developers.google.com/web/updates/2018/07/page-lifecycle-api">Service Workers + Page Lifecycle API</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/runtime">chrome.runtime</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/messaging#connect">chrome.runtime.connect</a></td>
<td><a href="https://www.chromestatus.com/feature/6710044586409984">Channel Messaging API</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/runtime#method-connect">chrome.runtime.connect</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/messaging#simple">chrome.runtime.sendMessage</a></td>
<td></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/runtime#method-sendMessage">chrome.runtime.sendMessage</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/app_serial">chrome.serial</a></td>
<td><a href="https://www.chromestatus.com/feature/6577673212002304">Web Serial API</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/app_network">chrome.sockets.tcp</a></td>
<td><a href="https://w3c.github.io/webrtc-quic/cs.html">QuicTransport C/S (or WebSockets)</a></td>
<td><a href="https://developer.android.com/reference/java/net/Socket">android.net.ConnectivityManager and Java standard socket API</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/sockets_tcpServer">chrome.sockets.tcpServer</a></td>
<td></td>
<td><a href="https://developer.android.com/reference/java/net/Socket">android.net.ConnectivityManager and Java standard socket API</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/sockets_udp">chrome.sockets.udp</a></td>
<td><a href="https://w3c.github.io/webrtc-quic/cs.html">QuicTransport C/S</a></td>
<td><a href="https://developer.android.com/reference/java/net/DatagramSocket">DatagramSocket API for UDP</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/storage">chrome.storage</a></td>
<td>Cache API:<a href="https://www.chromestatus.com/feature/5072127703121920" >https://www.chromestatus.com/feature/5072127703121920</a></a><br>
IndexedDB:<a href="https://www.chromestatus.com/feature/6507459568992256">https://www.chromestatus.com/feature/6507459568992256</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/storage">chrome.storage</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/extensions/manifest/storage">chrome.storage.managed</a></td>
<td></td>
<td><a href="https://developer.android.com/work/managed-configurations">Managed
Configurations</a></td>
<td><a href="https://developer.chrome.com/extensions/storage#property-managed">chrome.storage.managed</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/syncFileSystem">chrome.syncFileSystem</a></td>
<td></td>
<td><a href="https://developers.google.com/drive/api/v3/quickstart/java">Java - Drive REST API</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developers.chrome.com/apps/system.cpu">chrome.system.cpu</a></td>
<td><a href="https://www.chromestatus.com/feature/6248386202173440">navigator.hardwareConcurrency</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/system_cpu">chrome.system.cpu</a></td>
</tr>
<tr>
<td><a href="https://developers.chrome.com/apps/system.display">chrome.system.display</a></td>
<td><a href="https://drafts.csswg.org/cssom-view/#the-screen-interface">window.screen</a></td>
<td><a href="https://developer.android.com/reference/android/util/DisplayMetrics">DisplayMetrics, but high density displays are wonky</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developers.chrome.com/apps/system.memory">chrome.system.memory</a></td>
<td><a href="https://www.chromestatus.com/feature/5119701235531776">navigator.deviceMemory</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/system_memory">chrome.system.memory</a></td>
</tr>
<tr>
<td><a href="https://developers.chrome.com/apps/system.network">chrome.system.network</a></td>
<td><a href="https://www.chromestatus.com/feature/6338383617982464">Network Information API</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developers.chrome.com/apps/system.storage">chrome.system.storage</a></td>
<td><a href="https://www.chromestatus.com/feature/5630353511284736">navigator.storage</a></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/system_storage">chrome.system.storage</a></td>
</tr>
<tr>
<td><a href="https://developers.chrome.com/apps/tts">chrome.tts</a></td>
<td><a href="https://www.chromestatus.com/feature/4782875580825600">Web
Speech API (Synthesis)</a></td>
<td><a href="https://android-developers.googleblog.com/2009/09/introduction-to-text-to-speech-in.html">Android TTS 2009</a></td>
<td><a href="https://developer.chrome.com/extensions/tts">chrome.tts</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/types">chrome.types</a></td>
<td></td>
<td></td>
<td><a href="https://developer.chrome.com/extensions/types">chrome.types</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/app_usb">chrome.usb</a></td>
<td><a href="https://www.chromestatus.com/feature/5651917954875392">Web USB API</a></td>
<td><a href="http://go/arc++usb">Temporary* private USB host API</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/virtualKeyboard">chrome.virtualKeyboard</a></td>
<td></td>
<td><a href="https://developer.android.com/training/keyboard-input">Soft Input Method</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/vpnProvider">chrome.vpnProvider</a></td>
<td></td>
<td><a href="https://developer.android.com/reference/android/net/VpnService">VpnService</a></td>
<td><a href="https://developer.chrome.com/extensions/vpnProvider">chrome.vpnProvider</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/wallpaper">chrome.wallpaper</a></td>
<td></td>
<td><a href="https://developer.android.com/reference/android/app/WallpaperManager">WallpaperManager</a></td>
<td><a href="https://developer.chrome.com/extensions/wallpaper">chrome.wallpaper</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/manifest/externally_connectable">externally_connectable</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/manifest/kiosk_enabled">kiosk_enabled</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/manifest/minimum_chrome_version">minimum_chrome_version</a></td>
<td></td>
<td>Target Android version</td>
<td><a href="https://developer.chrome.com/apps/manifest/minimum_chrome_version">minimum_chrome_version</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/offline_apps">offline_enabled</a></td>
<td><a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Offline
via Service Workers</a></td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/native-client">NaCl</a></td>
<td><a href="https://developer.chrome.com/native-client/migration">Migration Guide</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/apps/tags/webview">&lt;webview&gt; tag</a></td>
<td>Native</td>
<td><a href="https://developer.android.com/reference/android/webkit/WebView">WebView</a></td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="faqs">FAQs</h2>
<h3 id="use-case-requirements">Q: What if the Chrome App migration recommendations do not meet my use case requirements?</h3>
<p>We'd like your feedback! Please fill out
<a href="https://forms.gle/cNiZJbSutFbnFUdv8">this form</a> with as much detail as possible.</p>
<h3 id="best-migration-path">Q: My Chrome App has many users. What's the best way to migrate them to my new web app and deprecate my Chrome App?</h3>
<p>You will still be able to publish updates to your Chrome App until the
runtime is removed. We recommend updating your app to include a message
indicating that your app has been discontinued, and that users should visit your
website going forward (see example below). You can also include an "uninstall"
button that calls the
<code><a href="https://developer.chrome.com/extensions/management#method-uninstallSelf">uninstallSelf()</code></a>
method.
</p>
<p>
Starting with Chrome 75,
the
<code><a href="https://developer.chrome.com/extensions/management#method-installReplacementWebApp">installReplacementWebApp()</code></a>
method can be used inside of a Chrome App, in response to a button click or
other user gesture, to automatically trigger the installation flow for your
replacement PWA.
</p>
<p><img src="{{static}}/images/photo.png" width="598" height="468" alt="Shows button that can link to install PWA" /></p>
<h3 id="app-launcher">Q: I want to continue to have a UI affordance that enables users to launch my app from the taskbar/dock/homescreen. What should I do?</h3>
<p>
<a href="https://developers.google.com/web/progressive-web-apps/">Progressive Web
Apps</a>
are installable on both
<a href="https://developers.google.com/web/progressive-web-apps/desktop">desktop</a>
and
<a href="https://developers.google.com/web/fundamentals/app-install-banners/">mobile</a>
platforms. Users who choose to install your PWA can launch it via icons and
shortcuts, similar to the way that Chrome Apps can be installed today.</p>
<h3 id="run-in-window">Q: I want my app to run in its own window, not in a tab. Is this something I can do with a web app?</h3>
<p>You can provide
<a href="https://developers.google.com/web/fundamentals/web-app-manifest/#display">metadata</a>
in your Progressive Web App's
<a href="https://developers.google.com/web/fundamentals/web-app-manifest/">manifest
file</a>
indicating that, when launched after installation, it will open in
its own window.</p>
<h3 id="keyboard-shortcuts">Q: My app supports keyboard shortcuts. Can the web support this also?</h3>
<p>Web apps can support keyboard shortcuts by listening to the various key events (e.g.
<strong><a href="https://developer.mozilla.org/en-US/docs/Web/Events/keydown">keydown</strong></a>),
but the shortcuts you can support are limited. For example, you cannot intercept
Ctrl+N, Ctrl+T etc. as these are used by the browser. Or, these might be
shortcuts that are handled by the operating system (e.g. Alt+Tab on Windows).</p>
<p>
When your web app is used in
<a href="https://developers.google.com/web/fundamentals/web-app-manifest/#display">fullscreen</a>
mode, you are able to
<a href="https://chromestatus.com/feature/5642959835889664">intercept</a>
these system shortcuts.</p>
<p>
The
<strong><a href="https://developer.chrome.com/extensions/commands">Extension Commands
API</strong></a>
supports richer keyboard shortcuts which operate across the
entire browser, which may enable new capabilities if transitioning to an
extension is possible.</p>
<h3 id="offline-app">Q: My app needs to run when the user is offline. Can I do that with a web app?</h3>
<p>Yes, you can
<strong><a href="https://developers.google.com/web/ilt/pwa/introduction-to-service-worker">use service workers to make your site run offline</strong></a>.
The
<a href="https://developers.google.com/web/tools/workbox/">Workbox</a>
project can simplify developing a full-featured caching strategy for your service
worker.</p>
<h3 id="push-messages">Q: My app uses the chrome.gcm API to receive push messages from the cloud. Can the open web do that?</h3>
<p>Yes, assuming the user has granted permission, the
<strong><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Push
API and Notifications API</strong></a>
can allow your web app to show your user push notifications.</p>
<h3 id="show-notifications">Q: My app needs to be able to show notifications to the user even when it has no windows open. Can I do that with the open web?</h3>
<p>Yes, the <p>Yes, the
<a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Push API and Notifications API</a> provide this functionality.</p> <strong><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Push API and Notifications API</strong></a>
can allow your web app to show your user push notifications
even when your web app is closed,
as long as an instance of the browser is running.</p>
<h3 id="bluetooth"><strong>Q: My app uses chrome.bluetooth/chrome.usb <h3 id="bluetooth">Q: My app uses chrome.bluetooth/chrome.usb to talk to a Bluetooth/USB device. Can this be done on the open web?</h3>
to talk to a Bluetooth/USB device. Can this be done on the open web?</strong></h3>
<p>There are now proposals for new <p>Both
<a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web">Web Bluetooth</a> <a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web">Web Bluetooth</a>
and and
<a href="https://wicg.github.io/webusb/">WebUSB</a> standards, <a href="https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web">Web USB</a>
designed to allow this functionality. are available in certain browsers,
A subset of the Web Bluetooth API is now enabled in Chrome on Android, Chrome OS, and Mac.</p> and can be used (along with feature detection) in a Progressive Web App.</p>
<h3 id="filesystem"><strong>Q: My app uses the chrome.fileSystem API to read <h3 id="fileSystem">Q: My app uses the chrome.fileSystem API to read and write user-specified files and / or directories. Can this be done on the open web?</h3>
and write user-specified files and / or directories.
Can this be done on the open web?</strong></h3>
<p>In general, no. <p>The open web can read single files that the user opens, but cannot retain
The open web can read single files that the user opens, access to those files, write to those files, or have any access to directories.</p>
but cannot retain access to those files, write to those files,
or have any access to directories.</p>
<p>If it is critical for your app to read and write directories <p>
(e.g. it is a text editor with a folder view), There are plans to
you will need to either have a <a href="https://developers.google.com/web/updates/2018/11/writable-files">implement direct filesystem access</a>,
<a href="https://developer.chrome.com/extensions/nativeMessaging">native helper app and extension combo</a>, and an experimental implementation is available in Chrome,
or create a native app.</p> but that functionality has not yet been fully standardized.</p>
<h3 id="sockets"><strong>Q: My app uses the chrome sockets API to do networking. <h3 id="sockets">Q: My app uses the chrome sockets API to do networking. Can this be done with the open web?</h3>
Can this be done with the open web?</strong></h3>
<p>You might be able to do what you need with <p>You might be able to do what you need with
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</a>. <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</strong></a>.
However, to use this, you will likely need to change the remote end of your connection. However, to use this, you will likely need to change the remote end of your
If that isn’t possible connection.</p>
(e.g. you’re connecting over an established protocol like IRC or SSH),
you’ll need some sort of native component.</p> <p>
If that isn't possible, we'd like to hear more about your use case—please
let us know about what you're trying to accomplish
<a href="https://bit.ly/new-fugu-request">via the Chromium issue
tracker</a>.</p>
<h3 id="migration-resources">Q: What resources are available to help with a Progressive Web App migration?</h3>
<p>The Chrome team maintains the following sites and tools with information that
can help during your migration:</p>
<ul>
<li><a href="https://developers.google.com/web/updates/capabilities">Web Capabilities</a> overview</li>
<li><a href="https://developers.google.com/web/ilt/pwa/">Progressive Web Apps Training</a></li>
<li><a href="https://developers.google.com/web/tools/workbox/">Workbox</a>, for generating a service worker</li>
</ul>
<p>If you have a specific question not addressed via those resources,
we recommend asking a question on
<a href="https://stackoverflow.com/">Stack
Overflow</a>.
This
<a href="https://stackoverflow.com/questions/ask?tags=progressive-web-apps,google-chrome-app">template</a>
can be used to create a question tagged with both
<code><a href="https://stackoverflow.com/questions/tagged/google-chrome-app">google-chrome-app</code></a>
and
<code><a href="https://stackoverflow.com/questions/tagged/progressive-web-apps">progressive-web-apps</code></a>,
to ensure maximum visibility.</p>
<h3 id="missing-capability">Q: I'd like to use a capability not mentioned already that lacks a web alternative. How do I make a feature request?</h3>
<p>We'd like to hear more about what you're trying to accomplish— let us know
<a href="https://bit.ly/new-fugu-request">via the Chromium issue tracker</a>.</p>
<h2 id="hosted-apps">Chrome hosted apps</h2> <h2 id="hosted-apps">Chrome hosted apps</h2>
<h2 id="hosted-faqs">FAQs</h2> <h2 id="hosted-apps-faqs">FAQs</h2>
<h3 id="notifications"><strong>Q: My hosted app uses the notifications permission. <h3 id="hosted-apps-notifications-permission">Q: My hosted app uses the notifications permission. How do I do that on the web?</h3>
How do I do that on the web?</strong></h3>
<p>As of Chrome 42, you can send <p>Yes, assuming the user has granted permission,
<a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/?hl=en">push notifications via your web application</a>. the
Check out this <strong><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Push API and Notifications API</strong></a>
<a href="https://developers.google.com/web/fundamentals/getting-started/push-notifications/">codelab</a> can allow your web app to show your user push notifications.</p>
to get started.</p>
<h3 id="persistent"><strong>Q: My hosted app uses the unlimitedStorage permission. <h3 id="unlimitedStorage">Q: My hosted app uses the unlimitedStorage permission. How do I do that on the web?</h3>
How do I do that on the web? </strong></h3>
<p>The unlimitedStorage permission ensured that data you store was ‘Persistent’, <p>The unlimitedStorage permission ensured that data you store was ‘Persistent',
which means it can only be cleared manually by the user.</p> which means it can only be cleared manually by the user.</p>
<p>The recommended alternative is to use <p>
<a href="https://developers.google.com/web/updates/2016/06/persistent-storage?hl=en">Persistent Storage</a> The recommended alternative is to request
in your web app. <strong><a href="https://developers.google.com/web/updates/2016/06/persistent-storage?hl=en">Persistent Storage</strong></a>
As of Chrome 52, Persistent Storage is available as an permission within your web app.</p>
<a href="https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md#how-do-i-enable-an-experimental-feature-on-my-origin">Origin Trial</a>.
To use this API in Chrome Stable,
you will need to request a token and insert it in your web application.</p>
<h3 id="geolocation"><strong>Q: My hosted app uses the geolocation permission.
How do I do that on the web? </strong></h3>
<p>The <a href="https://dev.w3.org/geo/api/spec-source.html">HTML5 geolocation API</a> <h3 id="geolocation">Q: My hosted app uses the geolocation permission. How do I do that on the web?</h3>
can be used in web apps to locate a user’s position.</p>
<p>Note: As of Chrome 50, <p>The
the Geolocation API will only work on secure contexts such as HTTPS. <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API">Geolocation API</strong></a>
If your site is hosted on an non-secure origin (such as HTTP), can be used in web apps to locate a user's position.</p>
the requests to get the user’s location will no longer function.</p>
<h3 id="background"><strong>Q: My hosted app uses the background permission. <h3 id="background">Q: My hosted app uses the background permission. How do I do that on the web?</h3>
How do I do that on the web? </strong></h3>
<p>To ensure minimal power consumption we have been careful <p>To ensure minimal power consumption we have been careful about introducing a
about introducing a generic method for sites to run in the background generic method for sites to run in the background on user's devices.</p>
on user’s devices.</p>
<p>As of Chrome 49, <p>
sites can ensure actions taken by the user are synced to the server using the Sites that have deployed a
<a href="https://developers.google.com/web/updates/2015/12/background-sync?hl=en">Background Sync API</a>. <a href="https://developers.google.com/web/ilt/pwa/introduction-to-service-worker">service
worker</a>
can ensure actions taken by the user while offline are synced to the server using the
<strong><a href="https://developers.google.com/web/updates/2015/12/background-sync?hl=en">Background Sync API</strong></a>.
This API allows sites to run some limited code in the background This API allows sites to run some limited code in the background
when the device re-connects to the internet, when the device re-connects to the internet,
even if the tab has since been closed. even if the tab has since been closed.
Note that this API doesn’t allow for the service worker Note that this API doesn't allow for the service worker
to be woken up periodically.</p> to be woken up periodically.</p>
<p>In the future, <p>
we hope to introduce a quota-limited ability for sites to wake up their service worker A separate feature,
by sending a push message but without being required to show the user a notification. <a href="https://developers.google.com/web/updates/2019/08/periodic-background-sync">Periodic Background Sync</a>,
You can follow the progress of this work by starring is being implemented as an experimental feature in Chrome.
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=617971&desc=2">this issue</a> It allows developers to request periodic updates
in the Chromium Issues Tracker.</p> via a special event exposed on the service worker,
with controls over the frequency of those updates.</p>
<h3 id="clipboard-write"><strong>Q: My hosted app uses the clipboardWrite permission.
How do I do that on the web? </strong></h3> <h3 id="clipboard">Q: My hosted app uses the clipboardRead and/or clipboardWrite permission. How do I do that on the web?</h3>
<p>As of Chrome 43, <p>Web apps can use a standard platform API to copy and paste both
websites are now able to programmatically <a href="https://developers.google.com/web/updates/2018/03/clipboardapi">text</a>
<a href="https://developers.google.com/web/updates/2015/04/cut-and-copy-commands">trigger cut and copy</a>.</p> and
<a href="https://developers.google.com/web/updates/2019/07/image-support-for-async-clipboard">images </u>programmatically.</a></p>
<h3 id="clipboard-read"><strong>Q: My hosted app uses the clipboardRead permission.
How do I do that on the web? </strong></h3>
<p>We are currently working on bringing the ability to read the clipboard
to the web and you can star
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=593475">this issue</a>
to be kept up to date.
Until then you may consider building an extension with the clipboardRead permission
to provide the functionality to your web app.</p>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment