Filter
-
Content Type
-
Category
Mobile/Wearable
Visual Display
Digital Appliance
Platform
Mobile/Wearable
Visual Display
Digital Appliance
Platform
Filter
Develop Galaxy Watch for Tizen
doccreate your first tizen wearable native watch application welcome to tizen wearable native watch application development! note for watch face developers you can create watch faces with galaxy watch studio or tizen studio for your personal enjoyment however you will not be able to add watch face applications to seller portal until you have received approval to publish watch faces the review is not required for watch app and widget developers galaxy store supports watch faces for galaxy watch3 and earlier samsung watches running on tizen watch faces for galaxy watch4 and later running on wear os powered by samsung is only supported in the chinese galaxy store a wearable native watch application is created using the c language, and can be run on tizen wearable devices to display a customized watch face to the user study the following instructions to help familiarize yourself with the tizen native application development process as well as using the tizen studio and installing the created application on the emulator or target device with the instructions, you can create and run a basic wearable native watch application, which displays some text and the current time on the screen before you get started with developing tizen applications, download and install the tizen studio for more information on the installation process, see the installation guide create a wearable native watch project using the tizen studio this step shows how you can use a predesigned project template that creates all the basic files and folders required for your project build the application after you have implemented code for the features you want, this step shows how you can build the application to validate and compile the code run the application this step shows how you can run the application on the emulator or a real target device design a ui this step shows how you can create the application ui and make small alterations to it to improve the usability of your application when you are developing a more complex application, you can take advantage of the native tools included in the tizen studio to ease the tasks of creating functionality and designing the application ui creating a project the following example shows you how to create and configure a basic wearable native watch application project in the tizen studio an application project contains all the files that make up an application the following figure illustrates the application to be created the application screen displays the hello watch text and the current time, which continues to be refreshed every second while the application runs figure wearable native watch application to create the application project launch the tizen studio in the tizen studio menu, select file > new > tizen project the project wizard opens in the project wizard, define the project details the project wizard is used to create the basic application skeleton with the required folder structure and mandatory files you can easily create different applications by selecting an applicable template or sample for the project wizard to use select the template project type and click next select the profile wearable and version from a drop-down list and click next the version depends on the platform version you have installed and with which you are developing the application select the native application application type and click next select the watch template and click next define the project properties and click finish you can enter the project name 3-50 characters and the unique package id you can also select the location and working sets by clicking more properties the project wizard sets up the project, creates the application files using the default content from the template, and closes for more information on the project wizard and the available templates, see creating tizen projects with tizen project wizard you can see the created project in the project explorer view the most important files and folders include inc default folder for included source files res folder for resource files used by the application only shared folder for resource files to be shared with other applications src folder for source code files lib folder for external library files tizen-manifest xml manifest file used by the platform to install and launch the application figure application in the project explorer note you can view and modify the application configuration in the manifest editor in this example, no configuration changes are required your application project is now ready for further actions next, build the application managing the application configuration to view and modify the application configuration in the project explorer view, double-click the tizen-manifest xml file of the application the tizen studio opens the file in the manifest editor in the manifest editor, view and modify the configuration details using the various tabs overview define general information, such as the package, label, and icon of the application features define required software and hardware features this information is used for application filtering in the tizen store privileges define the security-sensitive apis or api groups accessed and used by the application localization define localized values for the application label, description, and icon advanced define advanced features, such as application metadata and some miscellaneous options source view and edit the source code of the tizen-manifest xml file changes made and saved on the other tabs are reflected in the source code and vice versa note the tizen-manifest xml file must conform to both the xml file format and the tizen native application specification requirements editing the file in the source tab is intended for advanced users only to save any changes, in the tizen studio menu, select file > save all for more information on configuring the application, see setting the application manifest understanding the source code pay attention to the following main issues in the application source code in the inc/watch h and src/watch c files , to understand how the application is designed and how it works for source code details related to the ui, see designing a simple ui the watch application is initialized to use the functions and data types of the watch application api by including the <watch_app h> header file in your application #include <watch_app h> all header files that you need are already included in the watch h file, which is generated by the tizen studio when the template project is created the life-cycle callbacks manage specific parts of the application life-cycle they are set in the watch_app_lifecycle_callback_s structure, and the structure is passed to the watch_app_main function of the watch application api to start the watch application event loop int main int argc, char *argv[] { appdata_s ad = {0,}; int ret = 0; watch_app_lifecycle_callback_s event_callback = {0,}; app_event_handler_h handlers[5] = {null,}; event_callback create = app_create; event_callback terminate = app_terminate; event_callback pause = app_pause; event_callback resume = app_resume; event_callback app_control = app_control; event_callback time_tick = app_time_tick; event_callback ambient_tick = app_ambient_tick; event_callback ambient_changed = app_ambient_changed; ret = watch_app_main argc, argv, &event_callback, &ad ; if ret != app_error_none dlog_print dlog_error, log_tag, "watch_app_main is failed err = %d", ret ; return ret; } the create event is triggered before the application main loop starts in this callback, you can initialize the application resources, such as create windows and data structures static bool app_create int width, int height, void *data { /* hook to take necessary actions before the main event loop starts initialize ui resources and application's data if this function returns true, the main loop of application starts if this function returns false, the application is terminated */ appdata_s *ad = data; create_base_gui ad, width, height ; return true; } the time_tick event is triggered at least once per second the watch applications can get the current time from the watch_time time handle to draw a normal watch static void app_time_tick watch_time_h watch_time, void *data { /* called each second while your app is visible; update the watch ui */ appdata_s *ad = data; update_watch ad, watch_time, 0 ; } note for more information on the application life-cycle callbacks, see applications an ambient mode is available on a low-powered wearable device in this mode, the watch application shows a limited ui and receives only the ambient tick event every minute to reduce power consumption the details of the limited ui drawn in the ambient mode depend on the device in addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen usually, when designing the ambient mode ui, draw it with limited colors cyan, magenta, yellow, red, green, blue, black and white , and use less than 15% of the pixels on the screen if you do not want to draw your own ambient mode ui, set the ambient-support attribute to false in the watch application manifest file to allow the platform to show a default ambient mode ui note to use the ambient mode, the user must enable it in the device settings in addition, on the galaxy watch device, the ambient mode activates only when you are wearing the watch on the wrist - the `ambient_tick` callback is triggered every minute while the device is in the ambient mode you can use the callback to update the time on your watch application in the ambient mode in this callback, do not perform time-consuming tasks and always update the ui as quickly as possible the platform can put the device to sleep shortly after the ambient tick expires ```c static void app_ambient_tick watch_time_h watch_time, void *data { /* called at each minute while the device is in ambient mode update watch ui */ appdata_s *ad = data; update_watch ad, watch_time, 1 ; } ``` - the `ambient_changed` callback is triggered when the ambient mode is enabled or disabled on the device you can use the callback to initialize your ambient mode ui ```c static void app_ambient_changed bool ambient_mode, void *data { if ambient_mode /* prepare to enter the ambient mode */ else /* prepare to exit the ambient mode */ } ``` building your application after you have created the application project, you can implement the required features in this example, only the default features from the project template are used, and no code changes are required when your application code is ready, you must build the application the building process performs a validation check and compiles your files you can build the application in the following ways automatically the automatic build means that the tizen studio automatically rebuilds the application whenever you change a source or resource file and save the application project to use the automatic build select the project in the project explorer view in the tizen studio menu, select project > build automatically a check mark appears next to the menu option you can toggle the automatic build on and off by reselecting project > build automatically manually the manual build means that you determine yourself when the application is built to manually build the application, right-click the project in the project explorer view and select build project figure manually building the application alternatively, you can also select the project in the project explorer view and do one of the following in the tizen studio menu, select project > build project press the f10 key you can have more than one build configuration to see the current active configuration or change it, right-click the project in the project explorer view and select build configurations > set active the default configuration is debug for more information, see building applications after you have built the application, run it running your application you can run the application on the emulator or a real target device running on the emulator to run the application on the emulator launch an emulator instance in the emulator manager in the tizen studio menu, select tools > emulator manager in the emulator manager, select a wearable emulator from the list and click launch if no applicable emulator instance exists, create a new one the emulator is launched in its own window you can also see the new emulator instance and its folder structure in the device manager generate a security profile before you run the application, you must sign your application package with a certificate profile in the tizen studio run the application in the project explorer view, right-click the project and select run as > tizen native application alternatively, you can also select the project in the project explorer view and do one of the following press the ctrl + f11 key click the run icon in the toolbar if you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application if you select an offline emulator, it is automatically launched when you select to run the application confirm that the application launches on the emulator note if the emulator display has switched off, you cannot see the application launch to switch the display on, click the power key in the lower-right corner of the emulator 3 change the watch face <a name="watchface"></a> to change the watch face and make the installed watch application visible ![changing the watch face] https //docs tizen org/application/native/get-started/wearable-watch/media/watch_run_change_wn png 1 if the emulator display has been switched off, activate it by pressing the **power** key in the lower-right corner of the emulator 2 on the home screen showing the default watch face , press the **power** key 3 in the recent apps screen, select **settings \> watch faces and styles \> watch faces** 4 swipe right until you find your application icon, and select it the **clock changed** message is displayed 5 press the **back** key in the upper-right corner of the emulator device multiple times, until the home screen with your new watch face is shown ![application running in the emulator] https //docs tizen org/application/native/get-started/wearable-watch/media/watch_run_face_wn png while the application is running, the **log** view in the tizen studio shows the log, debug, and exception messages from the methods defined in the log macros to see the view, in the tizen studio menu, go to **window \> show view \> log** for more information on using the emulator features, see using emulator control keys, menu, and panel and using extended emulator features running on a target device to run the application on a target device connect the wearable target device to your computer define settings on the device go to settings > connections, and switch on wi-fi the device and the computer must be connected to the same wi-fi network note the ip address the device is using go to settings > gear info, and switch on the debugging mode in the terminal, enter the following commands cd tizen-studio/tools /sdb connect <ip address of galaxy watch> use the ip address you noted before instead of the terminal, you can also use the remote device manager for the connection in the first attempt, the connection fails and the device asks for user confirmation to allow galaxy watch to read log data, copy files to and from your computer, and install the application manually, click the accept mark in the device manager, confirm that the device is connected shown in the device list generate an author certificate before you run the application, you must sign your application package with a certificate profile in the tizen studio run the application in the device manager, select the device in project explorer view, right-click the project and select run as > tizen native application alternatively, you can also select the project in the project explorer view and do one of the following press the ctrl + f11 key click the run icon in the toolbar if you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application confirm that the application launches on the target device like with the emulator, you can change the watch face in the device settings to see the watch application on the home screen note the application is launched using the default debug run configuration to create and use another configuration in the project explorer view, right-click the project and select run as > run configurations in the run configurations window, click the new launch configuration icon , define the configuration details, and launch the application by clicking run designing a simple ui the wearable watch application created with the watch template has a simple user interface with a label component showing the hello watch text and the current time hour, minute, and second the ui is created using efl in the ambient mode, the watch template ui is identical to the normal ui, except that is shows the current time without the seconds figure user interface in the watch template ambient mode on the right creating the basic ui the ui in the watch template contains the following components the efl ui always contains a window component, which is the root component of the entire ui the application uses the conformant component as a container for other ui components the label showing the hello watch text and the current time is implemented with a label component the ui is created in the watch c file data structure a pointer to the ui components is stored in the appdata_s data structure struct appdata { /* window */ evas_object *win; /* conformant */ evas_object *conform; /* label */ evas_object *label; }; typedef struct appdata appdata_s; ui creation the app_create life-cycle callback is called when the application main loop starts, and it calls the create_base_gui function to create the ui static bool app_create int width, int height, void *data { /* define system callbacks */ appdata_s *ad = data; create_base_gui ad, width, height ; return true; } ui components the create_base_gui function creates the ui components window, conformant, and label the function receives a pointer to fill in the appdata_s structure static void create_base_gui appdata_s *ad, int width, int height { the window object of the idle screen is retrieved with the watch_app_get_elm_win function of the watch application api the watch_time_h handle is created for managing the current time, and the evas_object_resize function is used to resize the window to fit the screen int ret; watch_time_h watch_time = null; ret = watch_app_get_elm_win &ad->win ; if ret != app_error_none { dlog_print dlog_error, log_tag, "failed to get window err = %d", ret ; return; } evas_object_resize ad->win, width, height ; the conformant component is used as a container for the other ui components the component is the first object added inside the window with the elm_conformant_add function the conformant component is set as a resize object of the window by using the elm_win_resize_object_add function it means that the conformant size and position are controlled by the window component directly the evas_object_show function makes the conformant component visible ad->conform = elm_conformant_add ad->win ; evas_object_size_hint_weight_set ad->conform, evas_hint_expand, evas_hint_expand ; elm_win_resize_object_add ad->win, ad->conform ; evas_object_show ad->conform ; the label component for the text and time is added with the elm_label_add function the label is added inside the conformant component, which is the label's parent the label is resized and moved so that it is located below the first third of the screen height ad->label = elm_label_add ad->conform ; evas_object_resize ad->label, width, height / 3 ; evas_object_move ad->label, 0, height / 3 ; evas_object_show ad->label ; the watch_time_get_current_time function retrieves the current time, and the update_watch function uses the current time to set the label component content finally, the watch_time_h handle is deleted ret = watch_time_get_current_time &watch_time ; if ret != app_error_none dlog_print dlog_error, log_tag, "failed to get current time err = %d", ret ; update_watch ad, watch_time, 0 ; watch_time_delete watch_time ; when all the ui components are ready, the evas_object_show function makes the window component visible this means that the window displays everything on the screen at once evas_object_show ad->win ; } modifying existing components when the basic ui exists, you can easily modify the components in the ui by using the component-specific functions, or more general evas object functions for example, the following modification to the label component changes the text color to red ad->label = elm_label_add ad->conform ; evas_object_color_set ad->label, 255, 0, 0, 255 ; evas_object_resize ad->label, width, height / 3 ; evas_object_move ad->label, 0, height / 3 ; evas_object_show ad->label ; figure modified label component showing the current time you can update the time on the screen with the time_tick in the normal mode or ambient_tick in the ambient mode callback both callbacks contain the current time handle, and call the update_watch function to update the label content on the screen static void app_time_tick watch_time_h watch_time, void *data { appdata_s *ad = data; update_watch ad, watch_time, 0 ; } static void app_ambient_tick watch_time_h watch_time, void *data { appdata_s *ad = data; update_watch ad, watch_time, 1 ; } in the update_watch function, the watch_time_h handle is used to retrieve the current time elements hour, minute, and second with the watch_time_get_hour24 , watch_time_get_minute , and watch_time_get_second functions of the watch application api the text for the label component is defined based on whether the normal or ambient mode is used , and set with the elm_object_text_set function static bool update_watch appdata_s *ad, watch_time_h watch_time, int ambient { char watch_text[text_buf_size]; int hour24; int minute; int second; if watch_time == null return; watch_time_get_hour24 watch_time, &hour24 ; watch_time_get_minute watch_time, &minute ; watch_time_get_second watch_time, &second ; if !ambient { snprintf watch_text, text_buf_size, "<align=center>hello watch<br/>%02d %02d %02d</align>", hour24, minute, second ; } else { snprintf watch_text, text_buf_size, "<align=center>hello watch<br/>%02d %02d</align>", hour24, minute ; } elm_object_text_set ad->label, watch_text ; }
tutorials game, mobile
blogin this article i would like to introduce a hardware optimisation technique called variable rate shading (vrs) and how this technique can benefit games on mobile phones. introduction traditionally, each shaded pixel in a rendered image is being shaded individually, meaning we can shade very high details anywhere in the image which, in theory, is great. however, in practice, this can lead to wasteful gpu calculations for areas where details are less important. in some cases, you do not need 1x1 shading of pixels to produce a high quality image. for example, for those areas that represent unlit surfaces caused by shadows naturally contain less details than brighter lit areas. moreover, areas which are out of focus due to camera post-effects and areas affected by motion blur naturally do not contain high details. in these cases we could benefit from letting multiple pixels be shaded by just a single calculation (like a 2x2 or 4x4 area of pixels) without losing any noticeable visual quality. the high resolution sky texture on the left looks very much like the lower resolution sky texture on the right. this is due to the smooth colour gradients and lack of high frequency colour variation. for those reasons, there is room for a lot of optimisation. you could argue that optimisation for handheld devices, like mobile phones, is more essential than on stationary devices, like games consoles, due to a couple of reasons. firstly, the hardware on handheld devices is often less powerful than conventional hardware due to smaller size and less electrical power supply. the compact size of the hardware for handheld devices are also the reason why they are more likely to suffer from temperature issues causing thermal throttling, where the performance slows down significantly. secondly, heavy graphics in games can quickly drain your phone's battery life. so, it is crucial to keep the gpu resources to a minimum when possible. variable rate shading is a way to help doing just that. how does variable rate shading work? in principle, variable rate shading is actually a very simple method which can be implemented without having to redesign an existing rendering pipeline. there are three ways to define areas to be optimised using variable rate shading: let an attachment in the form of an image serve as a mask. execute the optimisation on a per-triangle basis. let the vrs optimisation be based on a per-draw call. use an attachment as a mask you can provide the gpu with an image that serves as a mask. the mask contains information about what areas need to be rendered in a traditional manner by shading each pixel individually, and which areas need to be optimised by shading a group of pixels at once. the image below is visualising such a mask by colour-coding different areas: the blue area does not have any optimisation applied (1x1) as this area is where the player focuses on when driving. the green area is optimised by shading four pixels (2x2) by only one shading calculation, as this area contains less details due to motion blur. the red area can be optimised even more (4x4), as it is affected by a more aggressive motion blur. the yellow and purple areas are also shaded with less shading calculations. the areas defined in the image above could be static, at least while the player is driving the boat at top speed, as the boat is positioned at the centre of the image at all times. however, the level of optimisation could be reduced when another boat is passing by or when the boat slows down and therefore the motion blur is gradually reduced. there are times where a more dynamic approach is needed, as it sometimes can be difficult to know beforehand what areas should be optimised and what areas should be shaded in a traditional manner. in those cases, it could be beneficial to generate the mask more dynamically by rendering the geometry for the scene in an extra pass. simply colour the geometric elements in the scene and pass it to the gpu as a mask for the variable rate shading optimisation. if the scene is rendered by using deferred lighting, an extra pass may not be needed as the mask could be based on the default geometry pass required for deferred shading. optimisation based on primitives another way of using variable rate shading is taking advantage of other extensions as they allow you to define geometric elements to be optimised rather than using a mask. this can be done on a per-triangle basis or simply done by a per-draw call. defining geometric elements could be a more efficient approach as there is no need for generating a mask as well as needing less memory bandwidth. for the per-triangle basis extension, you are able to define the optimisation level in the vertex shader. for the per-draw call method, the optimisation level can be defined before the draw call takes place. keep in mind that the three methods can be combined if needed. the image below is a rendering pass where all objects in a scene are shaded in different colours to define what areas should be shaded in a traditional manner (meaning no optimisation) and what areas contain less details (therefore needing less gpu calculations). the areas defined above can be defined by all three methods. in general, by breaking a scene up in layers, where the elements nearest the camera have less optimisation and layers in the background have the most optimisation, would be an effective way to go about it. the image below shows the same scene, but this time we see the final output where vrs is on and off. as you may have noticed, it is very hard to tell any difference when the vrs optimisation is turned on or off. experiences with variable rate shading so far some commercial games have already successfully implemented variable rate shading. the image below is from wolfenstein young blood. as you may have noticed, there is barely any visual difference when vrs is on or off, but you are able to tell a difference in frame rate. in fact, the game performs, on average, 10% or higher when vrs is turned on. that may not sound like a lot, but considering that it is an easy optimisation to implement, there is barely any noticeable change in the visual quality. the 10% performance boost is on top of other optimisation techniques and it is actually not a bad performance boost after all. other games have shown an even a higher performance boost. for example, gears tactics has a performance boost up to 30% when using variable rate shading. the image below is from that game. virtual reality variable rate shading can benefit virtual reality as well. not only does virtual reality by nature require two rendered images (one image for each eye), but the player who wears the virtual mask naturally pays most attention to the central area of the rendered image. the areas of the rendered image that are seen from the corner of your eye naturally do not need the same amount of details as the central area of the rendered images. that means even though a static vrs mask can be used for a reasonable overall optimisation, using an eye tracker could result in an even more efficient optimisation and therefore less noticeable quality reduction. it is crucial to have a consistent high frame rate for virtual reality. if the frame rate is not relatively consistent or the rendering performance is suffering for a consistent low frame rate, it quickly gets uncomfortable to wear a vr headset and the player might even get dizzy and feel physically sick. by reducing the gpu calculations, using variable rate shading not only boosts the frame rate, it also uses less battery for mobile devices. this is a huge win for systems like samsung gear vr where a long battery life is much appreciated as the graphics are running on a galaxy mobile phone. the image below shows a variable rate shading mask generated by eye tracking technology for a virtual reality headset. the centre of the left and right images shade pixels in a traditional manner. the other colours represent different degrees of optimisation areas. which samsung devices support variable rate shading? all hardware listed here supports variable rate shading. mobile phones: samsung galaxy s22, s22+ and s22 ultra tablets: samsung tab s8, s8+ and s8 ultra the following graphics apis, vulkan and opengl es 2.0 (and higher), both support variable rate shading. the opengl extensions for the three ways of using variable rate shading are the following: gl_ext_fragment_shading_rate_attachment for allowing to send a mask to the gpu. gl_ext_fragment_shading_rate_primitive for per-triangle basis, where writing a value to gl_primitiveshadingrateext in the vertex shader defines the level of optimisation. gl_ext_fragment_shading_rate for per-draw call, where glshadingrateext should be called to define the optimisation level. the extension that enables variable rate shading for vulkan is vk_khr_fragment_shading_rate. conclusion in this article, we have established the following: variable rate shading is a hardware feature and is fairly easy to implement as it does not require any redesign of existing rendering pipelines. variable rate shading is an optimisation technique which reduces gpu calculations by allowing a group of pixels to be shaded by the same colour rather than each pixel individually. variable rate shading is particularly useful for mobile gaming as well as samsung gear vr, as it boosts performance and prolongs battery life. the level of optimisation can be defined by passing a mask to the gpu that contains areas of different optimisation levels. some implementations have proven to boost the framerate 10% or higher, while other implementations manage to increase the frame rate up to 30%. note: some images in this post are courtesy of ul solutions. additional resources on the samsung developers site the samsung developers site has many resources for developers looking to build for and integrate with samsung devices and services. stay in touch with the latest news by creating a free account and subscribing to our monthly newsletter. visit the marketing resources page for information on promoting and distributing your apps. finally, our developer forum is an excellent way to stay up-to-date on all things related to the galaxy ecosystem.
Søren Klit Lambæk
success story mobile
blogjeanne hsu, senior marketing manager for developer relations at samsung, chatted with yuki he, chairperson, ceo and founder of joyme. jeanne hsu (jh): yuki, what was your professional journey that led you to joyme? yuki he (yh): i entered the internet industry in 2003 and joined tencent in product management when they started their product team. i was doing entertainment and social apps like qq and qq pets. i enjoyed working in this industry and developed a more profound interest in social products. later on in 2013, i started working on overseas products, got familiar with the global internet market, and was responsible for a utility product. at that time, samsung also partnered with us to include our product. i also got a chance to visit samsung's south korean headquarters to discuss other partnership matters. in 2015, i participated in the entrepreneurial process of musical.ly (later became tiktok) as a director. i saw a promising future of combining live video and social interaction. i wanted to use both to connect people virtually and in real time no matter where they were located. i saw the vast opportunities in the u.s. market, so i left and decided to build my own company, joyme. jh: where is joyme located? yh: joyme is in various regions including the los angeles (u.s.), singapore, brazil, and the middle east. jh: how many employees work at joyme? yh: we have 500 people total including 300 employees and 200 contractors. jh: how did the relationship with samsung first start? yh: we published liveme in galaxy store in 2020. we already had a relationship with samsung from my previous work. so this was a natural extension of the partnership. jh: best of galaxy store award – 2021 best entertainment app for joyme's liveme app. what does it mean to win this award? yh: we take this award very seriously and especially thank samsung for the recognition. samsung has many users and is one of the largest store platforms in the world. samsung is a world-renowned company, with a prominent brand name. winning this award also gives us great motivation to continue creating even better products for samsung users. jh: in what ways have you promoted winning the award? yh: we have promoted this fantastic news through the media agency and received positive market feedback. we plan to promote the award-winning news through international media, liveme's social media, and the official website. we believe the recognition from samsung is going to boost our branding and let more samsung users get to know more about us. winning the award gives us great motivation to continue doing what we do best: give our users and the entertainment community the best service. liveme – 2021 best entertainment app jh: what have you noticed about mobile trends and liveme? yh: the mobile phone camera has changed people's lives when they interact with their phones. you can be anywhere in the world to connect online with people, show your talent, expand your circle of friends, and share parts of your life. bringing the community closer together is the original concept of liveme. i felt the video and interactive components were important. people can go online with liveme and feel happier. jh: are there any unique aspects or optimizations to the galaxy store version of liveme? yh: we integrated the payment channel sdk with the samsung iap (in-app purchase) sdk. our base operation is android. galaxy store is very good for the developer so we don't have to do different versions. it saves a lot of time and resources. in the future, we hope to have deeper integration with samsung. jh: how did you come up with the concept for liveme? yh: in 2015, livestream video was not as popular as it is now; people took pics. but the camera performance on mobile phones was becoming more sophisticated and advanced. i found that many users gradually developed taking videos on their mobile phones. video is a richer content carrier than still images or plain text. i could see the future of information transmission trends. then video transmission changed; it was faster and people could send full rich videos instead of choppy/frozen bits of pixels. now instead of just watching a video, people could interact with live video streams. users could respond with comments or emojis in real time. the live-stream video experience further enhanced the connection between people. for example, people can stay at home and make friends all over the world. they use this platform to show off their talents. having this vision of connecting the world was the original idea that inspired me to develop liveme. broadcasters and business model jh: i noticed on facebook that liveme's tagline reads: “create content, meet friends, and make money.” tell me more about liveme and the business model. how do the broadcasters make money? yh: broadcasters earn money by presenting engaging content in their livestream channel. they can build up a global fan base. then viewers can send virtual gifts to show their appreciation. they also encourage people to subscribe to their channel. for example, out of 100k people that enter a broadcaster's room, 20% could give them gifts like flower animations and virtual diamonds. the more gifts they receive from their fans, the better. it shows a very active community. some broadcasters see this as a hobby, but some make it their professional career. we're not talking about famous celebrities who have their own channels but rather the uber driver, bar singer or amateur dancer. they can use liveme as an entertainment channel and make money doing it as a living. we help 300,000 broadcasters earn money in the u.s. globally we have a million broadcasters that are making good money via liveme. it's a very powerful story. not only do they receive gifts from their fans, but they also get benefits from liveme. we also give the broadcasters gifts depending on the volume and activity of their fan base. it helps incent broadcasters to generate new content. every month, we give several millions of u.s. dollars to the broadcasters. what's more, we have an ongoing plan with a $60 million investment to support our broadcasters and creators. we're able to offer jobs to people all over: in the u.s., brazil, japan, and the middle east, just to mention a few. jh: what a strong message. “we believe in you, and are willing to pay you for your creativity attracting a large fan base.” it's an intriguing business model. what else are broadcasters doing to increase their audience? yh: we have talented broadcasters who create content and make friends by livestreaming. they can interact with viewers. fans can also beam in to the “room”, do challenges and play mini games with the broadcasters. there can be up to nine people in a livestreaming room. youtube cannot do that. fans then become part of the action with other community members. and there are more people who are commenting, giving gifts, and cheering these people on. having this very interactive community lends itself to many creative ideas. we can combine games with the livestreaming: in soccer, the broadcaster guards the goalpost and another person kicks the ball, in real-time. people can play casual games together. then the community interacts as they play games, dance or sing. it's very entertaining! app ideas, discoverability and reach jh: how many apps has joyme published, and how many are on galaxy store? yh: liveme and photogrid are the two main apps of joyme. liveme is a live video social app and photogrid is a video and photo editing app. both liveme and photogrid are on galaxy store. jh: where do you get your app ideas? yh: user feedback is important to us. they give us ideas and inspiration. we learn from other apps (funny and creative ideas from games and apps). we'll also run campaigns to celebrate special events like our 6th birthday this past april; fans sent us video birthday cards. we do marketing research to see if there is new technology we could use. for example, new technologies like virtual character ai improves the user creative experience in our apps. jh: what is the work flow when designing, developing and publishing an app? yh: there are six steps for our app development and publishing. first, we need to list out the product project needs. it is necessary to determine the project's overall plan, the timeline, the general framework, the main functions, and the core belief of the app. what are the needs of target users? what kind of value can this app create for the user? once the app has its primary functions defined, we research to understand potential competitors and competitive environment. for example, is it a saturated market or a competitive market? next is the realization of the app function by designing the first draft of ui and ux. after multiple meetings and rendering, we will have the final interface design ready. the product will then enter the research and development stage. while forming the app with programming, we prepare everything in the app store account for release. the next step is to test the app. we test the app thoroughly before release by having internal test users test the first version and extract user feedback to improve and optimize the user experience. finally, it is time to publish the app. we'll use the app store account to release and publish the tested app, and leave three to five days to fix any bugs after the app is released. jh: with all the competition for apps, what has been your strategy for discoverability? yh: we buy ads traditionally from google and meta, etc. every app developer does that. but we have a community of broadcasters who can promote our apps as well. they will share their live-steaming with their fans by cross-promoting from other channels they've cultivated. we can see that more people are making friends and enjoying the interaction with the broadcasters. friends are telling others about broadcasters that appeal to them. there's nothing more compelling than the “tell a friend” concept. we do some pr and marketing events. before covid, we used to do live in-person promotions with iheartradio; one was for the event music house. we hosted parties in la and san francisco with broadcasters, asking them to invite their friends to join in. we found that people share their experiences on social media. it was a fun way to promote the liveme app to their friends. now we hold other online events, building on our platform, so people worldwide can participate. jh: what has been your strategy for generating revenue? yh: liveme generates revenue by iap (in-app purchases) for virtual gifts to support favorite broadcasters or participate in in-app events. to encourage users to be more engaged, we create monthly competitions with different themes, holidays, and unique virtual 3d animation gifts to best express users' distinct support styles. jh: in the last five years, liveme is in 85 countries. how do you attribute your growth and expansion? yh: liveme started with multiple tests and trials in a few countries to build a solid foundation. in the early stages, it is necessary to confirm if the product provides valuable services for users that reflect the actual demand in a pilot before launching a large-scale expansion. the internet industry is getting so competitive that users' needs and requirements change every second. it is truly a great challenge for our developers. our fundamental strategy is making good products and services that genuinely exceed user expectations. joyme has also been exploring and improving under the same principle. jh: what is in the future for joyme / liveme? yh: our mission is to "connect the world and spread happiness." joyme will continue to devote itself to creating exciting pan-entertainment products. in the future, we will also develop immersive meta-universe experience products. everyone is facing different obstacles in life under the influence of the pandemic, so i hope joyme can create products that give more companionship, happiness, and love to bring our global users together. feedback and advice jh: what advice would you give developers looking to bring their apps to galaxy store? yh: for specifics about galaxy store, i recommend the following: become familiar with the policy for galaxy store. if developers ignore this, their apps will soon be off-line. understand how to control the risk of payments. different platforms have varying risks. get good feedback from users and cooperate with samsung. we do activities together with samsung and benefit from their promotions. incent galaxy store users. we give gifts to galaxy store users, such as free coins to buy gifts to send to broadcasters. it encourages users to buy more coins and engage with liveme. jh: why is it important to offer your app on galaxy store? yh: our main market is the u.s. and samsung has a major presence there. marketing jh: what are some of the ways you promote liveme? yh: here are our websites and channels: website - https://www.liveme.com/ facebook - https://www.facebook.com/streamliveme/ twitter - https://twitter.com/streamliveme (@streamlivem) youtube - https://www.youtube.com/c/livemeofficial/featured instagram - https://www.instagram.com/streamliveme/ diversity and inclusion jh: what is joyme doing related to diversity and inclusion? yh: joyme supports multiple languages and is available in many countries, so focusing on content localization based on local culture, trends, and holidays is essential. we are committed to meeting the needs of our diverse users and respecting different cultures and religions. our goal is to create a supportive community that includes all races, religions, and cultures to connect users in the various regions. our management team is 40% to 50% women; some of them have been with me for more than five years, building a good relationship with each other. we also have offices in eight countries with different nationalities and cultures, all working together. jh: i understand you were involved in the women's entrepreneurship day (wed) summit. tell us more about that. yh: yes, thanks for asking. this international annual wed summit empowers women and girls worldwide to alleviate poverty their communities. i spoke to encourage them to become active participants in the economy by becoming leaders, innovators, and entrepreneurs. it gave me an opportunity to share my story with young women from all over the world and highlight how liveme is empowering women to share their talents and follow their passions. fun jh: what do you do for fun outside of work? yh: i enjoy playing different sports and fitness; i am also into singing. i was the singer of the official theme song "song of tencent" for tencent. i participated in many singing competitions during my college years and was pretty good at it. if i didn't become a product manager in the internet industry, i would probably have become a singer. yuki singing in fact, that was one reason i launched liveme. i started out as a broadcaster and gained a lot of fans by singing and dancing. everyone has the opportunity to grow their channel. nobody knew i was the ceo of the company. once they found out, they said “i knew yuki before as a broadcaster.” now, i leave the broadcasting to the other talent. jh: it's great you started as a broadcaster. so you know firsthand how to showcase your singing and dancing talents. kudos to you! thank you so much for this interview yuki. yh: you're very welcome. i am happy to chat with you. additional resources on the samsung developers site the samsung developers site has many resources for developers looking to build for and integrate with samsung devices and services. stay in touch with the latest news by creating a free account and subscribing to our monthly newsletter. visit the marketing resources page for information on promoting and distributing your apps. finally, our developer forum is an excellent way to stay up-to-date on all things related to the galaxy ecosystem.
Jeanne Hsu
Connect Samsung Developer Conference
webtech square products and services using our new technology are displayed in the space by each field, and you can find details in the keynote speech and sessions. ai for platforms enterprise & ecosystem ai for devices category ai for platforms enterprise & ecosystem ai for devices mobile remote on smartthings control your tv effortlessly with our innovative mobile remote. 1. personalize your mobile remote to match your needs. arrange your mobile remote with the buttons and applications you want. you can use the touchpad to control without looking at the mobile screen (swipe-navigation, tap-ok, double tap-return). 2. use the mobile remote even without the internet. the mobile remote connects to your tv via ble for seamless interaction. 3. share the mobile remote with your family. simply scan a qr code to share the mobile remote with family members. innovating together for 10 years samsung smartthings has been leading the way in connected living for a decade — consistently redefining home automation and setting the standard for efficiency and security. growing from 100 million subscribers in 2019 to over 350 million by august 2024, smartthings has established samsung as a leader in the smart home market. the platform continues to expand its influence in the iot industry by enhancing its ai-driven capabilities and even extending its reach into the b2b space. check out the infographic below to explore samsung smartthings' 10-year journey of innovation. easily certify your product family the smartthings platform supports connectivity with a wide range of partner devices to enhance convenience in users' daily lives. to achieve this goal, we have introduced a program called ‘certification by similarity'. this program allows free certification for derivative products that share the same features as the main certified product based solely on self-verification test results. it also enables mass certification and registration of entire product lines at once. smartthings is planning various promotions to introduce wwst-certified partner devices to general users. tailored moods with music sync with smartthings music sync, you can match lighting to your gaming environment or favorite movie scenes, and when it comes to home parties, relaxation, or even workouts, smartthings music sync offers music synchronization to create an engaging listening experience. smartthings hubs working together as a team smartthings hubs are already integrated into millions of samsung devices. these hubs build a multi-hub network and can fully cover your home without any dead spots. samsung knox matrix knox matrix realizes samsung's vision for a future where connected devices can protect each other within an ecosystem. it is set to provide the devices within a user's ecosystem with fewer vulnerabilities through strong, diverse security practices. take care of your loved ones with family care take care of your loved ones with smartthings. no matter the distance, you can now easily check in to make sure they are ok. experience navien house with smartthings navien monitors consumer hot water and heating usage patterns, analyzes the data, and generates a home report. by collaborating with smartthings, navien strives to offer global consumers more opportunities to experience the excellence of navien products. conserve water for a better future we're thrilled introduce a new partner to the smartthings ecosystem. join us at sdc to learn all the details about this exciting partnership! home insight powered by smartthings ai a message that helps with your daily life, home insight. smartthings intuitively summarizes the essential details of your home and intelligently fine-tunes your needs with your living environment. door locks on smartthings x samsung wallet a keyless experience with samsung wallet and smartthings. samsung wallet and smartthings' partners can display their own brand on a digital home key. in smartthings, you can manage users who have access to your door lock and utilize safe and various ways of opening the door. also, you can grant personalized experiences based on who unlocks the door. convenient remote control experience you can easily find and quickly control your devices with the larger remote control cards in the smartthings application. work from home in comfort by adjusting the temperature right from your galaxy book. create the best mood lighting for movie night by dimming the lights from your tv's quick launch. simply tap the device icon in map view and the remote appears on your smartphone or tablet. no need to switch screens or be close to the device anymore. daily health care in the comfort of your home make daily health management at home effortless for you and your loved ones. now samsung health is integrated with smartthings which is connected to millions of devices, opening the possibilities of new experiences in home environments. back to previous page samsung health sdk suite unlock the future of health tech. explore the samsung health sdk suite today! empowering health innovation with samsung's suite of health sdks, enabling seamless integration of advanced digital health solutions into your applications and devices. partner with samsung health transforming lives together. improve health and well-being through innovation, research, and collaboration to empower people throughout their lives. samsung wallet: expanding eco with partners samsung wallet is expanding its offerings by providing new card types and features. it also allows easy onboarding of multiple merchants through the improved partner site and can send push notifications to users directly. the existing samsung wallet/pay partner site has been integrated with the developer portal, resulting in enhanced usability and added functionality. this integration is expected to provide a more convenient experience for partners. samsung wallet: digital key for home and office no need to carry a key. tap to unlock your door with the digital key of samsung wallet. samsung wallet: sdk for online id verification add your mobile driver's license or state id to samsung wallet and easily verify your identity online. car rental, liquor purchase, loan applications, and more require proof of identity. experience the convenience and security when you present your state-issued credential with samsung wallet. galaxy for knowledge workers introduction of enterprise mobility solutions enabled with strategic partners to deliver maximum business productivity via samsung flagship devices and samsung multi-device connectivity environment. galaxy for frontline workers this session introduces three enterprise partner solutions for field workers. we are going to showcase how galaxy devices are transformed into optimized solutions through partner collaboration. first, koamtac advanced inventory management solution. second, targus field ready case and mpos solution. third, harman's worker safety and productivity solution for galaxy watch. samsung vxt : cms platform with pirs (pre-integrated repeatable solution) traditionally, the signage industry was centered around hardware, but with vxt, we've taken a leap towards becoming a software solution. starting with saas, we're now progressing towards daas and paas, ensuring high growth and market dominance based on revenue generated from the vxt platform ecosystem. our cutting-edge cms software, vxt cms, incorporates ai technology to provide comprehensive support for all aspects of content production, operation, and management. by utilizing an ai-powered chatbot, we enable efficient operations and management. to further enhance our offering, we are actively seeking partnerships with ai experts through the pirs application. by providing easy access to development tools such as sdks, we encourage more ai companies to join us in shaping this new ecosystem. our goal is to create an application environment where si partners can develop specialized features that seamlessly integrate with samsung vxt. harman ignite store – a white-label aaos app store the harman ignite store is an integrated automotive app store built on the android automotive operating system (aaos). learn how harman automotive is connecting developers with carmakers to create unique in-vehicle digital experiences that can be monetized. back to previous page samsung ai cast: delivering ai-generated experiences to your screen samsung ai cast brings the power of ai directly to your screen, delivering immersive experiences right to your display. it showcases stunning ai-generated images, elegantly framed like artwork. it offers personalized content recommendations. it shares text from your conversations with ai. whether it's a visual creation, a custom content suggestion, or any insightful text, ai cast ensures that the best of ai is always on display, making your screen experience richer and more interactive. expansion of sign language guide the sign language guide, initially designed for tv settings (2022), has now been extended to cover a wider range of tv built-in services. this innovative feature enables individuals who are deaf to easily access information displayed on their tvs. in collaboration with broadcasting companies, we are incorporating sign language information into real-time broadcasts and outputting them on tv. we are also preparing to expand the use of sign language in various areas such as the out-of-box experience (oobe), notifications, and electronic manuals containing tv usage information. with advancements in technology, it is expected that live streaming videos will soon be able to be translated into sign language in real-time using an ai-powered motion capture technique. by expanding the motion dictionary within the tv, a broader variety of sign language motions can be stored and utilized effectively. ai picture quality the ai picture quality of samsung tv focuses on ai object-oriented picture quality enhancement. ai upscaling pro can improve face quality through object-oriented upscaling technology based on ai face detection and face-specific upscaling model. ai motion enhancer pro can improve motion picture quality of cognitively important objects (ball/text) by recognizing the type of sports and detecting the movement of important objects. samsung daily+ and daily board ecosystem samsung presents a lifestyle content platform, samsung daily+ and daily board. here, we invite you to easily join the samsung daily+ and daily board ecosystem. samsung daily+ is an on-screen experience platform that suggests users explore diverse lifestyle content across various experience categories. a new daily board sdk provides an easier way to include widgets on the daily board screen, providing frequently displayed off-screen experiences. samsung ai tv on risc-v an initial step to expand ai screen towards risc-v. ai screen on tizen is now powered by risc-v-based computing platforms. by harnessing the flexibility and openness of risc-v and tizen, samsung will enhance user experience by holistically optimizing entire hardware and software stacks. hassle-free adoption of tizen applications. you can still enjoy all existing web and .net applications without any modification. tizen will provide all environments (e.g., toolchain, sdk, etc.) to easily migrate native applications for risc-v. generative wallpaper generative wallpaper serves the experience of providing large images reflecting preferences using a generative ai model. it enriches the home atmosphere with high-quality generated images, making every moment shared with family and friends even more special. it offers more than 18 styles tailored to customers' tastes and provides high-resolution images suitable for a large screen. enhancing search experience with bixby search is the most basic but important thing nowadays. there are so many movies and shows on many different ott platforms. how can we find the exact one that we want to see without knowing the exact title? with this upgraded search system, you can now find the movie with a somewhat ambiguous sentence or some part of the plot. like "find me a movie about a mouse inside a cook's hat." (what movie did you expect?) or you can find the movie by a genre or time period, like "find a movie about the financial crisis," or "find a movie about the korean war." not only enhanced search power, but now bixby can also do more things at once. you can have a conversation with bixby with context, like this: "who's the director of parasite?" "the director of parasite is bong joon-ho." "find his movies." and you can do many things with only one sentence: "hi bixby, turn the volume to 10 and find action movies." you don't have to wait and say one command at a time and wait for bixby's 'completed' signal. ecosystem for advanced professional video codec advanced professional video (apv) codec is a new video codec for prosumers who do not want to compromise on quality while enjoying the convenience of capturing video using smartphones. at our booth, you can experience the superior visual quality of the apv codec and a video editing demonstration supported by the apv codec. on-device cleaning solution samsung's home appliances are equipped with on-device ai, making them smarter than ever before. with various sensors and cameras, they offer an enhanced user experience by optimizing cleaning paths and recognizing different objects. additionally, these appliances identify carpeted areas and floor types to adjust their cleaning performance accordingly. explore more of the on-device features available in samsung's home appliances for a truly innovative experience. new ai familyhub the family hub refrigerator is equipped with ai vision technology, allowing you to manage your food efficiently by always knowing what's inside. additionally, you can personalize your family hub experience with generative wallpaper, which enables users to create their own unique wallpapers for the device. now it's time to try generating the desired wallpaper and enhance your family hub experience. enhanced appliance control : bixby & ai home on-device automatic speech recognition (asr) technology enables appliances to support voice interactions without requiring voice activation commands. this technology allows for a more natural and intuitive way to interact with our products, ultimately enhancing user experience. additionally, bixby's advancements facilitate seamless communication between appliances and users, resulting in improved convenience and usability. the incorporation of these technologies into home appliances showcases their potential to revolutionize the way we interact with everyday objects. back to previous page mobile remote on smartthings control your tv effortlessly with our innovative mobile remote. 1. personalize your mobile remote to match your needs. arrange your mobile remote with the buttons and applications you want. you can use the touchpad to control without looking at the mobile screen (swipe-navigation, tap-ok, double tap-return). 2. use the mobile remote even without the internet. the mobile remote connects to your tv via ble for seamless interaction. 3. share the mobile remote with your family. simply scan a qr code to share the mobile remote with family members. innovating together for 10 years samsung smartthings has been leading the way in connected living for a decade — consistently redefining home automation and setting the standard for efficiency and security. growing from 100 million subscribers in 2019 to over 350 million by august 2024, smartthings has established samsung as a leader in the smart home market. the platform continues to expand its influence in the iot industry by enhancing its ai-driven capabilities and even extending its reach into the b2b space. check out the infographic below to explore samsung smartthings' 10-year journey of innovation. easily certify your product family the smartthings platform supports connectivity with a wide range of partner devices to enhance convenience in users' daily lives. to achieve this goal, we have introduced a program called ‘certification by similarity'. this program allows free certification for derivative products that share the same features as the main certified product based solely on self-verification test results. it also enables mass certification and registration of entire product lines at once. smartthings is planning various promotions to introduce wwst-certified partner devices to general users. tailored moods with music sync with smartthings music sync, you can match lighting to your gaming environment or favorite movie scenes, and when it comes to home parties, relaxation, or even workouts, smartthings music sync offers music synchronization to create an engaging listening experience. smartthings hubs working together as a team smartthings hubs are already integrated into millions of samsung devices. these hubs build a multi-hub network and can fully cover your home without any dead spots. samsung knox matrix knox matrix realizes samsung's vision for a future where connected devices can protect each other within an ecosystem. it is set to provide the devices within a user's ecosystem with fewer vulnerabilities through strong, diverse security practices. take care of your loved ones with family care take care of your loved ones with smartthings. no matter the distance, you can now easily check in to make sure they are ok. experience navien house with smartthings navien monitors consumer hot water and heating usage patterns, analyzes the data, and generates a home report. by collaborating with smartthings, navien strives to offer global consumers more opportunities to experience the excellence of navien products. conserve water for a better future we're thrilled introduce a new partner to the smartthings ecosystem. join us at sdc to learn all the details about this exciting partnership! home insight powered by smartthings ai a message that helps with your daily life, home insight. smartthings intuitively summarizes the essential details of your home and intelligently fine-tunes your needs with your living environment. door locks on smartthings x samsung wallet a keyless experience with samsung wallet and smartthings. samsung wallet and smartthings' partners can display their own brand on a digital home key. in smartthings, you can manage users who have access to your door lock and utilize safe and various ways of opening the door. also, you can grant personalized experiences based on who unlocks the door. convenient remote control experience you can easily find and quickly control your devices with the larger remote control cards in the smartthings application. work from home in comfort by adjusting the temperature right from your galaxy book. create the best mood lighting for movie night by dimming the lights from your tv's quick launch. simply tap the device icon in map view and the remote appears on your smartphone or tablet. no need to switch screens or be close to the device anymore. daily health care in the comfort of your home make daily health management at home effortless for you and your loved ones. now samsung health is integrated with smartthings which is connected to millions of devices, opening the possibilities of new experiences in home environments. samsung health sdk suite unlock the future of health tech. explore the samsung health sdk suite today! empowering health innovation with samsung's suite of health sdks, enabling seamless integration of advanced digital health solutions into your applications and devices. partner with samsung health transforming lives together. improve health and well-being through innovation, research, and collaboration to empower people throughout their lives. samsung wallet: expanding eco with partners samsung wallet is expanding its offerings by providing new card types and features. it also allows easy onboarding of multiple merchants through the improved partner site and can send push notifications to users directly. the existing samsung wallet/pay partner site has been integrated with the developer portal, resulting in enhanced usability and added functionality. this integration is expected to provide a more convenient experience for partners. samsung wallet: digital key for home and office no need to carry a key. tap to unlock your door with the digital key of samsung wallet. samsung wallet: sdk for online id verification add your mobile driver's license or state id to samsung wallet and easily verify your identity online. car rental, liquor purchase, loan applications, and more require proof of identity. experience the convenience and security when you present your state-issued credential with samsung wallet. galaxy for knowledge workers introduction of enterprise mobility solutions enabled with strategic partners to deliver maximum business productivity via samsung flagship devices and samsung multi-device connectivity environment. galaxy for frontline workers this session introduces three enterprise partner solutions for field workers. we are going to showcase how galaxy devices are transformed into optimized solutions through partner collaboration. first, koamtac advanced inventory management solution. second, targus field ready case and mpos solution. third, harman's worker safety and productivity solution for galaxy watch. samsung vxt : cms platform with pirs (pre-integrated repeatable solution) traditionally, the signage industry was centered around hardware, but with vxt, we've taken a leap towards becoming a software solution. starting with saas, we're now progressing towards daas and paas, ensuring high growth and market dominance based on revenue generated from the vxt platform ecosystem. our cutting-edge cms software, vxt cms, incorporates ai technology to provide comprehensive support for all aspects of content production, operation, and management. by utilizing an ai-powered chatbot, we enable efficient operations and management. to further enhance our offering, we are actively seeking partnerships with ai experts through the pirs application. by providing easy access to development tools such as sdks, we encourage more ai companies to join us in shaping this new ecosystem. our goal is to create an application environment where si partners can develop specialized features that seamlessly integrate with samsung vxt. harman ignite store – a white-label aaos app store the harman ignite store is an integrated automotive app store built on the android automotive operating system (aaos). learn how harman automotive is connecting developers with carmakers to create unique in-vehicle digital experiences that can be monetized. samsung ai cast: delivering ai-generated experiences to your screen samsung ai cast brings the power of ai directly to your screen, delivering immersive experiences right to your display. it showcases stunning ai-generated images, elegantly framed like artwork. it offers personalized content recommendations and shares text from your conversations with ai. whether it's a visual creation, a custom content suggestion, or any insightful text, ai cast ensures that the best of ai is always on display, making your screen experience richer and more interactive. expansion of sign language guide the sign language guide, initially designed for tv settings (2022), has now been extended to cover a wider range of tv built-in services. this innovative feature enables individuals who are deaf to easily access information displayed on their tvs. in collaboration with broadcasting companies, we are incorporating sign language information into real-time broadcasts and outputting them on tv. we are also preparing to expand the use of sign language in various areas such as the out-of-box experience (oobe), notifications, and electronic manuals containing tv usage information. with advancements in technology, it is expected that live streaming videos will soon be able to be translated into sign language in real-time using an ai-powered motion capture technique. by expanding the motion dictionary within the tv, a broader variety of sign language motions can be stored and utilized effectively. ai picture quality the ai picture quality of samsung tv focuses on ai object-oriented picture quality enhancement. ai upscaling pro can improve face quality through object-oriented upscaling technology based on ai face detection and face-specific upscaling model. ai motion enhancer pro can improve motion picture quality of cognitively important objects (ball/text) by recognizing the type of sports and detecting the movement of important objects. samsung daily+ and daily board ecosystem samsung presents a lifestyle content platform, samsung daily+ and daily board. here, we invite you to easily join the samsung daily+ and daily board ecosystem. samsung daily+ is an on-screen experience platform that suggests users explore diverse lifestyle content across various experience categories. a new daily board sdk provides an easier way to include widgets on the daily board screen, providing frequently displayed off-screen experiences. samsung ai tv on risc-v an initial step to expand ai screen towards risc-v. ai screen on tizen is now powered by risc-v-based computing platforms. by harnessing the flexibility and openness of risc-v and tizen, samsung will enhance user experience by holistically optimizing entire hardware and software stacks. hassle-free adoption of tizen applications. you can still enjoy all existing web and .net applications without any modification. tizen will provide all environments (e.g., toolchain, sdk, etc.) to easily migrate native applications for risc-v. generative wallpaper generative wallpaper serves the experience of providing large images reflecting preferences using a generative ai model. it enriches the home atmosphere with high-quality generated images, making every moment shared with family and friends even more special. it offers more than 18 styles tailored to customers' tastes and provides high-resolution images suitable for a large screen. enhancing search experience with bixby search is the most basic but important thing nowadays. there are so many movies and shows on many different ott platforms. how can we find the exact one that we want to see without knowing the exact title? with this upgraded search system, you can now find the movie with a somewhat ambiguous sentence or some part of the plot. like "find me a movie about a mouse inside a cook's hat." (what movie did you expect?) or you can find the movie by a genre or time period, like "find a movie about the financial crisis," or "find a movie about the korean war." not only enhanced search power, but now bixby can also do more things at once. you can have a conversation with bixby with context, like this: "who's the director of parasite?" "the director of parasite is bong joon-ho." "find his movies." and you can do many things with only one sentence: "hi bixby, turn the volume to 10 and find action movies." you don't have to wait and say one command at a time and wait for bixby's 'completed' signal. ecosystem for advanced professional video codec advanced professional video (apv) codec is a new video codec for prosumers who do not want to compromise on quality while enjoying the convenience of capturing video using smartphones. at our booth, you can experience the superior visual quality of the apv codec and a video editing demonstration supported by the apv codec. on-device cleaning solution samsung's home appliances are equipped with on-device ai, making them smarter than ever before. with various sensors and cameras, they offer an enhanced user experience by optimizing cleaning paths and recognizing different objects. additionally, these appliances identify carpeted areas and floor types to adjust their cleaning performance accordingly. explore more of the on-device features available in samsung's home appliances for a truly innovative experience. new ai familyhub the family hub refrigerator is equipped with ai vision technology, allowing you to manage your food efficiently by always knowing what's inside. additionally, you can personalize your family hub experience with generative wallpaper, which enables users to create their own unique wallpapers for the device. now it's time to try generating the desired wallpaper and enhance your family hub experience. enhanced appliance control : bixby & ai home on-device automatic speech recognition (asr) technology enables appliances to support voice interactions without requiring voice activation commands. this technology allows for a more natural and intuitive way to interact with our products, ultimately enhancing user experience. additionally, bixby's advancements facilitate seamless communication between appliances and users, resulting in improved convenience and usability. the incorporation of these technologies into home appliances showcases their potential to revolutionize the way we interact with everyday objects.
Develop Samsung Wallet
docpay as you go { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551318", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "payasyougo", "subtype" "evcharges", "applogoimg" "http //www yourdomain com/banner_logo_image png", "nonetworksupportyn" "n", "sharebuttonexposureyn" "y", "privacymodeyn" "n", "preventcaptureyn" "n" } } generic card { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551319", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "generic", "subtype" "others", "applogoimg" "http //www yourdomain com/banner_logo_image png", "designtype" "generic 02", "nonetworksupportyn" "n", "category" "membership", "privacymodeyn" "n", "preventcaptureyn" "n" } } layout specs this document provides detailed specifications for the layout field used when adding wallet card templates through the card management api it is intended to be referenced from the layout field description in the adding wallet card template overview this section describes the specification of the layout field used when adding wallet card template the layout object defines presentation rules for card data in samsung wallet it does not contain display values directly instead, it references card data using attribute keys layout object structure the layout object consists of three sections header primary auxiliary each section defines a layout preset and a list of entry mappings type value description layout object layoutobject optional defines presentation rules for card data in samsung wallet layout headerobject required defines the header area of the card layout header presetstring 10 required header layout preset allowed values logo, logotext, text layout header entries[]array of object required list of entry mappings that define how header ui slots reference card data layout header entries[] entrynamestring 100 required identifier of the ui slot format {role}_{index} e g , image_01, field_01, subfield_01 layout header entries[] entrykeystring 100 required attribute key used to retrieve the corresponding data value layout primaryobject required defines the primary content area of the card layout primary presetstring 20 required primary layout preset generic cards landscape, square, vertical, textonlyboarding pass threefields, fourfields, fivefields layout primary entries[]array of object required list of entry mappings that define how primary ui slots reference card data layout primary entries[] entrynamestring 100 required identifier of the ui slot format {role}_{index} e g , image_01, field_01, subfield_01 layout primary entries[] entrykeystring 100 required attribute key used to retrieve the corresponding data value layout primary useboardingtimeboolean optional controls which time is displayed on the boarding pass card - false default displays the departure time- true displays the boarding start timeapplies only when cardtype = boardingpass layout auxiliaryobject required defines additional information displayed when the card is expanded layout auxiliary presetstring 20 optional defines the number of fields to be displayed allowed values twofields, threefields, fourfields layout auxiliary entries[]array of object required ordered list of fields rendered as label–value pairs each value is an attribute key layout auxiliary entries[] entrynamestring 100 required identifier of the ui slot format {role}_{index} e g , image_01, field_01, subfield_01 layout auxiliary entries[] entrykeystring 100 required attribute key used to retrieve the corresponding data value example { "layout" { "header" { “preset” "logotext", "entries" [ { "entryname" "image_01", "entrykey" "providerlogo" }, { "entryname" "field_01", "entrykey" "providername" }, { "entryname" "subfield_01", "entrykey" "vehiclenumber" } ] }, "primary" { “preset” "square", "entries" [ { "entryname" "image_01", "entrykey" "wideimage" }, { "entryname" "field_01", "entrykey" "grade" }, { "entryname" "field_02", "entrykey" "seatclass" } ] }, "auxiliary" { “preset” "twofields", "entries" [ { "entryname" "field_01", "entrykey" "entrance" }, { "entryname" "field_02", "entrykey" "seatnumber" } ] } } } header – required entryname by preset preset required entryname description logo image_01, subfield_01 logo image with secondary text logotext image_01, field_01, subfield_01 logo image with primary and secondary text text field_01, subfield_01 primary and secondary text without image primary – required entryname by preset preset required entryname description landscape image_01 landscape image only square image_01, field_01, field_02 square image with two text fields vertical image_01, field_01, field_02 vertical image with two text fields textonly field_01 single text field without image primary / auxiliary – field-based presets preset required entryname description twofields field_01, field_02 displays two label–value pairs threefields field_01, field_02, field_03 displays three label–value pairs fourfields field_01, field_02, field_03, field_04 displays four label–value pairs fivefields field_01, field_02, field_03, field_04, field_05 displays five label–value pairs allowed where applicable data mapping layout → card data the layout object does not contain display values each field defined in layout references card data using an attribute key this section describes how attribute keys are resolved data resolution rule when a field is defined in layout, the value is resolved from the following locations in order card data[] attributes card data[] attributes extendedfields[] entrykey standard attribute mapping if the entrykey defined in layout matches a field inside card data[] attributes the value is resolved directly from that attribute example layout … "primary" { … “preset” "square", "entries" [ { "entryname" "field_01", "entrykey" "providername " }, … } … example card data[] "attributes" { … "providername" "samsung wallet" … } extended fields mapping in addition to predefined attributes, layout fields may reference values inside extendedfields extendedfields is a user-defined data container that allows partners to define additional fields not included in the standard card specification extendedfields structure { "card" { "data" [ { … "attributes" { … "extendedfields" [ { "label" "gate", "value" "a12", "entrykey" "gatenumber" }, { "label" "zone", "value" "3", "entrykey" "boardingzone" } ] } } ] } } extendedfields resolution logic if the layout field key does not exist in predefined attributes the system searches attributes extendedfields[] entrykey when a matching entrykey is found value → resolved from extendedfields[] value label → resolved from extendedfields[] label example layout referencing extendedfields … "auxiliary" { “preset” "twofields", "entries" [ { "entryname" "field_01", "entrykey" "gatenumber" }, { "entryname" "field_02", "entrykey" "boardingzone" } ] } … result • gatenumber → value "a12", label "gate" • boardingzone → value "3", label "zone" mapping priority if the same key exists in both • predefined attributes • extendedfields the resolution priority is • attributes predefined fields • extendedfields summary • layout fields reference data by attribute key • standard attributes are resolved first • extendedfields enables user-defined data expansion • layout does not directly contain display value
Develop Smart TV
docimplementing the purchase process this topic describes how to implement a billing system for managing products, sales, and payments, by using samsung checkout in your application related info tizen tv service billing namespace tizen tv service sso namespace implementing the purchase process for web applications samsung checkout dpi portal guide samsung checkout dpi portal samples samsung checkout net application samsung checkout web application implement a billing system for in-app purchases in your application, by using samsung checkout through the dpi service apis and the purchase api and gui prerequisites to implement in-app purchases before you start implementing samsung checkout in your application, start registering your application at the samsung apps tv seller office you do not need to complete the registration with your source code at this point to be able to use the dpi portal, you need to proceed to the second step of the app registration page and set the "billing" field to "use" and the "samsung checkout on tv" field to "yes" you can save the registration at this point and return to it later when your source code is complete for more information, see the samsung checkout dpi portal guide noteto manage your product for billing, go to the samsung checkout dpi portal install the following nuget packages tizen tv tizen tv service billing tizen tv service sso to access the device and user information, and use the methods of the tizen tv service billing and tizen tv service sso namespaces, the application has to request permission by adding the following privileges to the "tizen-manifest xml" file <tizen privilege name="http //developer samsung com/privilege/sso partner"/> <tizen privilege name="http //developer samsung com/privilege/productinfo"/> <tizen privilege name="http //developer samsung com/privilege/billing"/> initialize the required variables retrieve the user id using tizen tv service sso; string uniqueid = "abc";// set an unique id that you can identify your user "abc" is a one of the example for unique custom id you can assign id managed by your service retrieve the country code using tizen tv; string country = environment smarthubconfig country; retrieve the server type using tizen tv; smarthubconfig servertype tvservertype = environment smarthubconfig server; set the service environment using tizen tv; smarthubconfig servertype tvservertype = environment smarthubconfig server; billingrequestservertype servertype; string securitykey; switch tvservertype { case smarthubconfig servertype operating servertype = billingrequestservertype prd; securitykey = "***********"; break; case smarthubconfig servertype developement servertype = billingrequestservertype dev; securitykey = "***********"; break; } dpi service apis the tizen tv service billing namespace enables you to access the apis provided by the dpi service, to manage products and sales generating check values the check value is used by the dpi service to verify purchase list and products list api requests it is a base64 hash generated by applying the hmac sha256 algorithm on a concatenated string of parameters using the dpi security key the application can also use the check value to verify that api response data from the dpi server is legitimate to ensure the data integrity of requests and responses in real time, generate and verify the check value for api requests and responses during runtime notethe dpi security key is used only by samsung smart tv applications for samsung checkout features do not expose this key you can use a key management server for greater security to generate the check value, the following 2 items are used as parameters concatenation of the required parameters for example, "12345"+"123"+"us"+"2"+"1" is concatenated to "12345123us21" the required parameters vary depending on the api dpi security key the dpi security key is issued at the dpi portal to generate the hmac sha256 hash using system; using system security cryptography; private string getcheckvalue string strmsg, string strkey { var encoding = new system text asciiencoding ; byte[] bytekey = encoding getbytes strkey ; byte[] datatohmac = encoding getbytes strmsg ; hmacsha256 hmac = new hmacsha256 bytekey ; return convert tobase64string hmac computehash datatohmac ; } requesting user purchases the purchase list api requests the list of purchased items for a specific user, usually the currently logged-in user the api response identifies whether purchased products have been applied or have been refunded notefor subscription products, the default value of the "appliedstatus" parameter is "true", but the "cancelstatus" parameter does not indicate the refund status in purchase history instead, it indicates the cancellation status for the next subscription cycle the "subsstatus" and "subsendtime" parameters detail the subscription expiration status to call the purchase list api, use the getpurchaselist method using system; using system security cryptography; using tizen tv service billing; using tizen tv service sso; using tizen tv; public void request_purchase_list { billingplugin pibilling = new billingplugin ; pibilling requestapieventhandler += new billingrequestapicallbackeventhandler requestpurchaselistcallbackevent ; string strappid = "**********"; // your application id string struniquecustomid = "abc"; // unique customer id "abc" is a one of the example for unique custom id you can assign id managed by your service string strcountrycode = environment smarthubconfig country; string stritemtype = "2"; string strsecuritykey = "**********"; // your security key issued by dpi portal int ipagenumber = 1; string strcheckvalue = getcheckvalue strappid + struniquecustomid + strcountrycode + stritemtype + ipagenumber, strsecuritykey ; bool bret = pibilling getpurchaselist strappid, struniquecustomid, strcountrycode, ipagenumber, strcheckvalue, servertype ; if bret { // api call success } else { // api call fail } } private string getcheckvalue string strmsg, string strkey { var encoding = new system text asciiencoding ; byte[] bytekey = encoding getbytes strkey ; byte[] datatohmac = encoding getbytes strmsg ; hmacsha256 hmac = new hmacsha256 bytekey ; return convert tobase64string hmac computehash datatohmac ; } private void requestpurchaselistcallbackevent object sender, billingrequestapicallbackeventargs e { // do something } the following tables describe the purchase list api parameters the response data is in json format purchase list api request parameters parameter type mandatory description "appid" string true application id "customid" unique customer idsame value as the "ordercustomid" parameter for the buyitem method "countrycode" country codethe country code must be retrieved from the tv "pagenumber" number requested page numberrange 1~neach purchase record page has up to 100 entries to receive the complete purchase record, post purchase list api requests while increasing the "pagenumber" value, until "eof" is returned in the "cpresult" parameter "checkvalue" string security check valuerequired parameters "appid" + "customid" + "countrycode" + "itemtype" + "pagenumber" "servertype" possible values "dev" staging zone"prd" operating zone table 1 purchase list api request parameters purchase list api response parameters parameter type mandatory description "cpstatus" string true result code “100000” success“errorcode” failure "cpresult" false result message "eof" last page of the purchase history"hasnext true" purchase history has further pages other message corresponding to the "cpstatus" error code "totalcount" number true total number of invoices sum of all purchase history pages, or sum of purchase history in the specified time period "checkvalue" string security check valuerequired parameters "cpstatus" + "cpresult" + "totalcount" + "invoicedetails[0] itemid" + … + "invoicedetails[totalcount] itemid" "invoicedetails" json false invoice information "seq" number true sequence numberrange 1 ~ totalcount "invoiceid" string invoice id "itemid" product id "itemtitle" product name "itemtype" number product type "1" consumable "2" non-consumable "3" limited-period "4" subscription the response "itemtype" value differs from the request "itemtype" value the response value contains more detail "ordertime" string payment time, in 14-digit utc time, for example, "20140314175900" "period" number false limited period product duration, in minutes "price" true product price, in "xxxx yy" format "ordercurrencyid" string currency code "cancelstatus" boolean cancellation status "true" sale canceled "false" sale ongoing for subscription products, indicates the cancellation status for the next subscription cycle "appliedstatus" product application status "true" applied "false" not applied for subscription products, the default value is "true" "appliedtime" string false time product applied, in 14-digit utc time "limitendtime" limited period product end time, in 14-digit utc time for limited period products only "limitendtime" = "appliedtime" + "period" "remaintime" limited period product time remaining, in secondsfor limited period products only "remaintime" = "limitendtime" – request time "subscriptioninfo" json subscription information mandatory for subscription products "subscriptionid" string true subscription id "subsstarttime" subscription start time, in 14-digit utc time "subsendtime" subscription expiry time, in 14-digit utc time "subsstatus" subscription status "00" active"01" subscription expired"02" canceled by buyer"03" canceled for payment failure"04" canceled by cp"05" canceled by admin table 2 purchase list api response parameters requesting products for sale the products list api requests product information from the dpi server when the api is in "show" status, it returns the information for the products on sale this api is generally used to generate a list of buyable products in the application to call the products list api, use the getproductslist method using system; using system security cryptography; using tizen tv service billing; using tizen tv; public void request_product_list { billingplugin pibilling = new billingplugin ; pibilling requestapieventhandler += new billingrequestapicallbackeventhandler requestproductlistcallbackevent ; string strappid = "**********"; // your application id string strcountrycode = environment smarthubconfig country; string strsecuritykey = "**********"; // your security key issued by dpi portal string strcheckvalue = getcheckvalue strappid + strcountrycode, strsecuritykey ; int ipagesize = 100; int ipagenumber = 1; bool bret = pibilling getproductslist strappid, strcountrycode, ipagesize, ipagenumber, strcheckvalue, servertype ; if bret { // api call success } else { // api call fail } } private string getcheckvalue string strmsg, string strkey { var encoding = new system text asciiencoding ; byte[] bytekey = encoding getbytes strkey ; byte[] datatohmac = encoding getbytes strmsg ; hmacsha256 hmac = new hmacsha256 bytekey ; return convert tobase64string hmac computehash datatohmac ; } private void requestproductlistcallbackevent object sender, billingrequestapicallbackeventargs e { // do something after parsing e result jobject productlistobj = jobject parse e result ; jarray jarray = jarray parse productlistobj getvalue "itemdetails" tostring ; productinfos = jarray select p => new productinfo { itemtype = string p["itemtype"], price = string p["price"], itemtitle = string p["itemtitle"], itemid = string p["itemid"], currencyid = string p["currencyid"] } tolist ; } the following tables describe the products list api parameters the response data is in json format products list api request parameters parameter type mandatory description "appid" string true application id "countrycode" country codethe country code must be retrieved from the tv "pagesize" number false requested page sizerange 1~n maximum 100 number of products retrieved per page "pagenumber" requested page numberrange 1~neach purchase record page has a number of entries equal to the "pagesize" value to receive the complete purchase record, post purchase list api requests while increasing the "pagenumber" value, until "eof" is returned in the "cpresult" parameter "checkvalue" string true security check valuerequired parameters "appid" + "countrycode" "servertype" possible values "dev" staging zone"prd" operating zone table 3 products list api request parameters products list api response parameters parameter type mandatory description "cpstatus" string true result code “100000” success“errorcode” failure "cpresult" false result message "eof" last page of the purchase history "hasnext true" purchase history has further pages other message corresponding to the "cpstatus" error code "totalcount" number true total number of invoices sum of all purchase history pages, or sum of purchase history in the specified time period "checkvalue" string security check valuerequired parameters "cpstatus" + "cpresult" + "totalcount" + "invoicedetails[0] itemid" + … + "invoicedetails[totalcount] itemid" "itemdetails" json false invoice information "seq" number true sequence numberrange 1 ~ totalcount "itemid" string product id "itemtitle" product name "itemtype" number product type "1" consumable "2" non-consumable "3" limited-period "4" subscription "period" false limited period product duration, in minutes "price" true product price, in "xxxx yy" format "currencyid" string currency code "subscriptioninfo" json false subscription information mandatory for subscription products "paymentcycleperiod" string true subscription payment period "d" days"w" weeks"m" months "paymentcyclefrq" number payment cycle frequency "paymentcycle" number of payment cycles table 4 products list api response parameters verifying purchases the verify purchase api checks whether a purchase, corresponding to the requested "invoiceid", was successful to call the verify purchase api, use the verifyinvoice method using system; using tizen tv service billing; using tizen tv service sso; using tizen tv; public void request_verify_purchase string strinvoiceid { billingplugin pibilling = new billingplugin ; pibilling requestapieventhandler += new billingrequestapicallbackeventhandler requestverifyinvoicecallbackevent ; string strappid = "**********"; // your application id struniquecustomid = "abc"; // unique customer id "abc" is a one of the example for unique custom id you can assign id managed by your service // strinvoiceid = issued by getpurchaselist string strcountrycode = environment smarthubconfig country; bool bret = pibilling verifyinvoice m_strappid, struniquecustomid, strinvoiceid, strcountrycode, servertype ; if bret { // api call success } else { // api call fail } } private void requestverifyinvoicecallbackevent object sender, billingrequestapicallbackeventargs e { // do something } the following tables describe the verify purchase api parameters the response data is in json format verify purchase api request parameters parameter type mandatory description "appid" string true application id "invoiceid" invoice id "customid" unique customer idsame value as the "ordercustomid" parameter for the buyitem method "countrycode" country codethe country code must be retrieved from the tv "servertype" possible values "dev" staging zone"prd" operating zone table 5 verify purchase api request parameters verify purchase api response parameters parameter type mandatory description "cpstatus" string true result code “100000” success“errorcode” failure "cpresult" false result message "success"other message corresponding to the "cpstatus" error code "appid" true requested application id "invoiceid" requested invoice id table 6 verify purchase api response parameters applying products the apply product api supports product management to help guarantee secure sales of your products normally, the dpi service is notified that the purchased product has been successfully applied the apply product api is used in situations where purchase result delivery to the application encounters issues and is not successful for example, if the network connection is interrupted, the application can fail to receive the "payment complete" message, even though the payment was completed in this situation, the product is not applied to the application you can check for unapplied products using the "appliedstatus" parameter of the purchase list api response and apply the product at that time for subscription products, the product is considered applied at the time of purchase and the "appliedstatus" is set to "true" by default consequently, it is not necessary to check whether a subscription product purchase corresponding to the requested "invoiceid" was successful noteto avoid applying the same product more than once in error, after 3 failed attempts to request the apply product api, wait until the network is reconnected before trying again to call the apply product api, use the applyinvoice method using system; using tizen tv service billing; using tizen tv service sso; using tizen tv; public void request_apply_purchase string strinvoiceid { billingplugin pibilling = new billingplugin ; pibilling requestapieventhandler += new billingrequestapicallbackeventhandler requestapplyinvoicecallbackevent ; string strappid = "**********"; // your application id string struniquecustomid = "abc"; // unique customer id "abc" is a one of the example for unique custom id you can assign id managed by your service // strinvoiceid = issued by getpurchaselist string strcountrycode = environment smarthubconfig country; bool bret = pibilling applyinvoice strappid, struniquecustomid, strinvoiceid, strcountrycode, servertype ; if bret { // api call success } else { // api call fail } } private void requestapplyinvoicecallbackevent object sender, billingrequestapicallbackeventargs e { // do something } the following tables describe the apply product api parameters the response data is in json format apply product api request parameters parameter type mandatory description "appid" string true application id "invoiceid" invoice id "customid" unique customer idsame value as the "ordercustomid" parameter for the buyitem method "countrycode" country codethe country code must be retrieved from the tv "servertype" possible values "dev" staging zone"prd" operating zone table 7 apply purchase api request parameters apply product api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "success"other message corresponding to the "cpstatus" error code "appliedtime" true time product applied, in 14-digit utc time, for example, "20140314175900" table 8 apply product api response parameters canceling subscriptions you can only use the subscription cancel api with subscription products, to request canceling the subscription the dpi server returns the subscription expiry time and the current subscription status to call the subscription cancel api, use the cancelsubscription method using system; using tizen tv service billing; using tizen tv service sso; using tizen tv; public void request_cancel_subscription string strsubscriptionid { billingplugin pibilling = new billingplugin ; pibilling requestapieventhandler += new billingrequestapicallbackeventhandler requestcancelsubscriptioncallbackevent ; string strappid = "**********"; // your application id string struniquecustomid = "abc"; // unique customer id "abc" is a one of the example for unique custom id you can assign id managed by your service // strsubscriptionid = issued by getpurchaselist string strcountrycode = environment smarthubconfig country; bool bret = pibilling cancelsubscription strappid, struniquecustomid, strsubscriptionid, strcountrycode, servertype ; if bret { // api call success } else { // api call fail } } private void requestcancelsubscriptioncallbackevent object sender, billingrequestapicallbackeventargs e { // do something } the following tables describe the subscription cancel api parameters the response data is in json format subscription cancel api request parameters parameter type mandatory description "appid" string true application id "subscriptionid" subscription id "customid" unique customer idsame value as the "ordercustomid" parameter for the buyitem method "countrycode" country codethe country code must be retrieved from the tv "servertype" possible values "dev" staging zone"prd" operating zone table 9 subscription cancel api request parameters subscription cancel api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "success"other message corresponding to the "cpstatus" error code "invoiceid" true invoice id "subscanceltime" false time subscription canceled, in 14-digit utc time, for example, "20140314175900" "subsstatus" subscription status "00" active"01" subscription expired"02" canceled by buyer"03" canceled for payment failure"04" canceled by cp"05" canceled by admin table 10 subscription cancel api response parameters dpi result codes the following table lists result codes and messages that are returned by the dpi service result code result message description 100000 "success" additional messages "hasnext true" product list or purchase history has further pages"eof" last page of the product list or purchase history"your invoice not found" no purchase history exists 400111 "appid not correct" requested application id does not exist table 11 dpi result codes and messages for explanations of additional dpi result codes, at the dpi portal, go to "help > error code" purchase api and gui when the user wants to make a purchase, authenticate the user and show the common purchase gui with the buyitem method of the tizen tv service billing namespace importantwhen the buyitem method is called, the common purchase gui is shown in the application automatically do not change the purchase gui appearance until the purchase transaction is complete and the application receives the response you can customize the product image in samsung checkout by providing the uri to an image on your own content server default image product image table 12 display your own product image to show the common purchase gui, call the buyitem method using system text; using system io; using newtonsoft json; using tizen tv service billing; using tizen tv service sso; using tizen tv; public void request_buy_item { billingplugin pibilling = new billingplugin ; pibilling buyitemeventhandler += new billingclientclosedeventhandler buyitemcallbackevent ; stringbuilder sb = new stringbuilder ; stringwriter sw = new stringwriter sb ; string appid = "**********"; // your application id string uniquecustomid = "abc"; // unique customer id "abc" is a one of the example for unique custom id you can assign id managed by your service billingrequestservertype servertype = getbillingservertype ; using jsonwriter writer = new jsontextwriter sw { writer formatting = formatting indented; writer writestartobject ; writer writepropertyname "ordertotal" ; writer writevalue price ; // issued by getproductlist writer writepropertyname "orderitemid" ; writer writevalue itemid ; // issued by getproductlist writer writepropertyname "ordertitle" ; writer writevalue itemtitle ; // issued by getproductlist writer writepropertyname "ordercurrencyid" ; writer writevalue currencyid ; // issued by getproductlist writer writepropertyname "ordercustomid" ; writer writevalue uniquecustomid ; writer writeendobject ; } bool bret = pibilling buyitem appid, servertype, sb tostring ; if bret { // api call success } else { // api call fail } } private void buyitemcallbackevent object sender, billingclientclosedeventargs e { // do something } private billingrequestservertype getbillingservertype { var tvservertype = environment smarthubconfig server; billingrequestservertype servertype; switch tvservertype { case smarthubconfig servertype operating servertype = billingrequestservertype prd; break; case smarthubconfig servertype developement servertype = billingrequestservertype dev; break; default servertype = billingrequestservertype prd; break; } return servertype; } the buyitem method request and response data are in json format buyitem method request parameters parameter type mandatory description "appid" string true application id "paymentserver" possible values "dev" staging zone "dummy" staging zone with dummy payment "prd" operating zone "paymentdetails" json payment details orderitemid" string true purchase item id, for example, "dp123400000000" "itemid" issued by the products list api "ordertitle" purchase item title"itemtitle" issued by the products list api the length must not exceed 100 characters "ordertotal" total purchase price"price" issued by the products list api when converting the number to string type, pay attention to the unit separators "ordercurrencyid" purchase currency unit"currencyid" issued by the products list api "orderid" false management id for purchases managed by third-party applications "ordercustomid" true unique customer id "orderitempath" false item image uri the image must be in jpeg, jpg, or png format "dynmcproductid" true dynamic products only unique id for dynamic product from a third-party application "dynmcproductinfo" dynamic product item type, such as rental or permanent purchase "dynmcsharecategory" dynamic product share category "dynmctaxcategory" dynamic product tax category "stltappid" false settlement application idfor samsung internal use only do not use table 13 buyitem method request parameters buyitem method response parameters parameter type mandatory description "payresult" string true possible values “success”“failed”“cancel” canceled by the user "paydetail" json false payment details "invoiceid" string false purchased invoice id, for example, "do1904us000007153", this value is only available when payresult is "success" otherwise, you will not get any value for "invoiceid" table 14 buyitem response parameters note "invoiceid" in paydetail is available since tizen 5 0 the “dynamic product” type is also supported on samsung checkout for more information on offering dynamic products in your application, contact a samsung representative by going to "samsung apps tv seller office > support" and creating a "1 1 q&a" support ticket country and currency codes the following table lists countries with their corresponding country code, currency, and currency code country name country code currency currency code aland islands ax euro eur argentina ar argentine peso ars australia au australian dollar aud austria at euro eur belgium be euro eur brazil br brazilian real brl bulgaria bg bulgarian lev bgn canada ca canadian dollar cad chile cl chilean peso clp colombia co colombian peso cop croatia hr croatian kuna hrk czech republic cz czech koruna czk denmark dk danish krone dkk estonia ee euro eur faroe islands fo danish krone dkk finland fi euro eur france fr euro eur germany de euro eur greece gr euro eur greenland gl danish krone dkk guatemala gt guatemalan quetzal gtq guernsey gg british pound gbp hong kong hk hong kong dollar hkd hungary hu hungarian forint huf india in indian rupee inr indonesia id indonesian rupiah idr ireland ie euro eur isle of man im british pound gbp israel il israeli shekel ils italy it euro eur jersey je british pound gbp jordan jo jordanian dinar jod kazakhstan kz kazakhstani tenge kzt korea, republic of kr south korean won krw latvia lv euro eur lithuania lt euro eur luxembourg lu euro eur malaysia my malaysian ringgit myr mexico mx mexican peso mxn netherlands nl euro eur new zealand nz new zealand dollar nzd norway no norwegian krone nok panama pa us dollar usd peru pe peruvian sol pen philippines ph philippine peso php poland pl polish zloty pln portugal pt euro eur romania ro euro eur russia ru russian ruble rub saudi arabia sa saudi riyal sar singapore sg singapore dollar sgd slovakia sk euro eur slovenia si euro eur south africa za south african rand zar spain es euro eur sweden se swedish krona sek switzerland ch swiss franc chf taiwan tw new taiwan dollar twd thailand th thai baht thb turkey tr turkish lira try united arab emirates ae emiriti dirham aed ukraine ua ukrainian hryvnia uah united kingdom gb british pound gbp united states of america us us dollar usd vietnam vn vietnamese dong vnd table 15 country and currency codes
Develop Smart TV
docimplementing the purchase process this topic describes how to implement a billing system for managing products, sales, and payments, by using samsung checkout in your application related info billing api productinfo api sso api implementing the purchase process for tizen net samsung checkout dpi portal guide samsung checkout dpi portal samples samsung checkout web application samsung checkout net application implement a billing system for in-app purchases in your application, by using samsung checkout through the dpi service apis and the billing api prerequisites to implement in-app purchases before you start implementing samsung checkout in your application, start registering your application at the samsung apps tv seller office you do not need to complete the registration with your source code at this point to be able to use the dpi portal, you need to proceed to the second step of the app registration page and set the "billing" field to "use" and the "samsung checkout on tv" field to "yes" you can save the registration at this point and return to it later when your source code is complete for more information, see the samsung checkout dpi portal guide noteto manage your product for billing, go to the samsung checkout dpi portal to use the dpi, billing, productinfo, and sso apis, the application has to request permission by adding the following privileges to the "config xml" file <tizen privilege name="http //developer samsung com/privilege/sso partner"/> <tizen privilege name="http //developer samsung com/privilege/productinfo"/> <tizen privilege name="http //developer samsung com/privilege/billing"/> to use the methods of the billing, productinfo, and sso apis, include the "webapis js" library in the "index html" file <script type='text/javascript' language='javascript' src='$webapis/webapis/webapis js'></script> initialize the required variables retrieve the user id var uniquecustomid = "123"; // unique id for this user "123" is an example value it can be an id managed by your service retrieve the country code var countrycode = webapis productinfo getsystemconfig webapis productinfo productinfoconfigkey config_key_service_country ; set the dpi url and service environment depending on the server type strurldpi = "https //checkoutapi samsungcheckout com/openapi"; strserver = "prd"; strsecuritykey = "********"; dpi service apis you can use the apis provided by the dpi service to manage products and sales the dpi service apis communicate data in json format, using the post method generating check values the check value is used by the dpi service to verify api requests it is a base64 hash generated by applying the hmac sha256 algorithm on a concatenated string of parameters using the dpi security key the application can also use the check value to verify that api response data from the dpi server is legitimate to ensure the data integrity of requests and responses in real time, generate and verify the check value for api requests and responses during runtime notethe dpi security key is used only by samsung smart tv applications for open api calls do not expose this key you can use a key management server for greater security to generate the check value, the following 2 items are used as parameters concatenation of the required parameters for example, "12345"+"123"+"us"+"2"+"1" is concatenated to "12345123us21" the required parameters vary depending on the api dpi security key the dpi security key is issued at the dpi portal you can use any open library to generate the hmac sha256 hash the following example uses the cryptojs library var appid = "1234567890"; // your application id var uniquecustomid = "youruniqueid"; // retrieved during initialization var countrycode = "us"; // retrieved during initialization var itemtype = "2"; // request value for "invoice/list" api var pagenumber = 1; // request value for "invoice/list" api var detailobj = new object ; detailobj appid = appid; // your application id detailobj customid = uniquecustomid; // same value as ordercustomid parameter for buyitem detailobj countrycode = countrycode; // tv country code detailobj itemtype = itemtype; // "2" all items detailobj pagenumber = pagenumber; var reqparams = detailobj appid + detailobj customid + detailobj countrycode + detailobj itemtype + detailobj pagenumber; /* required parameters [invoice/list] request appid + uniquecustomid + countrycode + itemtype + pagenumber [cont/list] request appid + countrycode response cpstatus, cpresult, totalcount, itemid seq */ var hash = cryptojs hmacsha256 reqparams , securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; requesting user purchases the purchase list api "invoice/list" requests the list of purchased items for a specific user, usually the currently logged-in user the api response identifies whether purchased products have been applied or have been refunded notefor subscription products, the default value of the "appliedstatus" parameter is "true", but the "cancelstatus" parameter does not indicate the refund status in purchase history instead, it indicates the cancelation status for the next subscription cycle the "subsstatus" and "subsendtime" parameters detail the subscription expiration status to call the purchase list api // generate checkvalue var reqparams = detailobj appid + detailobj customid + detailobj countrycode + detailobj itemtype + detailobj pagenumber; /* required parameters [invoice/list] request appid + uniquecustomid + countrycode + itemtype + pagenumber [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url urldpi + "/invoice/list", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the purchase list api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 1 purchase list api request headers the purchase list api request and response data are in json format purchase list api request parameters parameter type mandatory description "appid" string true application id "customid" unique customer id same value as the "ordercustomid" parameter for the buyitem method "countrycode" country code the country code must be retrieved from the tv "itemtype" product type "1" non-consumable and limited-period items"2" all items "pagenumber" number requested page number range 1~n each purchase record page has up to 100 entries to receive the complete purchase record, post purchase list api requests while increasing the "pagenumber" value, until "eof" is returned in the "cpresult" parameter "checkvalue" string security check value required parameters "appid" + "customid" + "countrycode" + "itemtype" + "pagenumber" table 2 purchase list api request parameters purchase list api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "eof" last page of the purchase history "hasnext true" purchase history has further pages other message corresponding to the "cpstatus" error code "totalcount" number true total number of invoices sum of all purchase history pages, or sum of purchase history in the specified time period "checkvalue" string security check value required parameters "cpstatus" + "cpresult" + "totalcount" + "invoicedetails[0] itemid" + … + "invoicedetails[totalcount] itemid" "invoicedetails" json false invoice information "seq" number true sequence number range 1 ~ totalcount "invoiceid" string invoice id for products with recurring payments, use the subscription id "itemid" product id "itemtitle" product name "itemtype" number product type "1" consumable "2" non-consumable "3" limited-period "4" subscriptionthe response "itemtype" value differs from the request "itemtype" value the response value contains more detail "ordertime" string payment time, in 14-digit utc time "period" number false limited period product duration, in minutes "price" true original product price, in "xxxx yy" format this is price without promotion "ordercurrencyid" string currency code "cancelstatus" boolean cancelation status "true" sale canceled "false" sale ongoing for subscription products, indicates the cancelation status for the next subscription cycle "appliedstatus" product application status "true" applied "false" not applied for subscription products, the default value is "true" "appliedtime" string false time product applied, in 14-digit utc time "limitendtime" true for limited period products only limited period product end time, in 14-digit utc time if the product has not been applied, "limitendtime" is an empty string "remaintime" limited period product time remaining, in seconds "remaintime" = "limitendtime" – request time if the product has not been applied, "remaintime" is an empty string "subscriptioninfo" json false subscription information mandatory for subscription products "subscriptionid" string true subscription id "subsstarttime" subscription start time, in 14-digit utc time "subsendtime" subscription expiry time, in 14-digit utc time "subsstatus" subscription status "00" active"01" subscription expired"02" canceled by buyer"03" canceled for payment failure"04" canceled by cp"05" canceled by admin"06" canceled by gdpr restriction"07" canceled by withdrawn account"08" canceled by unused account"09" canceled by misused blocked account"10" canceled by banned blocked account "lastpaymentamount" latest payment amount, in "xxxx yy" format "lastpaymenttaxamount" tax amount in the latest payment amount, in "xxxx yy" format "lastpaymenttime" latest payment time, in 14-digit utc time "nextcycletime" next payment time, in 14-digit utc time this is the time calculated based on the billing cycle of the subscription and the subscription start time "nextpaymenttime" next actual payment time, in 14-digit utc time this is the time when the payment is charged to the user's payment method "isfreetrialperiod" boolean whether the subscription is currently in the free trial period "true" in free trial period"false" not in free trial periodif the first payment after the free trial period fails, a second attempt is made the next day, in accordance with samsung policy during this grace period, the value of "isfreetrialperiod" is "true" "countrycode" string base country code for the subscription the value is the country set on the tv when the subscription was started "isflexibleofferapplied" boolean whether the subscription has a flexible offer applied for the next payment "true" has a flexible offer applied "false does not have a flexible offer applied "flexibleofferprice" string false flexible offer price, in "xxxx yy" format "flexibleofferremainingcycle" number number of remaining cycles of a flexible offer applied to current subscription table 3 purchase list api response parameters note14-digit utc time is a time representation format based on utc time it uses the following format yyyymmddhh24miss for example, 20181113095011 requesting products for sale the products list api "cont/list" requests product information from the dpi server when the api is in "show" status, it returns the information for the products on sale this api is generally used to generate a list of buyable products in the application to call the products list api // generate checkvalue var reqparams = detailobj appid + detailobj countrycode; /* required parameters [cont/list] request appid + countrycode [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/cont/list", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the products list api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 4 products list api request headers the products list api request and response data are in json format products list api request parameters parameter type mandatory description "appid" string true application id "countrycode" country code the country code must be retrieved from the tv "productidlist" string[] false list of product ids products in this list are always included in the response even when the product value is "optional" and the product is otherwise not included "pagesize" number false requested page size range 1~n maximum 100 number of products retrieved per page "pagenumber" requested page number range 1~n each purchase record page has a number of entries equal to the "pagesize" value to receive the complete purchase record, post purchase list api requests while increasing the "pagenumber" value, until "eof" is returned in the "cpresult" parameter "checkvalue" string true security check value required parameters "appid" + "countrycode" table 5 products list api request parameters products list api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "eof" last page of the purchase history "hasnext true" purchase history has further pages other message corresponding to the "cpstatus" error code "totalcount" number true total number of invoices sum of all purchase history pages, or sum of purchase history in the specified time period "checkvalue" string security check value required parameters "cpstatus" + "cpresult" + "totalcount" + "invoicedetails[0] itemid" + … + "invoicedetails[n] itemid" "itemdetails" json false invoice information "seq" number true sequence number range 1 ~ totalcount "itemid" string product id "itemtitle" product name "itemtype" number product type "1" consumable "2" non-consumable "3" limited-period "4" subscription "ordertime" string payment time, in 14-digit utc time "period" number false limited period product duration, in minutes "price" number true product price, in "xxxx yy" format if the product is running a flexible offer, the promotion price is shown during the promotion period, otherwise, the original price is shown "originalprice" original product price, in "xxxx yy" format this field enables you to keep track of the original price during a flexible offer, when the "price" field is changed to the promotion price during the promotion period, if buyitem is called using the original price, eligible users still pay the promotion price "currencyid" string currency code "subscriptioninfo" json false subscription information mandatory for subscription products "paymentcycleperiod" string true subscription payment period "w" weeks"m" months"y" years "paymentcyclefrq" number payment cycle frequency "paymentcycle" number of payment cycles "freetrialdaycount" number of free trial days for the product table 6 products list api response parameters verifying purchases the verify purchase api "invoice/verify" checks whether a purchase, corresponding to the requested "invoiceid", was successful to call the verify purchase api /* required parameters [invoice/verify] request */ var detailobj = new object ; detailobj appid = appid; // your application id detailobj invoiceid = uncanceleditems[key] invoiceid; // issued by "invoice/list" detailobj customid = uniquecustomid; // same value as ordercustomid parameter for buyitem detailobj countrycode = countrycode; // tv country code var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/invoice/verify", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the verify purchase api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 7 verify purchase api request headers the verify purchase api request and response data are in json format verify purchase api request parameters parameter type mandatory description "appid" string true application id "invoiceid" invoice id "customid" unique customer id same value as the "ordercustomid" parameter for the buyitem method "countrycode" country code the country code must be retrieved from the tv table 8 verify purchase api request parameters verify purchase api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "success"other message corresponding to the "cpstatus" error code "appid" true requested application id "invoiceid" requested invoice id table 9 verify purchase api response parameters applying products the apply product api "invoice/apply" supports product management to help guarantee secure sales of your products normally, the dpi service is notified that the purchased product has been successfully applied the apply product api is used in situations where purchase result delivery to the application encounters issues and is not successful for example, if the network connection is interrupted, the application can fail to receive the "payment complete" message, even though the payment was completed in this situation, the product is not applied to the application you can check for unapplied products using the "appliedstatus" parameter of the purchase list api response and apply the product at that time for subscription products, the product is considered applied at the time of purchase and the "appliedstatus" is set to "true" by default consequently, it is not necessary to check whether a subscription product purchase corresponding to the requested "invoiceid" was successful noteto avoid applying the same product more than once in error, after 3 failed attempts to request the apply product api, wait until the network is reconnected before trying again to call the apply product api /* required parameters [invoice/apply] request */ var detailobj = new object ; detailobj appid = appid; // your application id detailobj invoiceid = uncanceleditems[key] invoiceid; // issued by "invoice/list" detailobj customid = uniquecustomid; // same value as ordercustomid parameter for buyitem detailobj countrycode = countrycode; // tv country code var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/invoice/apply", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the apply product api has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 10 apply purchase api request headers the apply product api request and response data are in json format apply product api request parameters parameter type mandatory description "appid" string true application id "invoiceid" invoice id "customid" unique customer id same value as the "ordercustomid" parameter for the buyitem method "countrycode" country code the country code must be retrieved from the tv table 11 apply purchase api request parameters apply product api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "success"other message corresponding to the "cpstatus" error code "appliedtime" true time product applied, in 14-digit utc time table 12 apply product api response parameters modifying subscription plans retrieve changeable products the subscription plan changeable products api "/subscription/plan-change/changeable-products" retrieves the list of products that a user's subscription can be changed to to call the subscription plan changeable products api // generate checkvalue var reqparams = detailobj appid + detailobj subscriptionid + detailobj timestamp; /* required parameters [subscription/plan-change/changeable-products] request appid + subscriptionid + timestamp [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/subscription/plan-change/changeable-products", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the subscription plan changeable products api has the following request headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 13 subscription plan changeable products api request headers the subscription plan changeable products api request and response data are in json format subscription plan changeable products api request parameters parameter type mandatory description "appid" string true application id "subscriptionid" subscription id "productidlist" string[] false list of product ids products in this list are always included in the response even when the product value is "optional" and the product is otherwise not included "timestamp" string true timestamp format "yyyy-mm-dd hh mm ss" the time is in utc time and must be within 10 minutes from the current time "checkvalue" security check value required parameters "appid" + "subscriptionid" + "timestamp" table 14 subscription plan changeable products api request parameters subscription plan changeable products api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "eof" last page of the purchase history "hasnext true" purchase history has further pages other message corresponding to the "cpstatus" error code "changeableproducts" json true list of changeable products "seq" number true sequence number range 1 ~ totalcount "itemid" string product id "itemtitle" product name "itemtype" number product type "1" consumable "2" non-consumable"3" limited-period "4" subscription the response "itemtype" value differs from the request "itemtype" value the response value contains more detail "period" number false limited period product duration, in minutes "price" true product price, in "xxxx yy" format if the product is running a flexible offer, the promotion price is shown during the promotion period, otherwise, the original price is shown "originalprice" original product price, in "xxxx yy" format this field enables you to keep track of the original price during a flexible offer, when the "price" field is changed to the promotion price "currencyid" string currency code "subscriptioninfo" json false subscription product information "productgroupid" string true subscription product group id "productlevel" number product level in the subscription product group "paymentcycleperiod" string subscription payment period "w" weeks"m" months"y" years "paymentcyclefrq" number payment cycle frequency "paymentcycle" number of payment cycles "freetrialdaycount" number of free trial days for the product table 15 subscription plan changeable products api response parameters pre-check subscription plan changes the subscription plan change pre-check api "subscription/plan-change/pre-check" allows you to preview the impact of switching subscription products to call the subscription plan change pre-check api // generate checkvalue var reqparams = detailobj appid + detailobj subscriptionid + detailobj afterproductid + detailobj timestamp; /* required parameters [subscription/plan-change/pre-check] request appid + subscriptionid + afterproductid + timestamp [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/subscription/plan-change/pre-check", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the subscription plan change pre-check api has the following request headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 16 subscription plan change pre-check api request headers the subscription plan change pre-check api request and response data are in json format subscription plan change pre-check api request parameters parameter type mandatory description "appid" string true application id "subscriptionid" subscription id "afterproductid" product id of the new product "timestamp" timestamp format "yyyy-mm-dd hh mm ss" the time is in utc time and must be within 10 minutes from the current time "checkvalue" security check value required parameters "appid" + "subscriptionid" + "afterproductid" + "timestamp" table 17 subscription plan change pre-check api request parameters subscription plan change pre-check api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" result message "success"other message corresponding to the "cpstatus" error code "currentproductname" name of the current subscription product "currentbenefit" json false information about the current benefit mandatory if a benefit is active "type" string true benefit type free_trialcoupon "freetrialdays" integer number of free trial days for the product if a free trial is not active, the value is '0' "couponname" string false name of the coupon applied to the product "enddate" true end date of the free trial or coupon benefit format "yyyy-mm-dd" "afterproductname" string true name of the new product "afterproductprice" price of the new product "afterproductpricetaxincluded" boolean whether the new product price includes tax "true" includes tax"false" does not include tax "afterproductfirstpaymentdate" string estimated date for the first payment on the new product format "yyyy-mm-dd" the date takes into account any free trial days for the new product and, except for subscription upgrades, any benefit period currently active "productcurrencycode" currency code "daysuntilfirstpaymentdate" integer false number of days the upgraded product can be used without additional payment incudes any free trial days for the upgraded product if a free trial period is currently active, the value is '0' and no free trial benefits of the upgraded product are returned mandatory for subscription upgrades "afterproductflexibleofferprice" string flexible offer price of the new product "afterproductflexibleoffercycle" integer number of benefit cycles a flexible offer is applied to the new product "currentproductflexibleofferapplied" boolean true whether the current product has a flexible offer applied "true" has a flexible offer applied"false" does not have a flexible offer applied "currentproductflexibleofferremainingcycle" integer false number of remaining benefit cycles of the current product's flexible offer mandatory when "currentproductflexibleofferapplied" is "true" table 18 subscription plan change pre-check api response parameters reserve subscription plan changes you can use the subscription plan change reserve api "subscription/plan-change/reserve" to request changing the customer's subscription plan to call the subscription plan change reserve api // generate checkvalue var reqparams = detailobj appid + detailobj subscriptionid + detailobj afterproductid + detailobj timestamp; /* required parameters [subscription/plan-change/reserve] request appid + subscriptionid + afterproductid + timestamp [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/subscription/plan-change/reserve", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the subscription plan change reserve api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 19 subscription plan change reserve api request headers the subscription plan change reserve api request and response data are in json format subscription plan change reserve api request parameters parameter type mandatory description "appid" string true application id "subscriptionid" subscription id "afterproductid" product id of the new product "timestamp" timestamp format "yyyy-mm-dd hh mm ss" the time is in utc time and must be within 10 minutes from the current time "checkvalue" security check value required parameters "appid" + "subscriptionid" + "afterproductid" + "timestamp" "maillang" false iso 639-1 language code in lowercase for the language of messages sent to the user for unsupported languages, use "en" the default value is "en" table 20 subscription plan change reserve api request parameters subscription plan change reserve api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" result message "success"other message corresponding to the "cpstatus" error code "currentproductname" name of the current subscription product "currentbenefit" json false information about the current benefit mandatory if a benefit is active "type" string true benefit type free_trialcoupon "freetrialdays" integer number of free trial days for the product if a free trial is not active, the value is '0' "couponname" string false name of the coupon applied to the product "enddate" true end date of the free trial or coupon benefit format "yyyy-mm-dd" "afterproductname" string true name of the new product "afterproductprice" price of the new product "afterproductpricetaxincluded" boolean whether the new product price includes tax "true" includes tax"false" does not include tax "afterproductfirstpaymentdate" string estimated date for the first payment on the new product format "yyyy-mm-dd" the date takes into account any free trial days for the new product and, except for subscription upgrades, the benefit period currently active "productcurrencycode" currency code "daysuntilfirstpaymentdate" integer false number of days the upgraded product can be used without additional payment includes any free trial days for the upgraded product if a free trial period is currently active, the value is '0' and no free trial benefits of the upgraded product are returned mandatory for subscription upgrades "afterproductflexibleofferprice" string flexible offer price of the new product "afterproductflexibleoffercycle" integer number of benefit cycles a flexible offer is applied to the new product "currentproductflexibleofferapplied" boolean true whether current product has a flexible offer applied "true" has a flexible offer applied"false" does not have a flexible offer applied "currentproductflexibleofferremainingcycle" integer false number of remaining benefit cycles of the current product's flexible offer mandatory when "currentproductflexibleofferapplied" is "true" table 21 subscription plan change reserve api response parameters retrieve subscription plan change reservation status the subscription plan change reservation status api "subscription/plan-change/reserve-status" retrieves the status of any requested subscription changes for a list of subscriptions or customers to call the subscription plan change reservation status api // generate checkvalue var reqparams = detailobj appid; for let subscriptionid of detailobj subscriptionidlist { reqparams += subscriptionid; } for let customid of detailobj customidlist { reqparams += customid; } reqparams += detailobj timestamp; /* required parameters [subscription/plan-change/reserve-status] request appid + subscriptionidlist[0] + + subscriptionidlist[n] + customidlist[0] + + customidlist[n] + timestamp [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/subscription/plan-change/reservation-status", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the subscription plan change reservation status api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 22 subscription plan change reservation status api request headers the subscription plan change reservation status api request and response data are in json format subscription plan change reservation status api request parameters parameter type mandatory description "appid" string true application id "subscriptionidlist" string[] false list of subscription ids at least one of 'subscriptionidlist' or 'customidlist' must be provided "customidlist" list of unique customer ids at least one of 'subscriptionidlist' or 'customidlist' must be provided "timestamp" string true timestamp format "yyyy-mm-dd hh mm ss" the time is in utc time and must be within 10 minutes from the current time "checkvalue" security check value required parameters "appid" + "subscriptionidlist[0]" + … + "subscriptionidlist[n]" + "customidlist[0]" + … + "customidlist[n]" + "timestamp" table 23 subscription plan change reservation status api request parameters subscription plan change reservation status api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" result message "success"other message corresponding to the "cpstatus" error code "reservedsubscriptions" json[] false list of subscriptions with pending changes "subscription id" string true subscription id "customid" unique customer id "afterproductid" product id of the new product "afterproductname" name of the new product "applydate" estimated date when the new product is applied format "yyyy-mm-dd" table 24 subscription plan change reservation status api response parameters cancel subscription plan change reservations the subscription plan change cancel api "subscription/plan-change/cancel" cancels a requested subscription product change to call the subscription plan change cancel api // generate checkvalue var reqparams = detailobj appid + detailobj subscriptionid + detailobj timestamp; /* required parameters [subscription/plan-change/cancel] request appid + subscriptionid + timestamp [checkvalue] required */ var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/subscription/plan-change/cancel", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the subscription plan change cancel api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 25 subscription plan change cancel api request headers the subscription plan change cancel api request and response data are in json format subscription plan change cancel api request parameters parameter type mandatory description "appid" string true application id "subscriptionid" subscription id "timestamp" timestamp format "yyyy-mm-dd hh mm ss" the time is in utc time and must be within 10 minutes from the current time "checkvalue" security check value required parameters "appid" + "subscriptionid" + "timestamp" "maillang" false iso 639-1 language code in lowercase for the language of messages sent to the user for unsupported languages, use "en" the default value is "en" table 26 subscription plan change cancel api request parameters subscription plan change cancel api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" result message "success"other message corresponding to the "cpstatus" error code table 27 subscription plan change cancel api response parameters canceling subscriptions you can only use the subscription cancel api "subscription/cancel" with subscription products, to request canceling the subscription the dpi server returns the subscription expiry time and the current subscription status to call the subscription cancel api /* required parameters [subscription/cancel] request */ var detailobj = new object ; detailobj appid = appid; // your application id detailobj invoiceid = uncanceleditems [key] invoiceid; // issued by "invoice/list" detailobj customid = uniquecustomid; // same value as ordercustomid parameter for buyitem detailobj countrycode = countrycode; // tv country code var paymentdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/subscription/cancel", type "post", contenttype "application/json;charset=utf-8", datatype "json", data paymentdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the subscription cancel api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8""application/x-www-form-urlencoded"for the "x-www-form-urlencoded" data type, the request body must not contain any spaces ' ' "accept" media type accepted by the client "application/json;charset=utf-8" table 28 subscription cancel api request headers the subscription cancel api request and response data are in json format subscription cancel api request parameters parameter type mandatory description "appid" string true application id "invoiceid" invoice id "customid" unique customer id same value as the "ordercustomid" parameter for the buyitem method "countrycode" country code the country code must be retrieved from the tv table 29 subscription cancel api request parameters subscription cancel api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" false result message "success"other message corresponding to the "cpstatus" error code "invoiceid" true invoice id "subscanceltime" false time subscription canceled, in 14-digit utc time "subsstatus" subscription status "02" canceled by buyer table 30 subscription cancel api response parameters checking billing service availability the billing service available country check api "/country/checkavailability" retrieves billing service availability information for the specified country codes to call the billing service available country check api /* required parameters [country/checkavailability] request appid + countrycodes + checkvalue */ var detailobj = new object ; detailobj appid = appid; // your application id detailobj countrycodes = countrycodes; // tv country codes to be checked you can check multiple codes var reqparams = detailobj appid + detailobj countrycodes; var hash = cryptojs hmacsha256 reqparams, securitykey ; var checkvalue = cryptojs enc base64 stringify hash ; detailobj checkvalue = checkvalue; var countrycheckdetails = json stringify detailobj ; // call api $ ajax { url strurldpi + "/country/checkavailability", type "post", contenttype "application/json;charset=utf-8", datatype "json", data countrycheckdetails, timeout 10000, success function res { // for implementation details, see the samsung checkout sample application console log "success " + json stringify res ; }, error function jqxhr, ajaxoptions, thrownerror, request, error { console log "[error] thrownerror "+thrownerror+";error "+error+";[message] "+jqxhr responsetext ; }, complete function { console log "complete" ; }, failure function { console log "failure" ; } } ; the billing service available country check api request has the following headers header mandatory description "content-type" true media type of the message "application/json;charset=utf-8" "accept" media type accepted by the client "application/json" table 31 billing service available country check api request headers the billing service available country check api request and response data are in json format billing service available country check api request parameters parameter type mandatory description "appid" string true application id "countrycodes" country codes in uppercase for the regions to be checked you can check multiple regions with a comma-separated list, for example, "de,us,kr" "checkvalue" security check value required parameters "appid" + "countrycodes" for multiple country codes, remove the commas for example, if "countrycodes" is "de,us,kr", use "deuskr" to generate the check value table 32 billing service available country check api request parameters billing service available country check api response parameters parameter type mandatory description "cpstatus" string true result code "100000" success"errorcode" failure "cpresult" result message "success"other message corresponding to the "cpstatus" error code "countries" json false country information "countrycode" string true country code "isbillingsupported" boolean billing service support status "true" billing service supported"false" billing service not supported table 33 billing service available country check api response parameters billing api to implement the samsung checkout functionality, use the billing api when the user wants to make a purchase, authenticate the user and show the common purchase gui with the buyitem method importantwhen the buyitem method is called, the common purchase gui is shown in the application automatically do not change the purchase gui appearance until the purchase transaction is complete and the application receives the response you can customize the product image in samsung checkout by providing the uri to an image on your own content server to implement samsung checkout var detailobj = new object ; detailobj orderitemid = productslist itemdetails[selecteditem] itemid; // issued by "cont/list" detailobj ordertitle = productslist itemdetails[selecteditem] itemtitle; // issued by "cont/list" detailobj ordertotal = productslist itemdetails[selecteditem] price tostring ; // change data type to string detailobj ordercurrencyid = productslist itemdetails[selecteditem] currencyid; //detailobj orderid = "your_order_id"; // this value is optional var uniquecustomid = "123"; // unique id for this user "123" is an example value it can be an id managed by your service detailobj ordercustomid = uniquecustomid; // same value as "customid" parameter for "invoice/list" var paymentdetails = json stringify detailobj ; webapis billing buyitem appid, servertype, paymentdetails, function data { // for implemention details, see the samsung checkout sample application console log "[billing buyitem] pay_result [" + data payresult + "], pay_detail [" + data paydetail + "]" ; }, function error { console log "[billing buyitem] status [" + error code + "] errorname [" + error name + "] errormessage [" + error message + "]" ; } ; the buyitem method request and response data are in json format buyitem method request parameters parameter type mandatory maximum length characters description "appid" string true 30 application id provided by the samsung apps tv seller office "paymentserver" - possible values "prd" operating zone "paymentdetails" json payment details "orderitemid" string true 30 purchase item id, for example, "dp123400000000" "itemid" issued by the products list api for dynamic products, use this value as "productid" for the verify dynamic product information api "ordertitle" 100 purchase item title "itemtitle" issued by the products list api for dynamic products, use a customized value "ordertotal" 20 total purchase price "price" issued by the products list api when converting the number to string type, pay attention to the unit separators for dynamic products, use a customized value and use it as "productprice" for the verify dynamic product information api "ordercurrencyid" 10 purchase currency unit "currencyid" issued by the products list api "orderid" false 50 management id for purchases managed by third-party applications "ordercustomid" false 100 unique customer id "orderitempath" false - item image uri the image must be in jpeg, jpg, or png format "dynmcproductid" true for dynamic products only 100 unique id for the dynamic product from a third-party application use this value as "dynmcproductid" for the verify dynamic product information api "dynmcproductinfo" false dynamic product item type, such as rental or permanent purchase for dynamic products only "dynmcsharecategory" 20 share category for dynamic products only "dynmctaxcategory" 30 tax category for dynamic products only "stltappid" settlement application id for samsung internal use only do not use table 34 buyitem request parameters buyitem method response parameters parameter type mandatory description "payresult" string true possible values "success""failed""cancel" canceled by the user "paydetail" json false payment details "invoiceid" string false purchased invoice id, for example, "do1904us000007153" a value is only returned when "payresult" is "success" table 35 buyitem response parameters note dynamic products are also supported by samsung checkout for more information on offering dynamic products in your application, contact a samsung representative by going to "samsung apps tv seller office > support" and creating a "1 1 q&a" support ticket verifying dynamic product information the verify dynamic product information api "cp/verify" is only available when the product type is dynamic product the api checks the dynamic product information between dpi server and cp cms the dpi server calls this api when "verification" is selected in the dpi portal api url operating zone prd the "verify uri" entered in the dpi portal for the operating zone post https //xxxxxxxx com/xxxx/cp/verify http/1 1 accept-encoding gzip,deflate content-type application/json;charset=utf-8 accept application/json;charset=utf-8 content-length 391 host xxxx com connection keep-alive user-agent apache-httpclient/4 1 1 java 1 5 { "countrycode" "es", "ordertime" "20181017213438", "checkvalue" "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "productdetail" { "appid" "3201505000000", "productid" "rent_prod", "productprice" "1 58", "productcurrencycode" "usd", "ordercustomid" "xxxxxxxx", "dynmcproductid" "rent_option_4537", "dynmcproductinfo" "rent_option_4537" } } verify dynamic product information api request parameters parameter type mandatory maximum length characters description "countrycode" string true 10 country code in uppercase "ordertime" 20 order time utc-0 20140314175900 "checkvalue" 200 security check value required parameters "appid" + "dynmcproductid" + "productid" + "productprice" + "productcurrencycode" "productdetail" json - product details "appid" string true 30 application id same value as the "appid" parameter for the buyitem method "productid" purchase item id same value as the "orderitemid" parameter for the buyitem method "productprice" 10 purchase price unit price same value as the "ordertotal" parameter for the buyitem method "productcurrencycode" currency code same value as the "ordercurrencyid" parameter for the buyitem method "ordercustomid" false 100 unique customer id same value as the "ordercustomid" parameter for the buyitem method "dynmcproductid" true unique id or string to track the product from the third-party application same value as the "dynmcproductid" parameter for the buyitem method "dynmcproductinfo" false dynamic product information same value as the "dynmcproductinfo" parameter for the buyitem method "dynmcsharecategory" 20 share category for the dynamic product same value as the "dynmcsharecategory" parameter for the buyitem method "dynmctaxcategory" 30 tax category for the dynamic product same value as the "dynmctaxcategory" parameter for the buyitem method table 36 verify dynamic product information api request parameters verify dynamic product information api response parameters parameter type mandatory length description "status" string true 9 result code "100000" success"errorcode" failurefor error code details, see the embedded error code file "result" 100 result message to be displayed "success" or other short error message "resultlongmesg" false 200 detailed error message when debug mode is active table 37 verify dynamic product information api response parameters dpi result codes the following table lists result codes and messages that are returned by the dpi service result code result message description 100000 "success" additional messages "hasnext true" product list or purchase history has further pages"eof" last page of the product list or purchase history"your invoice not found" no purchase history exists 400111 "appid not correct" requested application id does not exist table 38 dpi result codes and messages for explanations of additional dpi result codes, at the dpi portal, go to "help > error code" country and currency codes the following table lists countries with their corresponding country code, currency, and currency code country name country code iso3166-1 alpha-2 currency currency code iso 4217 aland islands ax euro eur albania al united states dollar usd algeria dz algerian dinar dzd argentina ar argentinian peso ars australia au australian dollar aud austria at euro eur bahrain bh bahraini dinar bhd belarus by belarusian ruble byn belgium be euro eur bolivia bo united states dollar usd bosnia and herzegovina ba united states dollar usd brazil br brazilian real brl bulgaria bg bulgarian lev bgn canada ca canadian dollar cad chile cl chilean peso clp colombia co colombian peso cop costa rica cr united states dollar usd croatia hr euro eur czechia cz czech koruna czk denmark dk danish krone dkk dominican republic do united states dollar usd ecuador ec united states dollar usd egypt eg egyptian pound egp estonia ee euro eur faroe islands fo danish krone dkk finland fi euro eur france fr euro eur germany de euro eur greece gr euro eur greenland gl danish krone dkk guatemala gt guatemalan quetzal gtq guernsey gg british pound gbp hong kong hk hong kong dollar hkd hungary hu hungarian forint huf iceland is united states dollar usd india in indian rupee inr indonesia id indonesian rupiah idr iraq iq iraqi dinar iqd ireland ie euro eur isle of man im british pound gbp israel il israeli shekel ils italy it euro eur jersey je british pound gbp jordan jo jordanian dinar jod kazakhstan kz kazakhstani tenge kzt korea, republic of kr south korean won krw kuwait kw kuwaiti dinar kwd kyrgyzstan kg united states dollar usd latvia lv euro eur lebanon lb lebanese pound lbp libya ly libya dinar lyd lithuania lt euro eur luxembourg lu euro eur malaysia my malaysian ringgit myr mexico mx mexican peso mxn moldova md united states dollar usd mongolia mn united states dollar usd montenegro me united states dollar usd morocco ma moroccan dirham mad netherlands nl euro eur new zealand nz new zealand dollar nzd north macedonia mk united states dollar usd norway no norwegian krone nok oman om omani rial omr pakistan pk united states dollar usd panama pa united states dollar usd peru pe peruvian sol pen philippines ph philippine peso php poland pl polish zloty pln portugal pt euro eur qatar qa qatari riyal qar romania ro euro eur russian federation ru russian ruble rub saudi arabia sa saudi rial sar serbia rs serbian dinar rsd singapore sg singapore dollar sgd slovakia sk euro eur slovenia si euro eur south africa za south african rand zar spain es euro eur sweden se swedish krona sek switzerland ch swiss franc chf taiwan tw new taiwan dollar twd tajikistan tj united states dollar usd thailand th thai baht thb tunisia tn tunisian dinar tnd türkiye tr turkish lira try turkmenistan tm united states dollar usd ukraine ua ukrainian hryvna uah united arab emirates ae united arab emirates dirham aed united kingdom gb british pound gbp united states us united states dollar usd uzbekistan uz united states dollar usd venezuela ve united states dollar usd vietnam vn vietnamese dong vnd yemen ye yemeni rial yer table 39 country and currency codes
Develop Smart Hospitality Display
docweb app html5 flash storage optimization guide terminology here, "flash" means the device's flash memory storage where the app is installed and stored it has nothing to do with adobe flash nature of this document this is a best-practice guide it is not intended to mandate compliance or to trigger any action based on compliance — use it as a reference for better app quality and user experience contents why storage size optimization matters what takes up space minimize bundle code size with build options image & graphics asset optimization fonts & other assets what not to bundle managing storage that accumulates after install 1 why storage size optimization matters a tv's flash storage is limited and shared by the system and many apps a large app package causes the following problems installs/updates are slower and more likely to fail the larger the size, the longer the download/write, and installs/updates can fail when storage is tight it pressures storage when one app takes a lot of space, there's less room for other apps to install and less system cache space, degrading the whole device's usability it leads to loading cost larger code/assets increase parse/decode load, lengthening startup and affecting ram usage too the problem doesn't end at install time the cache/stored data the app creates while running occupies the same flash even if you make the package small, occupied space keeps growing if you don't manage this conversely, keeping the app small makes installs/updates fast, reduces download traffic, frees storage, and improves startup performance core principle ① don't ship what you don't need · ② ship what you do need in its smallest form · ③ manage what accumulates after install · ④ automate this in your build pipeline if you rely on doing it by hand every time, something will always slip through this document is a companion to the memory optimization guide, which covers ram runtime memory making assets smaller reduces not only storage but also the runtime memory spent on decoding/parsing 2 what takes up space first, understand what dominates your app package's size usually the order of magnitude is as follows asset description main way to reduce images backgrounds, posters, icons, sprites resize · lightweight formats · compression section 4 javascript/css bundle app code + libraries minify · tree-shaking · dependency diet section 3 fonts web fonts especially cjk subset · woff2 section 5 local media intro videos, sound effects, etc minimize · compress · switch to streaming section 5 other data json and static files bundled in minimize · move to runtime fetch section 5 files that tag along source maps, tests/mocks, original images, unused assets exclude from packaging section 6 measure first use a bundle analyzer to see with your own eyes which modules/assets take up space before you touch anything bundle analysis webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer file assets sort your build output dist directory by file size and review the biggest first final package record the package size for each release to keep a trend this value directly determines the space it takes on the device often a handful of large items account for most of the size before polishing many small ones, it's more efficient to handle the largest assets first 3 minimize bundle code size with build options the javascript/css you load takes storage by itself most popular bundlers/frameworks provide size optimization by default in their production build, so simply turning the options on correctly yields a big win option names and defaults change between tool versions the config examples below are meant to convey the gist when applying them for real, check the current version's options in the official docs linked at the end of each subsection 3 1 common principles regardless of framework always ship a production build development builds include warnings, debug code, and source maps, which are large minify js with terser/esbuild, css with cssnano/esbuild — strip whitespace/comments and shorten identifiers tree-shaking remove unused code works well only with es modules import/export choose libraries that support tree-shaking esm, sideeffects false remove unused css use purgecss, or the purge/content settings of frameworks like tailwind, to drop classes you don't use exclude source maps from the package source map files are very large don't include them in the shipped package; store them separately if needed dependency diet don't pull in a heavy library whole for one or two features; use only the parts you need, or consider a lighter alternative or your own implementation also remove duplicate dependencies that do the same thing don't let multiple versions of the same library get bundled together as the dependency tree deepens, it's common for two or three different versions of the same library to be included check for duplicate versions with npm ls <package>, and unify versions dedupe, overrides/resolutions so only one copy remains verify with a bundle analyzer don't inline images as base64 base64 is about 33% larger than the raw bytes, and when mixed into a js/css bundle it also lives in runtime memory as a string set the bundler's inline threshold small or 0 and keep images as separate files webpack rule parser dataurlcondition maxsize, vite build assetsinlinelimit avoid excessive transpilation/polyfills lowering syntax the target platform already supports down-leveling needlessly grows the code set your build target to the target environment set a size budget and enforce it in the build define a baseline for total output size so the build warns/fails when exceeded — this structurally blocks size regressions size-limit, bundlesize; angular has built-in budgets — see 3 6 know precisely — the scope of code splitting splitting code per screen with dynamic import benefits initial load time and runtime memory, but does not reduce the total amount of code bundled into the package what reduces storage total size is tree-shaking, minify, removing dependencies, and removing unused css apply the two separately 3 2 webpack mode 'production' auto-enables terser minification, tree-shaking, scope hoisting optimization usedexports, optimization minimize true css css-minimizer-webpack-plugin analysis webpack-bundle-analyzer // webpack config js essentials module exports = { mode 'production', // apply production optimizations at once devtool false, // keep source maps out of the package optimization { usedexports true, // tree-shaking minimize true, // terser minification splitchunks { chunks 'all' }, // split common modules dedupe }, module { rules [ { test /\ png|jpe?g|webp|svg $/i, type 'asset/resource', // output as separate files, no base64 inlining }, ], }, }; official docs production · tree shaking 3 3 vite / rollup a vite production build vite build performs minify + tree-shaking by default build sourcemap false to exclude source maps build minify esbuild by default, or terser , build rollupoptions output manualchunks to shape chunks analysis rollup-plugin-visualizer // vite config js essentials export default { build { minify 'esbuild', // fast, strong minification sourcemap false, // exclude source maps from the package cssminify true, assetsinlinelimit 0, // disable base64 image inlining rollupoptions { output { manualchunks { vendor ['large-shared-library'] } }, }, }, }; official docs vite — building for production · rollup — configuration options 3 4 react always ship a production build node_env=production — development builds include warnings and validation code and are large keep dev-only tools tests, mocks, debug panels out of the production bundle if the runtime weight is a burden, consider an interface-compatible lightweight alternative e g , the preact family use react lazy + suspense for per-screen splitting benefits initial load/memory — see the note in 3 1 for the total-size perspective official docs build a react app from scratch 3 5 vue the production build removes development warnings and hints sfcs vue and <script setup> reduce unnecessary code at compile time reduce unused global component/plugin registrations, and import in a tree-shakable form official docs production deployment 3 6 angular build with the production configuration aot compilation and the build optimizer are enabled by default set bundle budgets so the build warns/fails when size exceeds a threshold, preventing size regressions // angular json essentials — cap bundle size "budgets" [ { "type" "initial", "maximumwarning" "500kb", "maximumerror" "1mb" } ] official docs building angular apps includes size budget configuration 4 image & graphics asset optimization images usually account for the largest share of an app package the key is to not create images you don't need, keep only one copy of what you do need, size it to the minimum needed for display, use the most efficient format, and compress it as much as possible the impact shrinks toward the bottom, so apply these from the top down 4 1 first, check whether it needs to be an image at all the smallest image is no image the following need no file at all if drawn with css or code solid/gradient backgrounds → background-color, linear-gradient rounded corners/borders/shadows → border-radius, border, box-shadow dividers/dotted lines → border, outline repeating patterns → repeating-linear-gradient simple shapes circles, triangles, badge backgrounds, ribbons → css or inline svg gauges/progress bars/simple charts → draw with css or canvas /* css instead of an image gradient background + rounded corners + shadow */ poster-overlay { background linear-gradient to top, rgba 0, 0, 0, 8 , transparent ; border-radius 8px; box-shadow 0 4px 12px rgba 0, 0, 0, 4 ; } it's common to turn a design mockup into a file just because it arrived as an image go through your asset list and ask "can this be done with css?" for each one not only does size drop, but color/size changes become easier too 4 2 keep one copy of an asset and handle variants with code keeping color/direction/state variants of the same graphic as separate files multiplies the asset count handle variants with css color variants → keep svg with fill="currentcolor" and control via css color for raster icons, use mask-image + background-color, or filter direction variants → don't keep left/right arrows as two files; use transform scalex -1 , and rotate 180deg for up/down rtl layout support works the same way state variants normal / focus / selected → instead of a per-state image set, change only color/size/opacity with css size variants → a single svg covers all sizes /* handle color/direction variants with one icon copy */ icon { color #999; } /* svg uses fill="currentcolor" */ icon focus, icon is-selected { color #fff; } icon--flip { transform scalex -1 ; } /* reuse the left arrow as a right arrow */ turning 24 icons into files across 3 colors × 2 directions yields 144 files reusing the same asset keeps it at 24 4 3 resize to display size don't bundle a 4k original for an image shown at 200×300 bundling a file pre-resized to the display size greatly reduces size if you need different assets per resolution fhd/4k , prepare only the sizes you actually use 4 4 prefer lightweight formats photos / complex images → webp recommended smaller than jpeg/png at equal quality it's widely supported by tv web engines, making it the safest choice even smaller alternative → avif higher compression, but it may not be supported depending on the web engine version always verify support on your target platform's chromium version, and use webp if you're unsure logos / icons / simple shapes → svg being vector, they're small and crisp regardless of resolution bundle multiple icons as an svg sprite animation → avoid gif animated gifs are large and use a lot of decode memory use css animations for simple ui motion loading spinners, emphasis effects , and animated webp when raster animation is truly required if you don't need transparency, use a format without an alpha channel jpeg/lossy webp 4 5 squeeze further with lossless/lossy compression tools even after choosing a format, re-compressing with a dedicated tool can reduce size further with no or minimal quality loss png lossless zopflipng powerful but slow , oxipng/optipng if the color count is low, pngquant palette-based lossy saves a lot jpeg mozjpeg cjpeg , jpegtran lossless re-compression webp cwebp lossy via -q, lossless via -lossless svg svgo remove metadata, redundant decimals, comments general strip unnecessary metadata such as exif # lossless png optimization zopflipng zopflipng -m in png out png # for pngs with few colors, palette lossy compression is far more effective pngquant --quality=65-85 --output out png in png # jpeg → webp photos lossy, quality 75-85 recommended cwebp -q 80 photo jpg -o photo webp # logo / transparent png → lossless webp cwebp -lossless logo png -o logo webp # svg optimization svgo icon svg -o icon min svg lossy vs lossless for photos, lossy compression webp/jpeg around quality 75-85 gives the best quality-per-byte use lossless or a palette pngquant for logos, transparent images, and ui elements that must stay crisp always check quality by eye after compression and adjust the quality value 4 6 automate it in the build pipeline image optimization is easy to forget if done by hand each time handle it automatically at build time general purpose the imagemin family of plugins imagemin-webp, imagemin-pngquant, imagemin-zopfli, imagemin-mozjpeg, imagemin-svgo node pipeline sharp fast resize + format conversion bundler plugins vite/webpack image-optimization plugins that convert/compress automatically at build time // example automate resize + webp conversion with sharp build script import sharp from 'sharp'; await sharp 'poster_original jpg' resize 400, 600 // resize to display size webp { quality 80 } // lightweight format + lossy compression tofile 'poster_400x600 webp' ; keep the originals separately optimization resize/lossy compression is irreversible, so keep the source originals in your repository/asset store and bundle the optimized versions only into the build output 5 fonts & other assets 5 1 fonts bundle only the weights/styles you truly need limit to regular/bold and exclude unused light, thin, italic use subset fonts that contain only the characters you actually use this is especially effective for cjk chinese/japanese/korean , where a full-glyph font can reach several mb use woff2 — the best-compressed font format if the platform's built-in fonts are enough, not bundling a web font at all is the surest saving 5 2 local media minimize the count and length of media intro videos, sound effects bundled into the package, and compress with an appropriate codec/bitrate where possible, don't bundle it locally — stream/download it at runtime to keep it out of the package size but you must also have a cleanup policy so fetched files don't keep piling up on the device section 7 5 3 other data minimize large json/static data bundled in, and if it isn't needed on the first screen, move it out of the package via a runtime fetch here too, cap the response cache so it doesn't grow without bound section 7 6 what not to bundle what you didn't ship needs no optimization no matter how much you shrink things with compression/resizing, nothing is a surer saving than leaving out features and files you don't need in the first place 6 1 re-examine the features and assets themselves the question that should come before technical optimization is "is this really needed?" as releases pile up, unused things accumulate low-usage features — if you have usage metrics, check them and remove or defer to the next release screens/features that are barely used dropping one feature often has more impact than compressing dozens of assets large decorative assets — intro videos, splash animations, full-screen background illustrations if it's a flourish users skip every time, it's not worth paying for in size frame-image animations — especially expensive first consider whether a css animation can give the same impression 4 1 experiment/event leftovers — a/b test variants, seasonal event assets, and pilot features are often left behind after they end this judgment is hard for a developer to make alone it's more effective to have a step that reviews "what can be dropped this time" together with planning/design before release 6 2 things that commonly tag along files that got in by accident often take more space than the assets you added on purpose removing such files has no effect on app behavior, so it's the lowest-risk, surest saving development source tree node_modules/, git/, build caches, dev config files source maps map files and the //# sourcemappingurl comments that point to them test/dev tools test files and snapshots, storybook, mock apis/sample data, debug panels design originals psd/ai/sketch files, un-optimized high-resolution original images — keep originals in the repository and bundle only the optimized versions documents readme, changelogs, bundles of dependency license text in the minimum form required if you have a notice obligation unused assets images, icons, fonts, and json no longer referenced after a ui refresh or plan change duplicate assets the same image included several times under different names comparing file hashes finds these easily unused locales translation files/region-specific assets for unsupported languages if you support many languages, consider loading only the selected language at runtime 6 3 use an "include list," not an "exclude list" listing what to exclude misses things every time a new file appears structure it as explicitly specifying only what to bundle configure the build so the output directory dist contains only the files needed to run, and package that directory as-is add a step just before packaging that prints the file list and sizes for a visual check unexpected files are usually caught at this step # show the 20 largest files in the output pre-release check find dist -type f -printf '%s\t%p\n' | sort -rn | head -20 # find duplicate files same content hash find dist -type f -exec md5sum {} + | sort | uniq -w32 -d put this check into your release script, and record the total output size alongside it — combined with the size budget from 3 1, it prevents size regressions 7 managing storage that accumulates after install storage isn't fixed at install time the cache/data the app creates as it runs occupies the same flash, and without a cap it keeps growing it's not rare for an app with a small install size to occupy several times that a few months later 7 1 what accumulates store what accumulates management point cache api / service worker image/js/api-response caches version the cache name; delete old-version caches indexeddb content lists, thumbnails, watch history cap item count/total; clean up old items localstorage settings, tokens, small state values don't put large data/images in it http cache network responses control lifetime via cache headers app data area downloaded media/thumbnails cap total downloads; provide a user delete option 7 2 how to do it set caps set limits on both count and total — e g , "thumbnail cache max 200 items / 20mb" — and when exceeded, evict the least recently used first lru set lifetimes give re-fetchable data content metadata, etc a ttl and delete it on expiry data kept "just in case it's needed" is the main cause of accumulation delete old-version caches on app update put a version in the cache name and remove the previous cache once the new version activates skip this cleanup and one copy of the cache piles up with every update check usage yourself read current usage with navigator storage estimate and clean up on your own when a threshold is crossed check support on your target web engine give users a way to delete offering "clear cache" in the settings screen lets users short on storage resolve it without uninstalling the app // remove old-version caches on app update service worker const cache_name = 'app-v12'; // bump the version each release self addeventlistener 'activate', event => { event waituntil caches keys then names => promise all names filter name => name !== cache_name map name => caches delete name // delete previous-version caches ; } ; // check usage and clean up on your own async function checkstorage { if !navigator storage? estimate return; const { usage } = await navigator storage estimate ; if usage > 30 * 1024 * 1024 { // e g over 30mb await trimthumbnailcache ; // delete least recently used items first } } if what you removed from the package just piles up in the cache instead, the saving disappears the strategy of moving large json/media to a runtime fetch 5 2, 5 3 leads to real storage savings only when a cap and cleanup policy are in place too in closing storage flash optimization comes down to four points don't ship what you don't need — start by clearing out unneeded features/decorative assets, remove unused code/css/dependencies/font weights, exclude dev files that tag along, and move large data/media to runtime ship what you do need in its smallest form — don't make an image out of what css can draw, handle variants of the same asset with code, and use production builds minify/tree-shaking , image resize/lightweight formats/compression, and font subsetting/woff2 manage what accumulates after install — put caps and lifetimes on cache/stored data, and clean up old-version caches on app update automate in the build pipeline and measure — bake image optimization and bundle minimization into the build, and keep watching the bundle analyzer and final package size to prevent size regressions a small app installs and updates fast, saves storage, and even starts faster ↑ back to top
Develop Smart TV
docweb app html5 flash storage optimization guide terminology here, "flash" means the device's flash memory storage where the app is installed and stored it has nothing to do with adobe flash nature of this document this is a best-practice guide it is not intended to mandate compliance or to trigger any action based on compliance — use it as a reference for better app quality and user experience contents why storage size optimization matters what takes up space minimize bundle code size with build options image & graphics asset optimization fonts & other assets what not to bundle managing storage that accumulates after install 1 why storage size optimization matters a tv's flash storage is limited and shared by the system and many apps a large app package causes the following problems installs/updates are slower and more likely to fail the larger the size, the longer the download/write, and installs/updates can fail when storage is tight it pressures storage when one app takes a lot of space, there's less room for other apps to install and less system cache space, degrading the whole device's usability it leads to loading cost larger code/assets increase parse/decode load, lengthening startup and affecting ram usage too the problem doesn't end at install time the cache/stored data the app creates while running occupies the same flash even if you make the package small, occupied space keeps growing if you don't manage this conversely, keeping the app small makes installs/updates fast, reduces download traffic, frees storage, and improves startup performance core principle ① don't ship what you don't need · ② ship what you do need in its smallest form · ③ manage what accumulates after install · ④ automate this in your build pipeline if you rely on doing it by hand every time, something will always slip through this document is a companion to the memory optimization guide, which covers ram runtime memory making assets smaller reduces not only storage but also the runtime memory spent on decoding/parsing 2 what takes up space first, understand what dominates your app package's size usually the order of magnitude is as follows asset description main way to reduce images backgrounds, posters, icons, sprites resize · lightweight formats · compression section 4 javascript/css bundle app code + libraries minify · tree-shaking · dependency diet section 3 fonts web fonts especially cjk subset · woff2 section 5 local media intro videos, sound effects, etc minimize · compress · switch to streaming section 5 other data json and static files bundled in minimize · move to runtime fetch section 5 files that tag along source maps, tests/mocks, original images, unused assets exclude from packaging section 6 measure first use a bundle analyzer to see with your own eyes which modules/assets take up space before you touch anything bundle analysis webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer file assets sort your build output dist directory by file size and review the biggest first final package record the package size for each release to keep a trend this value directly determines the space it takes on the device often a handful of large items account for most of the size before polishing many small ones, it's more efficient to handle the largest assets first 3 minimize bundle code size with build options the javascript/css you load takes storage by itself most popular bundlers/frameworks provide size optimization by default in their production build, so simply turning the options on correctly yields a big win option names and defaults change between tool versions the config examples below are meant to convey the gist when applying them for real, check the current version's options in the official docs linked at the end of each subsection 3 1 common principles regardless of framework always ship a production build development builds include warnings, debug code, and source maps, which are large minify js with terser/esbuild, css with cssnano/esbuild — strip whitespace/comments and shorten identifiers tree-shaking remove unused code works well only with es modules import/export choose libraries that support tree-shaking esm, sideeffects false remove unused css use purgecss, or the purge/content settings of frameworks like tailwind, to drop classes you don't use exclude source maps from the package source map files are very large don't include them in the shipped package; store them separately if needed dependency diet don't pull in a heavy library whole for one or two features; use only the parts you need, or consider a lighter alternative or your own implementation also remove duplicate dependencies that do the same thing don't let multiple versions of the same library get bundled together as the dependency tree deepens, it's common for two or three different versions of the same library to be included check for duplicate versions with npm ls <package>, and unify versions dedupe, overrides/resolutions so only one copy remains verify with a bundle analyzer don't inline images as base64 base64 is about 33% larger than the raw bytes, and when mixed into a js/css bundle it also lives in runtime memory as a string set the bundler's inline threshold small or 0 and keep images as separate files webpack rule parser dataurlcondition maxsize, vite build assetsinlinelimit avoid excessive transpilation/polyfills lowering syntax the target platform already supports down-leveling needlessly grows the code set your build target to the target environment set a size budget and enforce it in the build define a baseline for total output size so the build warns/fails when exceeded — this structurally blocks size regressions size-limit, bundlesize; angular has built-in budgets — see 3 6 know precisely — the scope of code splitting splitting code per screen with dynamic import benefits initial load time and runtime memory, but does not reduce the total amount of code bundled into the package what reduces storage total size is tree-shaking, minify, removing dependencies, and removing unused css apply the two separately 3 2 webpack mode 'production' auto-enables terser minification, tree-shaking, scope hoisting optimization usedexports, optimization minimize true css css-minimizer-webpack-plugin analysis webpack-bundle-analyzer // webpack config js essentials module exports = { mode 'production', // apply production optimizations at once devtool false, // keep source maps out of the package optimization { usedexports true, // tree-shaking minimize true, // terser minification splitchunks { chunks 'all' }, // split common modules dedupe }, module { rules [ { test /\ png|jpe?g|webp|svg $/i, type 'asset/resource', // output as separate files, no base64 inlining }, ], }, }; official docs production · tree shaking 3 3 vite / rollup a vite production build vite build performs minify + tree-shaking by default build sourcemap false to exclude source maps build minify esbuild by default, or terser , build rollupoptions output manualchunks to shape chunks analysis rollup-plugin-visualizer // vite config js essentials export default { build { minify 'esbuild', // fast, strong minification sourcemap false, // exclude source maps from the package cssminify true, assetsinlinelimit 0, // disable base64 image inlining rollupoptions { output { manualchunks { vendor ['large-shared-library'] } }, }, }, }; official docs vite — building for production · rollup — configuration options 3 4 react always ship a production build node_env=production — development builds include warnings and validation code and are large keep dev-only tools tests, mocks, debug panels out of the production bundle if the runtime weight is a burden, consider an interface-compatible lightweight alternative e g , the preact family use react lazy + suspense for per-screen splitting benefits initial load/memory — see the note in 3 1 for the total-size perspective official docs build a react app from scratch 3 5 vue the production build removes development warnings and hints sfcs vue and <script setup> reduce unnecessary code at compile time reduce unused global component/plugin registrations, and import in a tree-shakable form official docs production deployment 3 6 angular build with the production configuration aot compilation and the build optimizer are enabled by default set bundle budgets so the build warns/fails when size exceeds a threshold, preventing size regressions // angular json essentials — cap bundle size "budgets" [ { "type" "initial", "maximumwarning" "500kb", "maximumerror" "1mb" } ] official docs building angular apps includes size budget configuration 4 image & graphics asset optimization images usually account for the largest share of an app package the key is to not create images you don't need, keep only one copy of what you do need, size it to the minimum needed for display, use the most efficient format, and compress it as much as possible the impact shrinks toward the bottom, so apply these from the top down 4 1 first, check whether it needs to be an image at all the smallest image is no image the following need no file at all if drawn with css or code solid/gradient backgrounds → background-color, linear-gradient rounded corners/borders/shadows → border-radius, border, box-shadow dividers/dotted lines → border, outline repeating patterns → repeating-linear-gradient simple shapes circles, triangles, badge backgrounds, ribbons → css or inline svg gauges/progress bars/simple charts → draw with css or canvas /* css instead of an image gradient background + rounded corners + shadow */ poster-overlay { background linear-gradient to top, rgba 0, 0, 0, 8 , transparent ; border-radius 8px; box-shadow 0 4px 12px rgba 0, 0, 0, 4 ; } it's common to turn a design mockup into a file just because it arrived as an image go through your asset list and ask "can this be done with css?" for each one not only does size drop, but color/size changes become easier too 4 2 keep one copy of an asset and handle variants with code keeping color/direction/state variants of the same graphic as separate files multiplies the asset count handle variants with css color variants → keep svg with fill="currentcolor" and control via css color for raster icons, use mask-image + background-color, or filter direction variants → don't keep left/right arrows as two files; use transform scalex -1 , and rotate 180deg for up/down rtl layout support works the same way state variants normal / focus / selected → instead of a per-state image set, change only color/size/opacity with css size variants → a single svg covers all sizes /* handle color/direction variants with one icon copy */ icon { color #999; } /* svg uses fill="currentcolor" */ icon focus, icon is-selected { color #fff; } icon--flip { transform scalex -1 ; } /* reuse the left arrow as a right arrow */ turning 24 icons into files across 3 colors × 2 directions yields 144 files reusing the same asset keeps it at 24 4 3 resize to display size don't bundle a 4k original for an image shown at 200×300 bundling a file pre-resized to the display size greatly reduces size if you need different assets per resolution fhd/4k , prepare only the sizes you actually use 4 4 prefer lightweight formats photos / complex images → webp recommended smaller than jpeg/png at equal quality it's widely supported by tv web engines, making it the safest choice even smaller alternative → avif higher compression, but it may not be supported depending on the web engine version always verify support on your target platform's chromium version, and use webp if you're unsure logos / icons / simple shapes → svg being vector, they're small and crisp regardless of resolution bundle multiple icons as an svg sprite animation → avoid gif animated gifs are large and use a lot of decode memory use css animations for simple ui motion loading spinners, emphasis effects , and animated webp when raster animation is truly required if you don't need transparency, use a format without an alpha channel jpeg/lossy webp 4 5 squeeze further with lossless/lossy compression tools even after choosing a format, re-compressing with a dedicated tool can reduce size further with no or minimal quality loss png lossless zopflipng powerful but slow , oxipng/optipng if the color count is low, pngquant palette-based lossy saves a lot jpeg mozjpeg cjpeg , jpegtran lossless re-compression webp cwebp lossy via -q, lossless via -lossless svg svgo remove metadata, redundant decimals, comments general strip unnecessary metadata such as exif # lossless png optimization zopflipng zopflipng -m in png out png # for pngs with few colors, palette lossy compression is far more effective pngquant --quality=65-85 --output out png in png # jpeg → webp photos lossy, quality 75-85 recommended cwebp -q 80 photo jpg -o photo webp # logo / transparent png → lossless webp cwebp -lossless logo png -o logo webp # svg optimization svgo icon svg -o icon min svg lossy vs lossless for photos, lossy compression webp/jpeg around quality 75-85 gives the best quality-per-byte use lossless or a palette pngquant for logos, transparent images, and ui elements that must stay crisp always check quality by eye after compression and adjust the quality value 4 6 automate it in the build pipeline image optimization is easy to forget if done by hand each time handle it automatically at build time general purpose the imagemin family of plugins imagemin-webp, imagemin-pngquant, imagemin-zopfli, imagemin-mozjpeg, imagemin-svgo node pipeline sharp fast resize + format conversion bundler plugins vite/webpack image-optimization plugins that convert/compress automatically at build time // example automate resize + webp conversion with sharp build script import sharp from 'sharp'; await sharp 'poster_original jpg' resize 400, 600 // resize to display size webp { quality 80 } // lightweight format + lossy compression tofile 'poster_400x600 webp' ; keep the originals separately optimization resize/lossy compression is irreversible, so keep the source originals in your repository/asset store and bundle the optimized versions only into the build output 5 fonts & other assets 5 1 fonts bundle only the weights/styles you truly need limit to regular/bold and exclude unused light, thin, italic use subset fonts that contain only the characters you actually use this is especially effective for cjk chinese/japanese/korean , where a full-glyph font can reach several mb use woff2 — the best-compressed font format if the platform's built-in fonts are enough, not bundling a web font at all is the surest saving 5 2 local media minimize the count and length of media intro videos, sound effects bundled into the package, and compress with an appropriate codec/bitrate where possible, don't bundle it locally — stream/download it at runtime to keep it out of the package size but you must also have a cleanup policy so fetched files don't keep piling up on the device section 7 5 3 other data minimize large json/static data bundled in, and if it isn't needed on the first screen, move it out of the package via a runtime fetch here too, cap the response cache so it doesn't grow without bound section 7 6 what not to bundle what you didn't ship needs no optimization no matter how much you shrink things with compression/resizing, nothing is a surer saving than leaving out features and files you don't need in the first place 6 1 re-examine the features and assets themselves the question that should come before technical optimization is "is this really needed?" as releases pile up, unused things accumulate low-usage features — if you have usage metrics, check them and remove or defer to the next release screens/features that are barely used dropping one feature often has more impact than compressing dozens of assets large decorative assets — intro videos, splash animations, full-screen background illustrations if it's a flourish users skip every time, it's not worth paying for in size frame-image animations — especially expensive first consider whether a css animation can give the same impression 4 1 experiment/event leftovers — a/b test variants, seasonal event assets, and pilot features are often left behind after they end this judgment is hard for a developer to make alone it's more effective to have a step that reviews "what can be dropped this time" together with planning/design before release 6 2 things that commonly tag along files that got in by accident often take more space than the assets you added on purpose removing such files has no effect on app behavior, so it's the lowest-risk, surest saving development source tree node_modules/, git/, build caches, dev config files source maps map files and the //# sourcemappingurl comments that point to them test/dev tools test files and snapshots, storybook, mock apis/sample data, debug panels design originals psd/ai/sketch files, un-optimized high-resolution original images — keep originals in the repository and bundle only the optimized versions documents readme, changelogs, bundles of dependency license text in the minimum form required if you have a notice obligation unused assets images, icons, fonts, and json no longer referenced after a ui refresh or plan change duplicate assets the same image included several times under different names comparing file hashes finds these easily unused locales translation files/region-specific assets for unsupported languages if you support many languages, consider loading only the selected language at runtime 6 3 use an "include list," not an "exclude list" listing what to exclude misses things every time a new file appears structure it as explicitly specifying only what to bundle configure the build so the output directory dist contains only the files needed to run, and package that directory as-is add a step just before packaging that prints the file list and sizes for a visual check unexpected files are usually caught at this step # show the 20 largest files in the output pre-release check find dist -type f -printf '%s\t%p\n' | sort -rn | head -20 # find duplicate files same content hash find dist -type f -exec md5sum {} + | sort | uniq -w32 -d put this check into your release script, and record the total output size alongside it — combined with the size budget from 3 1, it prevents size regressions 7 managing storage that accumulates after install storage isn't fixed at install time the cache/data the app creates as it runs occupies the same flash, and without a cap it keeps growing it's not rare for an app with a small install size to occupy several times that a few months later 7 1 what accumulates store what accumulates management point cache api / service worker image/js/api-response caches version the cache name; delete old-version caches indexeddb content lists, thumbnails, watch history cap item count/total; clean up old items localstorage settings, tokens, small state values don't put large data/images in it http cache network responses control lifetime via cache headers app data area downloaded media/thumbnails cap total downloads; provide a user delete option 7 2 how to do it set caps set limits on both count and total — e g , "thumbnail cache max 200 items / 20mb" — and when exceeded, evict the least recently used first lru set lifetimes give re-fetchable data content metadata, etc a ttl and delete it on expiry data kept "just in case it's needed" is the main cause of accumulation delete old-version caches on app update put a version in the cache name and remove the previous cache once the new version activates skip this cleanup and one copy of the cache piles up with every update check usage yourself read current usage with navigator storage estimate and clean up on your own when a threshold is crossed check support on your target web engine give users a way to delete offering "clear cache" in the settings screen lets users short on storage resolve it without uninstalling the app // remove old-version caches on app update service worker const cache_name = 'app-v12'; // bump the version each release self addeventlistener 'activate', event => { event waituntil caches keys then names => promise all names filter name => name !== cache_name map name => caches delete name // delete previous-version caches ; } ; // check usage and clean up on your own async function checkstorage { if !navigator storage? estimate return; const { usage } = await navigator storage estimate ; if usage > 30 * 1024 * 1024 { // e g over 30mb await trimthumbnailcache ; // delete least recently used items first } } if what you removed from the package just piles up in the cache instead, the saving disappears the strategy of moving large json/media to a runtime fetch 5 2, 5 3 leads to real storage savings only when a cap and cleanup policy are in place too in closing storage flash optimization comes down to four points don't ship what you don't need — start by clearing out unneeded features/decorative assets, remove unused code/css/dependencies/font weights, exclude dev files that tag along, and move large data/media to runtime ship what you do need in its smallest form — don't make an image out of what css can draw, handle variants of the same asset with code, and use production builds minify/tree-shaking , image resize/lightweight formats/compression, and font subsetting/woff2 manage what accumulates after install — put caps and lifetimes on cache/stored data, and clean up old-version caches on app update automate in the build pipeline and measure — bake image optimization and bundle minimization into the build, and keep watching the bundle analyzer and final package size to prevent size regressions a small app installs and updates fast, saves storage, and even starts faster ↑ back to top
Develop Smart Signage
docweb app html5 flash storage optimization guide terminology here, "flash" means the device's flash memory storage where the app is installed and stored it has nothing to do with adobe flash nature of this document this is a best-practice guide it is not intended to mandate compliance or to trigger any action based on compliance — use it as a reference for better app quality and user experience contents why storage size optimization matters what takes up space minimize bundle code size with build options image & graphics asset optimization fonts & other assets what not to bundle managing storage that accumulates after install 1 why storage size optimization matters a tv's flash storage is limited and shared by the system and many apps a large app package causes the following problems installs/updates are slower and more likely to fail the larger the size, the longer the download/write, and installs/updates can fail when storage is tight it pressures storage when one app takes a lot of space, there's less room for other apps to install and less system cache space, degrading the whole device's usability it leads to loading cost larger code/assets increase parse/decode load, lengthening startup and affecting ram usage too the problem doesn't end at install time the cache/stored data the app creates while running occupies the same flash even if you make the package small, occupied space keeps growing if you don't manage this conversely, keeping the app small makes installs/updates fast, reduces download traffic, frees storage, and improves startup performance core principle ① don't ship what you don't need · ② ship what you do need in its smallest form · ③ manage what accumulates after install · ④ automate this in your build pipeline if you rely on doing it by hand every time, something will always slip through this document is a companion to the memory optimization guide, which covers ram runtime memory making assets smaller reduces not only storage but also the runtime memory spent on decoding/parsing 2 what takes up space first, understand what dominates your app package's size usually the order of magnitude is as follows asset description main way to reduce images backgrounds, posters, icons, sprites resize · lightweight formats · compression section 4 javascript/css bundle app code + libraries minify · tree-shaking · dependency diet section 3 fonts web fonts especially cjk subset · woff2 section 5 local media intro videos, sound effects, etc minimize · compress · switch to streaming section 5 other data json and static files bundled in minimize · move to runtime fetch section 5 files that tag along source maps, tests/mocks, original images, unused assets exclude from packaging section 6 measure first use a bundle analyzer to see with your own eyes which modules/assets take up space before you touch anything bundle analysis webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer file assets sort your build output dist directory by file size and review the biggest first final package record the package size for each release to keep a trend this value directly determines the space it takes on the device often a handful of large items account for most of the size before polishing many small ones, it's more efficient to handle the largest assets first 3 minimize bundle code size with build options the javascript/css you load takes storage by itself most popular bundlers/frameworks provide size optimization by default in their production build, so simply turning the options on correctly yields a big win option names and defaults change between tool versions the config examples below are meant to convey the gist when applying them for real, check the current version's options in the official docs linked at the end of each subsection 3 1 common principles regardless of framework always ship a production build development builds include warnings, debug code, and source maps, which are large minify js with terser/esbuild, css with cssnano/esbuild — strip whitespace/comments and shorten identifiers tree-shaking remove unused code works well only with es modules import/export choose libraries that support tree-shaking esm, sideeffects false remove unused css use purgecss, or the purge/content settings of frameworks like tailwind, to drop classes you don't use exclude source maps from the package source map files are very large don't include them in the shipped package; store them separately if needed dependency diet don't pull in a heavy library whole for one or two features; use only the parts you need, or consider a lighter alternative or your own implementation also remove duplicate dependencies that do the same thing don't let multiple versions of the same library get bundled together as the dependency tree deepens, it's common for two or three different versions of the same library to be included check for duplicate versions with npm ls <package>, and unify versions dedupe, overrides/resolutions so only one copy remains verify with a bundle analyzer don't inline images as base64 base64 is about 33% larger than the raw bytes, and when mixed into a js/css bundle it also lives in runtime memory as a string set the bundler's inline threshold small or 0 and keep images as separate files webpack rule parser dataurlcondition maxsize, vite build assetsinlinelimit avoid excessive transpilation/polyfills lowering syntax the target platform already supports down-leveling needlessly grows the code set your build target to the target environment set a size budget and enforce it in the build define a baseline for total output size so the build warns/fails when exceeded — this structurally blocks size regressions size-limit, bundlesize; angular has built-in budgets — see 3 6 know precisely — the scope of code splitting splitting code per screen with dynamic import benefits initial load time and runtime memory, but does not reduce the total amount of code bundled into the package what reduces storage total size is tree-shaking, minify, removing dependencies, and removing unused css apply the two separately 3 2 webpack mode 'production' auto-enables terser minification, tree-shaking, scope hoisting optimization usedexports, optimization minimize true css css-minimizer-webpack-plugin analysis webpack-bundle-analyzer // webpack config js essentials module exports = { mode 'production', // apply production optimizations at once devtool false, // keep source maps out of the package optimization { usedexports true, // tree-shaking minimize true, // terser minification splitchunks { chunks 'all' }, // split common modules dedupe }, module { rules [ { test /\ png|jpe?g|webp|svg $/i, type 'asset/resource', // output as separate files, no base64 inlining }, ], }, }; official docs production · tree shaking 3 3 vite / rollup a vite production build vite build performs minify + tree-shaking by default build sourcemap false to exclude source maps build minify esbuild by default, or terser , build rollupoptions output manualchunks to shape chunks analysis rollup-plugin-visualizer // vite config js essentials export default { build { minify 'esbuild', // fast, strong minification sourcemap false, // exclude source maps from the package cssminify true, assetsinlinelimit 0, // disable base64 image inlining rollupoptions { output { manualchunks { vendor ['large-shared-library'] } }, }, }, }; official docs vite — building for production · rollup — configuration options 3 4 react always ship a production build node_env=production — development builds include warnings and validation code and are large keep dev-only tools tests, mocks, debug panels out of the production bundle if the runtime weight is a burden, consider an interface-compatible lightweight alternative e g , the preact family use react lazy + suspense for per-screen splitting benefits initial load/memory — see the note in 3 1 for the total-size perspective official docs build a react app from scratch 3 5 vue the production build removes development warnings and hints sfcs vue and <script setup> reduce unnecessary code at compile time reduce unused global component/plugin registrations, and import in a tree-shakable form official docs production deployment 3 6 angular build with the production configuration aot compilation and the build optimizer are enabled by default set bundle budgets so the build warns/fails when size exceeds a threshold, preventing size regressions // angular json essentials — cap bundle size "budgets" [ { "type" "initial", "maximumwarning" "500kb", "maximumerror" "1mb" } ] official docs building angular apps includes size budget configuration 4 image & graphics asset optimization images usually account for the largest share of an app package the key is to not create images you don't need, keep only one copy of what you do need, size it to the minimum needed for display, use the most efficient format, and compress it as much as possible the impact shrinks toward the bottom, so apply these from the top down 4 1 first, check whether it needs to be an image at all the smallest image is no image the following need no file at all if drawn with css or code solid/gradient backgrounds → background-color, linear-gradient rounded corners/borders/shadows → border-radius, border, box-shadow dividers/dotted lines → border, outline repeating patterns → repeating-linear-gradient simple shapes circles, triangles, badge backgrounds, ribbons → css or inline svg gauges/progress bars/simple charts → draw with css or canvas /* css instead of an image gradient background + rounded corners + shadow */ poster-overlay { background linear-gradient to top, rgba 0, 0, 0, 8 , transparent ; border-radius 8px; box-shadow 0 4px 12px rgba 0, 0, 0, 4 ; } it's common to turn a design mockup into a file just because it arrived as an image go through your asset list and ask "can this be done with css?" for each one not only does size drop, but color/size changes become easier too 4 2 keep one copy of an asset and handle variants with code keeping color/direction/state variants of the same graphic as separate files multiplies the asset count handle variants with css color variants → keep svg with fill="currentcolor" and control via css color for raster icons, use mask-image + background-color, or filter direction variants → don't keep left/right arrows as two files; use transform scalex -1 , and rotate 180deg for up/down rtl layout support works the same way state variants normal / focus / selected → instead of a per-state image set, change only color/size/opacity with css size variants → a single svg covers all sizes /* handle color/direction variants with one icon copy */ icon { color #999; } /* svg uses fill="currentcolor" */ icon focus, icon is-selected { color #fff; } icon--flip { transform scalex -1 ; } /* reuse the left arrow as a right arrow */ turning 24 icons into files across 3 colors × 2 directions yields 144 files reusing the same asset keeps it at 24 4 3 resize to display size don't bundle a 4k original for an image shown at 200×300 bundling a file pre-resized to the display size greatly reduces size if you need different assets per resolution fhd/4k , prepare only the sizes you actually use 4 4 prefer lightweight formats photos / complex images → webp recommended smaller than jpeg/png at equal quality it's widely supported by tv web engines, making it the safest choice even smaller alternative → avif higher compression, but it may not be supported depending on the web engine version always verify support on your target platform's chromium version, and use webp if you're unsure logos / icons / simple shapes → svg being vector, they're small and crisp regardless of resolution bundle multiple icons as an svg sprite animation → avoid gif animated gifs are large and use a lot of decode memory use css animations for simple ui motion loading spinners, emphasis effects , and animated webp when raster animation is truly required if you don't need transparency, use a format without an alpha channel jpeg/lossy webp 4 5 squeeze further with lossless/lossy compression tools even after choosing a format, re-compressing with a dedicated tool can reduce size further with no or minimal quality loss png lossless zopflipng powerful but slow , oxipng/optipng if the color count is low, pngquant palette-based lossy saves a lot jpeg mozjpeg cjpeg , jpegtran lossless re-compression webp cwebp lossy via -q, lossless via -lossless svg svgo remove metadata, redundant decimals, comments general strip unnecessary metadata such as exif # lossless png optimization zopflipng zopflipng -m in png out png # for pngs with few colors, palette lossy compression is far more effective pngquant --quality=65-85 --output out png in png # jpeg → webp photos lossy, quality 75-85 recommended cwebp -q 80 photo jpg -o photo webp # logo / transparent png → lossless webp cwebp -lossless logo png -o logo webp # svg optimization svgo icon svg -o icon min svg lossy vs lossless for photos, lossy compression webp/jpeg around quality 75-85 gives the best quality-per-byte use lossless or a palette pngquant for logos, transparent images, and ui elements that must stay crisp always check quality by eye after compression and adjust the quality value 4 6 automate it in the build pipeline image optimization is easy to forget if done by hand each time handle it automatically at build time general purpose the imagemin family of plugins imagemin-webp, imagemin-pngquant, imagemin-zopfli, imagemin-mozjpeg, imagemin-svgo node pipeline sharp fast resize + format conversion bundler plugins vite/webpack image-optimization plugins that convert/compress automatically at build time // example automate resize + webp conversion with sharp build script import sharp from 'sharp'; await sharp 'poster_original jpg' resize 400, 600 // resize to display size webp { quality 80 } // lightweight format + lossy compression tofile 'poster_400x600 webp' ; keep the originals separately optimization resize/lossy compression is irreversible, so keep the source originals in your repository/asset store and bundle the optimized versions only into the build output 5 fonts & other assets 5 1 fonts bundle only the weights/styles you truly need limit to regular/bold and exclude unused light, thin, italic use subset fonts that contain only the characters you actually use this is especially effective for cjk chinese/japanese/korean , where a full-glyph font can reach several mb use woff2 — the best-compressed font format if the platform's built-in fonts are enough, not bundling a web font at all is the surest saving 5 2 local media minimize the count and length of media intro videos, sound effects bundled into the package, and compress with an appropriate codec/bitrate where possible, don't bundle it locally — stream/download it at runtime to keep it out of the package size but you must also have a cleanup policy so fetched files don't keep piling up on the device section 7 5 3 other data minimize large json/static data bundled in, and if it isn't needed on the first screen, move it out of the package via a runtime fetch here too, cap the response cache so it doesn't grow without bound section 7 6 what not to bundle what you didn't ship needs no optimization no matter how much you shrink things with compression/resizing, nothing is a surer saving than leaving out features and files you don't need in the first place 6 1 re-examine the features and assets themselves the question that should come before technical optimization is "is this really needed?" as releases pile up, unused things accumulate low-usage features — if you have usage metrics, check them and remove or defer to the next release screens/features that are barely used dropping one feature often has more impact than compressing dozens of assets large decorative assets — intro videos, splash animations, full-screen background illustrations if it's a flourish users skip every time, it's not worth paying for in size frame-image animations — especially expensive first consider whether a css animation can give the same impression 4 1 experiment/event leftovers — a/b test variants, seasonal event assets, and pilot features are often left behind after they end this judgment is hard for a developer to make alone it's more effective to have a step that reviews "what can be dropped this time" together with planning/design before release 6 2 things that commonly tag along files that got in by accident often take more space than the assets you added on purpose removing such files has no effect on app behavior, so it's the lowest-risk, surest saving development source tree node_modules/, git/, build caches, dev config files source maps map files and the //# sourcemappingurl comments that point to them test/dev tools test files and snapshots, storybook, mock apis/sample data, debug panels design originals psd/ai/sketch files, un-optimized high-resolution original images — keep originals in the repository and bundle only the optimized versions documents readme, changelogs, bundles of dependency license text in the minimum form required if you have a notice obligation unused assets images, icons, fonts, and json no longer referenced after a ui refresh or plan change duplicate assets the same image included several times under different names comparing file hashes finds these easily unused locales translation files/region-specific assets for unsupported languages if you support many languages, consider loading only the selected language at runtime 6 3 use an "include list," not an "exclude list" listing what to exclude misses things every time a new file appears structure it as explicitly specifying only what to bundle configure the build so the output directory dist contains only the files needed to run, and package that directory as-is add a step just before packaging that prints the file list and sizes for a visual check unexpected files are usually caught at this step # show the 20 largest files in the output pre-release check find dist -type f -printf '%s\t%p\n' | sort -rn | head -20 # find duplicate files same content hash find dist -type f -exec md5sum {} + | sort | uniq -w32 -d put this check into your release script, and record the total output size alongside it — combined with the size budget from 3 1, it prevents size regressions 7 managing storage that accumulates after install storage isn't fixed at install time the cache/data the app creates as it runs occupies the same flash, and without a cap it keeps growing it's not rare for an app with a small install size to occupy several times that a few months later 7 1 what accumulates store what accumulates management point cache api / service worker image/js/api-response caches version the cache name; delete old-version caches indexeddb content lists, thumbnails, watch history cap item count/total; clean up old items localstorage settings, tokens, small state values don't put large data/images in it http cache network responses control lifetime via cache headers app data area downloaded media/thumbnails cap total downloads; provide a user delete option 7 2 how to do it set caps set limits on both count and total — e g , "thumbnail cache max 200 items / 20mb" — and when exceeded, evict the least recently used first lru set lifetimes give re-fetchable data content metadata, etc a ttl and delete it on expiry data kept "just in case it's needed" is the main cause of accumulation delete old-version caches on app update put a version in the cache name and remove the previous cache once the new version activates skip this cleanup and one copy of the cache piles up with every update check usage yourself read current usage with navigator storage estimate and clean up on your own when a threshold is crossed check support on your target web engine give users a way to delete offering "clear cache" in the settings screen lets users short on storage resolve it without uninstalling the app // remove old-version caches on app update service worker const cache_name = 'app-v12'; // bump the version each release self addeventlistener 'activate', event => { event waituntil caches keys then names => promise all names filter name => name !== cache_name map name => caches delete name // delete previous-version caches ; } ; // check usage and clean up on your own async function checkstorage { if !navigator storage? estimate return; const { usage } = await navigator storage estimate ; if usage > 30 * 1024 * 1024 { // e g over 30mb await trimthumbnailcache ; // delete least recently used items first } } if what you removed from the package just piles up in the cache instead, the saving disappears the strategy of moving large json/media to a runtime fetch 5 2, 5 3 leads to real storage savings only when a cap and cleanup policy are in place too in closing storage flash optimization comes down to four points don't ship what you don't need — start by clearing out unneeded features/decorative assets, remove unused code/css/dependencies/font weights, exclude dev files that tag along, and move large data/media to runtime ship what you do need in its smallest form — don't make an image out of what css can draw, handle variants of the same asset with code, and use production builds minify/tree-shaking , image resize/lightweight formats/compression, and font subsetting/woff2 manage what accumulates after install — put caps and lifetimes on cache/stored data, and clean up old-version caches on app update automate in the build pipeline and measure — bake image optimization and bundle minimization into the build, and keep watching the bundle analyzer and final package size to prevent size regressions a small app installs and updates fast, saves storage, and even starts faster ↑ back to top
We use cookies to improve your experience on our website and to show you relevant advertising. Manage you settings for our cookies below.
These cookies are essential as they enable you to move around the website. This category cannot be disabled.
These cookies collect information about how you use our website. for example which pages you visit most often. All information these cookies collect is used to improve how the website works.
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and tailor the website to provide enhanced features and content for you.
You have successfully updated your cookie preferences.