随笔分类 - PWA
Progressive web app
摘要:PWA: Add to home screen Angular Universal Server side rendering: for achieving better proference on init loading Angular 2 CLI ng new myapp --mobile s
阅读全文
摘要:Clone: Link Modify the structure: Move css, js, image, index.html to an 'app' folder. manifest.json: name: Showing on splash screen. short_name: Showi
阅读全文
摘要:1. Clone the project: 2. install the web server: 3. Open the web server, set app folder as current folder, toggle the switch button to restart the ser
阅读全文
摘要:Link to CodeLab In this codelab, we'll retrace those steps but this time we'll use a tool called sw-precache to add offline functionality with only si
阅读全文
摘要:Cache the avatars is little different from cache photos. We need to serve the page with our cache data and also go to the network for fetch avatars in
阅读全文
摘要:sw-toolbox: Github It provides a cononical implementation of all the runtime caching strategies that you need for you dynamice content. sw-precache: G
阅读全文
摘要:Mainly about Progressive web app: HTTPS Add to home screen Splash screen service worker notifications, bg sync offline notifications, bg sync Service
阅读全文
摘要:We cannot let photo always keep caching new data without clean the old data. If message is not display on the page anymore, we want to clean it. And a
阅读全文
摘要:To cache photo, You need to spreate cache db to save the photo. So in wittr example, we cache the text already, if there in the wittr there is photo,
阅读全文
摘要:When we save items to IndexDB, we need to think about clean the items or keep those in a short list.
阅读全文
摘要:We want to use IDB to store the wittr messages. The logic is when the page start: In openDatabase(), we create Wittr db, set id as primary key and tim
阅读全文
摘要:import idb from 'idb'; var dbPromise = idb.open('test-db', 4, function (upgradeDb) { switch (upgradeDb.oldVersion) { case 0: // keyval store is already created at version 1 ...
阅读全文
摘要:Create a db: The oldVersion switch between old db and new db. So here we create a new people db. ReadWrite: Group By:TO do gourp by we need to create
阅读全文
摘要:Use the library indexedDB-promised. Create a database and stroe: Notice put() function take value frist then key. Read the key in stroe: Write value t
阅读全文
摘要:Intead of cache the root floder, we want to cache skeleton instead. Respond to requests for the root page with thepage skeleton from the cache:
阅读全文
摘要:When the refersh button is clicked, we need to tell the waiting service worker to replace the current service worker right away. Then we refresh the p
阅读全文
摘要:In some rare cases, you need to ask user to refresh the browsser to update the version. Maybe because some secrity issues. As we have learnt so far. A
阅读全文
摘要:So once you modify the code, service worker will auto create a new one and it won't take control over until the previous service work total die(close
阅读全文
摘要:If you want your application works offline or lie-wifi. You need to use cache. API: Create Caches: Create single cache: Get the cache: When to start c
阅读全文
摘要:For example, if the url is not match to any API endpoint, we want to return 404 error message. So first thing, we want to send the request to the serv
阅读全文