Download to read offline
![service-worker.js
'use strict';
importScripts('./build/sw-toolbox.js');
self.toolbox.options.cache = {
name: 'ionic-cache'
};
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
// dynamically cache any other local assets
self.toolbox.router.any(' /*', self.toolbox.fastest);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;](https://image.slidesharecdn.com/challengetonewtech-180615015721/85/PWA-53-320.jpg)
Uploaded byHiroshi Maekawa
新しい技術を取り入れるための実験のやり方 〜サーバーレス・機械学習・PWAを実戦に投入するまで〜
The document provides an overview of various technologies related to Progressive Web Apps (PWA), including frameworks like Angular, Ionic, and various AWS services. It discusses the application lifecycle management and integration of Java with AWS Lambda, as well as tools like AWS Toolkit for Eclipse and DynamoDB. Key topics include service workers, cloud infrastructure, and APIs, highlighting the implementation of features across mobile and web platforms.
More Related Content
![[Cordova] Empezando con Ionic](https://cdn.slidesharecdn.com/ss_thumbnails/cordovaempezandoconionic-160713033101-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to 新しい技術を取り入れるための実験のやり方 〜サーバーレス・機械学習・PWAを実戦に投入するまで〜
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
新しい技術を取り入れるための実験のやり方 〜サーバーレス・機械学習・PWAを実戦に投入するまで〜
- 1.
- 6.
- 7. • ALM • ApplicationLifecycle Management • • • Java • → • iOS: Swift • Web Vuejs → Angular/Ionic • C# .NET • Microsoft MVP for Visual Studio and Development • CI / CD • CircleCI
- 8. Agenda 1. 2. 3. Java onAWS Lambda 4. Ionic PWA 5. 6.
- 9. 1. 2. 3. Java onAWS Lambda 4. Ionic PWA 5. 6.
- 10. • Quality • • Cost • •Delivery • • Spec •
- 11. • Quality • • Cost • •Delivery • • Spec •
- 12.
- 13. • • GraphQL API •SPA • • React Native
- 14. • • GraphQL API •SPA • • React Native
- 15. 1. 2. 3. Java onAWS Lambda 4. Ionic PWA 5. 6.
- 16. • • MVP •= • MVP = •
- 17.
- 18. • • CRUD • • • Web/ iOS / Android 3 •
- 19. • SaaS • PWA
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. 1. 2. 3. Java onAWS Lambda 4. Ionic PWA 5. 6.
- 28. Java on AWSLambda • Java • • AWS Lambda
- 29. Java on AWSLambda • DynamoDB • RDB • AWS • AWS Toolkit for Eclipse • • Cognito
- 30. DynamoDB • AWS DynamoDBORM • DynamoDBMapper: https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBMapper.html • Dynamo Index • ORM
- 31. DynamoDBMapper @DynamoDBTable(tableName = "Detail") publicclass MemoryDetailItem { @DynamoDBHashKey(attributeName = "id") public String getId() { return childId; } @DynamoDBAttribute(attributeName = “Tag") public String getTag() { return title; } @DynamoDBAttribute(attributeName = "Item") public Item getItem() { return answer; } } @DynamoDBDocument public class Item { @DynamoDBAttribute(attributeName = "Title") public String getTitle() { return title; } @DynamoDBAttribute(attributeName = "Content") public String getContent() { return content; } }
- 32. AWS • AWS Toolkit forEclipse • AWS SAM Eclipse • BluePrint
- 33. AWS Toolkit forEclipse
- 34. AWS Toolkit forEclipse
- 35. AWS Toolkit forEclipse
- 36. AWS Toolkit forEclipse AWS
- 37. AWS Toolkit forEclipse AWS
- 38. • Cognito • APIGateway • AWS • Java •
- 40. • • DynamoDB Region • •DynamoDBMapper • •
- 41. Java • • JVM • Spring 1020 • • • • Java
- 42. • • / Java • •Java Go
- 44. 1. 2. 3. Java onAWS Lambda 4. Ionic PWA 5. 6.
- 45. PWA • Progressive WebApps • Web iOS/Android • iOS/Android • Android • iOS: Safari Edge Service Worker https://www.publickey1.jp/blog/17/safariedgeservice_worker.html
- 46.
- 47.
- 48. PWA vs NativeApps https://youtu.be/XoIhPjS5y1M • •
- 49. Ionic • Angular • UI •Web • cordova native
- 50. Ionic • • iOS/ Android •Web • PWA • • CLI
- 51.
- 52. Ionic PWA • PWA •ServiceWorker • • •
- 53. service-worker.js 'use strict'; importScripts('./build/sw-toolbox.js'); self.toolbox.options.cache ={ name: 'ionic-cache' }; // pre-cache our key assets self.toolbox.precache( [ './build/main.js', './build/vendor.js', './build/main.css', './build/polyfills.js', 'index.html', 'manifest.json' ] ); // dynamically cache any other local assets self.toolbox.router.any(' /*', self.toolbox.fastest); // for any other requests go to the network, cache, // and then only use that cached resource if your user goes offline self.toolbox.router.default = self.toolbox.networkFirst;
- 54.
- 55. Ionic • TypeScript • •IDE VS Code / WebStorm
- 56. Ionic • Ionic UI •, & • • Web • Angular
- 57.
- 58. AWS Cognito • AWSAmplify • / / • // Auth.signIn(credential.email, credential.password) .then((user) => { console.log('sign in: success', user); }); // Auth.signUp({username, password, attributes: {email}}) .then(data => { console.log(data); }); // PIN Auth.confirmSignUp(this.user.username, this.registerInfo.code) .then((user) => { console.log('confirm: success', user); });
- 59. AWS Cognito • Cognito OK •PIN or SMS • Console
- 60. • Ionic UI •UI • Ionic UI • Angular • directive
- 62. 1. 2. 3. Java onAWS Lambda 4. Ionic PWA 5. 6.
- 63.
- 64.
- 65. • • Web • Support VectorMachine
- 66.
- 67.
- 68. SaaS • AWS /Microsoft / Google • • Google Natural Language API • AWS: • Microsoft: • Google:
- 69. Google Natural LanguageAPI • API • • • •
- 70. Google Natural LanguageAPI - - • Salience
- 71. Google Natural LanguageAPI - - • Positive Negative Score Magnitude
- 72. Google Natural LanguageAPI - - •
- 73. Google Natural LanguageAPI ※ 1,000 / 1 500 100 10
- 74. Google Natural LanguageAPI • API •
- 76. • • • • Lambda JavaLambda • Ionic • SaaS
- 77. • • Lambda MBaaS •Google FireStore / AWS AppSync • • Ionic • React / Vue.js • React Native / Nuxt • • SaaS PaaS • AWS SageMaker PaaS
- 78. • MVP • •