clinet setup
Include the following script
<script async src="https://microapps.google.com/apis/v1alpha/microapps.js"></script>
Debugging in Chrome DevTools
Testing
- test account 在注册时 被提供
- 找到自己的spot
Debug Mode
- 可以切换 环境 生产/开发
- Debug a Spot on your phone using Chrome DevTools.
Web Simulator
在浏览器模拟 操作
https://microapps.google.com/simulator?appUrl=https://example.net/microapp.html
Spot URL
deep link to the Spot with your spot id
https://microapps.google.com/your.microapp.id
Linking to specific paths
https://microapps.google.com/your.microapp.id?link=foo%2Fbar%3Fparam1%3Dabc%26param2%3Ddef
// 上面页面 会在app 跳转https://example.net/foo/bar?param1=abc¶m2=def
Best Practices
- All web pages of a Spot must be served through HTTPS only.
- use other domain must added to a list of allowed domains- contact your Google representative to do so.
- No cookies
- Use HTML5 Web Storage APIs to cache assets and store the state, and achieve fast, resumable experience when users return to the Spot.
- Spots are hosted via an iframe within the Google Pay app, therefore you must include the following header when serving your web pages: “Content-Security-Policy: frame-ancestors https://microapps.google.com/“.
- Refer to Performance Optimization for more recommendations on how to build a Spot with high performance.
性能优化
减少JavaScript大小
- JavaScript的大小必须较小，以帮助用户在不良网络和/或受CPU限制的设备上访问您的Spot。
- 仅从JS模块导入所需的功能，并从依赖项中消除无效代码。
- 将您的JavaScript代码分成较小的块，并发送最少的代码以预先提供价值，同时按需加载其余代码。
- 将性能预算设置为<200 KB的JS，以帮助提高性能，并在规划功能时坚持执行。
初始页面加载
- 缩小页面大小。最小化要为初始页面加载的代码和资源的数量。
- async在script标签上使用属性
- 如果可能，请避免使用动态内容。使目标页面相对静态和可缓存。可缓存的着陆页将使后续应用加载速度更快。
- 如果内容对于交互时间很重要，请尝试在服务器端呈现 时将其与初始页面加载一起使用，以避免额外的往返路程。但是，请注意，服务器端不应执行繁重的工作来处理动态内容，否则会减慢应用程序的加载速度。如果这是不可避免的，那么您可能需要重新考虑登录页面的UX设计。
- 如果动态部分是可选的，则首先向用户显示静态部分（请参阅Service worker部分中的App Shell模型），然后使用客户端呈现 来加载动态内容。
页面过渡
Service workers
A service worker has the potential to greatly improve initial page loading performance by caching the JS/CSS/static resources, which are necessary to render the page. In addition to the service worker, the app shell model allows some content to be displayed immediately while fetching the data asynchronously. The progressive change ensures a more native app-like experience even with flaky connections.